[Win8]Windows8开发笔记（二）：三种基础的布局控件

最新推荐文章于 2023-01-28 15:01:59 发布

iteye_19603

最新推荐文章于 2023-01-28 15:01:59 发布

阅读量130

点赞数

文章标签：操作系统

布局控件对于用户体验来说至关重要，下面就来体验一下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，这里的意思就是应用启动时候显示的页面。

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