[Win8]Windows8开发札记(二):三种基础的布局控件

[Win8]Windows8开发笔记(二):三种基础的布局控件

布局控件对于用户体验来说至关重要,下面就来体验一下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>

这样便是一个简单的格子布局,效果如图所示:

[Win8]Windows8开发札记(二):三种基础的布局控件


这样只是简单的创建了格子布局,为了让效果更明显一点,我们把每个格子都填充上颜色,完整代码如下:

<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>
效果图如下:
[Win8]Windows8开发札记(二):三种基础的布局控件



二: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>

效果图:

[Win8]Windows8开发札记(二):三种基础的布局控件


三、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,这里的意思就是应用启动时候显示的页面。

运行一下,便可以看到风骚的效果了。