WP7 WP8 Windows8 教程 公共基础篇 二 布局

布局

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>

 

你可能感兴趣的:(windows)