上一課主要講wp7應用的一些基本常識,是作為快速上手使用的,但是這往往是不夠的,我們還需要知道更多的細節,那麼接下來的幾課就比較有針對性的講一些知識。
當然,我們一般先從控制項開始,wp7的控制項基本上是來自silverlight控制項,當然它也去除了一些不適合wp7的東西。
首先我們來看下布局控制項吧。
一:stackpanel 這是乙個堆疊面板,其子元素一般是按照橫排,或是豎排,放置,預設為豎排。可以設定orientation屬性
調整子元素排布方式。例如:
<從上面可以知道:容器為:stackpanel,其子元件是橫排列,其中乙個元件又有子元件,裡面內容預設是豎排列,因為stackpanel預設為豎排列方式。stackpanel orientation="
horizontal
">
<
button content="
按鈕"/>
<
button content="
按鈕"/>
<
button content="
按鈕"/>
<
stackpanel
>
<
button content="
按鈕"/>
<
button content="
按鈕"/>
<
button content="
按鈕"/>
stackpanel
>
stackpanel
>
結果如下:
二:canvas這是乙個畫布面板(絕對布局),其子元素一般是依據canvs的屬性進行排布,也就是依賴屬性,相當於x,y座標,但是它是canvas.top,canvas.left表示。例如:
<以上我們定義4個按鈕,然後設定其canvas.top,canvas.left 屬性,也就是y,x方向座標,當然預設為0,0,得到如下所示: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
>
三:grid這是乙個**面板(相當於table),其子元素一般是依據grid指定的單元格布局,可以設定子元素為哪行哪列,也可以合併2個單元格,這與普通的table是一樣的。合併單元格的屬性主要是: grid.rowspan="2" grid.columnspan="2" 合併2行或者 2列。例如:
<以上定義3行2列的**,預設的子元件位於一行一列,也就是grid.row="0" grid.column="0" ,它是以0為索引開始布局的。我們需要注意的是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
>
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...