WP7 WP8 Windows8 教程 公用基礎篇 二 布局

文章目錄

• Grid
• Canvas
• Border

布局Grid

就是設計表格，將控制項放在表格的儲存格中，以這種方式來布局

<!--Grid表格版面配置

     Grid.RowDefinitions：定義Grid中的行

     Grid.ColumnDefinitions ：定義Grid的列

    

     -->

         <Grid HorizontalAlignment="Center" Height="210"  VerticalAlignment="Center" Width="305">

             <Grid.RowDefinitions>

                 <!--定義三行及每行高度-->

                 <RowDefinition Height="30*"/>

                 <RowDefinition Height="32*"/>

                 <RowDefinition Height="43*"/>

             </Grid.RowDefinitions>

             <Grid.ColumnDefinitions>

                 <!--定義四列及每列寬度-->

                 <ColumnDefinition Width="58*" />

                 <ColumnDefinition Width="61*"/>

                 <ColumnDefinition Width="123*"/>

                 <ColumnDefinition Width="63*"/>

             </Grid.ColumnDefinitions>

             <!--Grid第一列-->

             <Rectangle Fill="#FFF4F4F5"/>

             <Rectangle Fill="#FF0B0BEE" Grid.Row="1"  />

             <Rectangle Fill="#FFEECF0B" Grid.Row="2"   />

             <!--Grid第二列-->

             <Rectangle Fill="#FF34EE0B" Grid.Row="2" Grid.Column="1"  />

             <Rectangle Fill="#FFFF9A09" Grid.Row="0" Grid.Column="1"  />

             <Rectangle Fill="#FF08B7D3" Grid.Row="1" Grid.Column="1"  />

             <!--Grid第三列-->

             <Rectangle Fill="#FFD30889" Grid.Row="0" Grid.Column="2"  />

             <Rectangle Fill="#FFB708D3" Grid.Row="1" Grid.Column="2"  />

             <Rectangle Fill="#FF4B484B" Grid.Row="2" Grid.Column="2"  />

             <!--Grid第四列-->

             <Rectangle Fill="#FF661F4D" Grid.Row="0" Grid.Column="3"  />

             <Rectangle Fill="#FF0DF0BC" Grid.Row="1" Grid.Column="3"  />

             <Rectangle Fill="#FF0FAA4E" Grid.Row="2" Grid.Column="3"  />

         </Grid>

Canvas

利用座標來布局，遊戲中使用比較多

可以使用SetValue（）對Margin或者Canvas進行設定。

通過SetValue（）擷取控制項的相依性屬性。

例如：

myButton.SetValue(Canvas.LeftProperty, myPoint.X);

這裡myButton在xaml中是一個按鈕控制項，myPoint是Point類型變數。

 

<Canvas HorizontalAlignment="Center" Height="144" Margin="0" VerticalAlignment="Center" Width="276" Background="#FFAA6C6C">

             <!--Canvas裡子項目通過調整Canvas地區的絕對位置來定位

             Canvas.Left - 以左上方為原點，Canvas X軸的距離

             Canvas.Top - 以左上方為原點，Canvas Y軸的距離

              -->

             <Ellipse Fill="#FF0B0BC5" Height="51" Canvas.Left="30" Stroke="Black" Canvas.Top="52" Width="53"/>

             <Rectangle Fill="#FF32FD12" Height="56" Canvas.Left="119" Stroke="Black" Canvas.Top="38" Width="84"/>

         </Canvas>

StackPanel 排列布局控制項

將子項目排列成一行（可沿水平或垂直方向）

<StackPanel>

         <StackPanel Orientation="Horizontal" x:Name="stackpanel">

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

         <Button>ok</Button>

     </StackPanel>

Border

邊框，我一般使用border來控制樣式，製作自訂的控制項。常用的屬性 padding，margin，圓角設定等。

在blend中 常用的操作：

 

按右鍵一個控制項，然後 點擊 group into ，然後選擇grid，border等控制項。

 

 

<UserControl x:Class="Silverlight20.Control.Border"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Left">

<!--
BorderThickness - 邊框的寬度（像素值：上下左右；左右,上下；左,上,右,下）
BorderBrush - 邊框的顏色
CornerRadius - 邊框角的半徑
-->
<Border BorderThickness="1,3,5,7" BorderBrush="Red" CornerRadius="10" Width="120" Margin="5">
<TextBlock Text="紅色Border" ToolTipService.ToolTip="紅色Border" TextAlignment="Center" />
</Border>

<!--
Border.BorderBrush - 繼承自 System.Windows.Media.Brush 的對象
-->
<Border BorderThickness="3" CornerRadius="10" Width="120" Margin="5">
<TextBlock Text="紅色Border" ToolTipService.ToolTip="紅色Border" TextAlignment="Center" />
<Border.BorderBrush>
<ImageBrush ImageSource="http://silverlight.net/Themes/silverlight/images/logo.jpg" />
</Border.BorderBrush>
</Border>

</StackPanel>
</UserControl>