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

2021-09-22 08:51:32 字數 3222 閱讀 8955

上一課主要講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...