WP7開發第二課 基本布局系統以及基本控制項（其一）

2022-07-03 17:24:14 字數 3248 閱讀 8652

上一課主要講wp7應用的一些基本常識，是作為快速上手使用的，但是這往往是不夠的，我們還需要知道更多的細節，那麼接下來的幾課就比較有針對性的講一些知識。

當然，我們一般先從控制項開始，wp7的控制項基本上是來自silverlight控制項，當然它也去除了一些不適合wp7的東西。

首先我們來看下布局控制項吧。

一：stackpanel 這是乙個堆疊面板，其子元素一般是按照橫排，或是豎排，放置，預設為豎排。可以設定orientation屬性

調整子元素排布方式。例如：

<


stackpanel orientation="


horizontal


">


<


button content="


按鈕"/>


<


button content="


按鈕"/>


<


button content="


按鈕"/>


<


stackpanel


>


<


button content="


按鈕"/>


<


button content="


按鈕"/>


<


button content="


按鈕"/>


stackpanel


>


stackpanel


>
從上面可以知道：容器為：stackpanel,其子元件是橫排列，其中乙個元件又有子元件，裡面內容預設是豎排列，因為stackpanel預設為豎排列方式。

結果如下：

二：canvas這是乙個畫布面板（絕對布局），其子元素一般是依據canvs的屬性進行排布，也就是依賴屬性，相當於x,y座標，但是它是canvas.top,canvas.left表示。例如：

<


canvas


>


<


button content="


按鈕"canvas.left="


0"canvas.top="


0"/>


<


button content="


按鈕"canvas.left="


80"canvas.top="


0"/>


<


button content="


按鈕"canvas.left="


160"


canvas.top="


0"/>


<


button content="


按鈕"canvas.left="


80"canvas.top="


45"/>


canvas


>
以上我們定義4個按鈕，然後設定其canvas.top,canvas.left 屬性，也就是y,x方向座標，當然預設為0,0，得到如下所示：

三：grid這是乙個**面板（相當於table），其子元素一般是依據grid指定的單元格布局，可以設定子元素為哪行哪列，也可以合併2個單元格，這與普通的table是一樣的。合併單元格的屬性主要是： grid.rowspan="2"  grid.columnspan="2"  合併2行或者 2列。例如：

<


grid


>


<


grid.rowdefinitions


>


<


rowdefinition height="


*"/>


<


rowdefinition height="


*"/>


<


rowdefinition height="


*"/>


grid.rowdefinitions


>


<


grid.columndefinitions


>


<


columndefinition width="


*"/>


<


columndefinition width="


*"/>


grid.columndefinitions


>


<


button content="


按鈕"/>


<


button content="


按鈕"grid.row="


1"grid.column="


0"background="


blue


"/>


<


button content="


按鈕"grid.column="


1"grid.rowspan="


2"background="


gray


"/>


<


button content="


按鈕"grid.row="


2"grid.columnspan="


2"background="


red"


/>


grid


>
以上定義3行2列的**，預設的子元件位於一行一列，也就是grid.row="0" grid.column="0" ,它是以0為索引開始布局的。我們需要注意的是

grid.rowspan="2" grid.columnspan="2"  屬性，它表示跨越2行，跨越2列的內容，顯示結果為：

看見了吧，grid是很有用處的。

以上就是主要的布局容器，可以作為頂層容器，也可以作為子容器，一般是不能被其他非容器包含的，但是有個東西除外，那就是border，這個是邊框，可以為容器設定乙個邊框，例如下面：

容器

執行結果如下：

WP7開發第二課 基本布局系統以及基本控制項（其一）

上一課主要講wp7應用的一些基本常識，是作為快速上手使用的，但是這往往是不夠的，我們還需要知道更多的細節，那麼接下來的幾課就比較有針對性的講一些知識。當然，我們一般先從控制項開始，wp7的控制項基本上是來自silverlight控制項，當然它也去除了一些不適合wp7的東西。首先我們來看下布局控制項吧...

JS 第二課 基本語法

1 使用var定義變數 var num1 宣告時不賦值，值為undefined var num2 hello 宣告時賦值，值為字串 hello num2 123 賦值時可以改變變數的型別 var num3 1,num4 5 可同時宣告多個變數 2 使用let定義變數 let num1 let num...

第二課 學習C 的基本語句

第二課 學習c 的基本語句 引子 上節課給大家介紹了如何在windows環境下安裝開發環境，如果您還沒有開發環境，即先看看第一節。這裡在開課前給初學者說幾句課外話 題外話1 初學者初學，最好不用vc的整合開發環境 ide ide有它的優點，但初學這個優點您還用不上。如果您不是初學者，請飄過。題外話2...