[Win8]Windows8开发札记(二):三种基础的布局控件
[Win8]Windows8开发笔记(二):三种基础的布局控件
这样便是一个简单的格子布局,效果如图所示:
效果图:
此时可以看到一排按钮齐刷刷的排在那里,那么接下来为这个按钮添加监听,监听代码如下:
打开App.xaml.cs,找到下面这几句代码,把typeof括号里的MainPage改成StackPanelLayout,这里的意思就是应用启动时候显示的页面。
布局控件对于用户体验来说至关重要,下面就来体验一下Windows8的应用商店项目开发中的几种常用布局吧。
新建一个项目叫做LayoutTest来做测试。
一:Grid网格布局控件
作用:定义由行和列组成的网格区域。新建一个空白xaml页面,命名为:GridLayout.xaml。
里面写上如下代码:
<Page x:Class="LayoutTest.GridLayout" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:LayoutTest" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <!--Grid表格布局 Grid.RowDefinitions:定义Grid中的行 Grid.ColumnDefinitions :定义Grid的列 创建一个四行五列的表格布局 --> <Grid HorizontalAlignment="Center" Height="210" VerticalAlignment="Center" Width="305"> <Grid.RowDefinitions> <!--定义四行及每行高度,*表示所占的比例--> <RowDefinition Height="1*"/> <RowDefinition Height="2*"/> <RowDefinition Height="3*"/> <RowDefinition Height="4*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <!--定义五列及每列宽度,*表示所占的比例--> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="2*"/> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="4*"/> <ColumnDefinition Width="5*"/> </Grid.ColumnDefinitions> </Grid> </Page>
这样便是一个简单的格子布局,效果如图所示:
这样只是简单的创建了格子布局,为了让效果更明显一点,我们把每个格子都填充上颜色,完整代码如下:
<Page x:Class="LayoutTest.GridLayout" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:LayoutTest" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <!--Grid表格布局 Grid.RowDefinitions:定义Grid中的行 Grid.ColumnDefinitions :定义Grid的列 创建一个四行五列的表格布局 --> <Grid HorizontalAlignment="Center" Height="210" VerticalAlignment="Center" Width="305"> <Grid.RowDefinitions> <!--定义四行及每行高度,*表示所占的比例--> <RowDefinition Height="1*"/> <RowDefinition Height="2*"/> <RowDefinition Height="3*"/> <RowDefinition Height="4*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <!--定义五列及每列宽度,*表示所占的比例--> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="2*"/> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="4*"/> <ColumnDefinition Width="5*"/> </Grid.ColumnDefinitions> <!--第一行的五列--> <Rectangle Fill="#000000" Grid.Row="0" Grid.Column="0" /> <Rectangle Fill="#444444" Grid.Row="0" Grid.Column="1" /> <Rectangle Fill="#888888" Grid.Row="0" Grid.Column="2" /> <Rectangle Fill="#bbbbbb" Grid.Row="0" Grid.Column="3" /> <Rectangle Fill="#ffffff" Grid.Row="0" Grid.Column="4" /> <!--第二行的五列--> <Rectangle Fill="#000000" Grid.Row="1" Grid.Column="0" /> <Rectangle Fill="#000044" Grid.Row="1" Grid.Column="1" /> <Rectangle Fill="#000088" Grid.Row="1" Grid.Column="2" /> <Rectangle Fill="#0000bb" Grid.Row="1" Grid.Column="3" /> <Rectangle Fill="#0000ff" Grid.Row="1" Grid.Column="4" /> <!--第三行的五列--> <Rectangle Fill="#000000" Grid.Row="2" Grid.Column="0" /> <Rectangle Fill="#004400" Grid.Row="2" Grid.Column="1" /> <Rectangle Fill="#008800" Grid.Row="2" Grid.Column="2" /> <Rectangle Fill="#00bb00" Grid.Row="2" Grid.Column="3" /> <Rectangle Fill="#00ff00" Grid.Row="2" Grid.Column="4" /> <!--第四行的五列--> <Rectangle Fill="#000000" Grid.Row="3" Grid.Column="0" /> <Rectangle Fill="#440000" Grid.Row="3" Grid.Column="1" /> <Rectangle Fill="#880000" Grid.Row="3" Grid.Column="2" /> <Rectangle Fill="#bb0000" Grid.Row="3" Grid.Column="3" /> <Rectangle Fill="#ff0000" Grid.Row="3" Grid.Column="4" /> </Grid> </Page>效果图如下:
二:Canvas画布布局
作用:定义一个区域可以使用相对于该区域的坐标直接定位子元素。
给工程添加一个新的空白xaml文件,叫做CanvasLayout.xaml。
完整的代码如下:
<Page x:Class="LayoutTest.CanvasLayout" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:LayoutTest" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid> <Canvas HorizontalAlignment="Center" Height="600" Margin="0" VerticalAlignment="Center" Width="800" Background="Blue"> <!--Canvas里子元素通过调整Canvas区域的绝对位置来定位 Canvas.Left – 以左上角为原点,Canvas X轴的距离 Canvas.Top – 以左上角为原点,Canvas Y轴的距离 --> <Ellipse Fill="Red" Height="51" Canvas.Left="400" Stroke="White" Canvas.Top="52" Width="53"/> <Rectangle Fill="Green" Height="56" Canvas.Left="415" Stroke="Black" Canvas.Top="105" Width="20"/> </Canvas> </Grid> </Page>
效果图:
三、StackPanel排列布局控件
作用:将子元素排列成一行(可沿水平或垂直方向)
再添加一个空白页,命名为“StackPanelLayout.xaml”,然后把原来的Grid标签删除,在Page标签内添加如下代码:
<Page x:Class="LayoutTest.StackPanelLayout" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:LayoutTest" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <StackPanel Background="Black"> <StackPanel Orientation="Horizontal" x:Name="stackpanel"> <Button>Test</Button> <Button>Test</Button> <Button>Test</Button> <Button>Test</Button> <Button>Test</Button> <Button>Test</Button> <Button>Test</Button> <Button>Test</Button> <Button>Test</Button> <Button>Test</Button> <Button>Test</Button> </StackPanel> <Button Width="111" Height="111">变换方向</Button> </StackPanel> </Page>
此时可以看到一排按钮齐刷刷的排在那里,那么接下来为这个按钮添加监听,监听代码如下:
private void Change(object sender, RoutedEventArgs e) { ///更改Stackpanel控件的内部排列方式 if (stackpanel.Orientation == Orientation.Horizontal) { stackpanel.Orientation = Orientation.Vertical; } else { stackpanel.Orientation = Orientation.Horizontal; } }
打开App.xaml.cs,找到下面这几句代码,把typeof括号里的MainPage改成StackPanelLayout,这里的意思就是应用启动时候显示的页面。
运行一下,便可以看到风骚的效果了。