C#学习记录8——XAML

XAML:Extensible Application Markup Language，即可拓展应用程序标记语言

无论是在wp，wpf还是wf中，都可以用XAML来编辑页面的效果，非常简便

使用XAML时，既可以推拽控件到目的位置，也可以手敲代码实现控件的布局。当然，如果熟悉了还是代码方便些···

设计xaml非常的有趣，建议通过视频教程学习，边看边做，加强理解。

下面我把我在看视频教程中使用的几个非常简单的例子介绍一下。

下面的例子使用了grid，rectangle控件，并使用alignment和margin来分配布局

<Page
    x:Class="AlignmentAndMargins.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AlignmentAndMargins"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <!--上面的代码定义了一些默认命名空间，以及设计的参数-->
    <Grid>
        <!--方形控件 fill填充色 height高度 width宽度 -->
        <!--HorizontalAlignment表示水平方向向左对齐-->
        <!--VerticalAlignment表示竖直方向向上对齐-->
        
        <!--蓝色方块位于左上角-->
        <Rectangle Fill="Blue" 
                   Height="100" 
                   Width="100" 
                   HorizontalAlignment="Left" 
                   VerticalAlignment="Top" />
        <!--红色方块位于右下角-->
        <Rectangle Fill="Red"
                   Height="100"
                   Width="100"
                   HorizontalAlignment="Right"
                   VerticalAlignment="Bottom" />
        <!--绿色方块位于正中间-->
        <Rectangle Fill="Green"
                   Height="100"
                   Width="100"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
        <!--Margin属性声明了控件四周与其他控件的距离 顺序为：左，上，右，下-->
        
        <!--黄色方块向左上方对齐，与左侧距离100，与上方距离100-->
        <Rectangle Fill="Yellow"
                   Height="100"
                   Width="100"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Margin="100,100"/>
        <!--白色方块向左下方对齐，与左侧距离50，与下方距离50-->
        <Rectangle Fill="White"
                   Height="100"
                   Width="100"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Bottom"
                   Margin="50,0,0,50"/>

    </Grid>
</Page>

说明一下，Grid控件成为网格布局，类似HTML里面的Table标签，通过定义表格，然后设置表格里面的行和列，进行布局。

第一个例子并没有真正显示Grid的作用，下面通过第二个例子来看看行（row）和列（column）的定义

2.

<Page
    x:Class="GridsRowsAndColumns.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridsRowsAndColumns"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
    <!--Resources里面定义了一些在整个页面里都可用的一些模式-->
    <Page.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="FontSize" Value="42" />
        </Style>
    </Page.Resources>

    <Grid>
        <!--Grid.RowDefinitions 定义了grid里面的行-->
        <!--*代表剩余部分，如果前面还有数字，则按照比例进行分配,例如下面各行分别占1/6，2/6，3/6-->
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="3*" />
        </Grid.RowDefinitions>
        <!--Grid.ColumnDefinitions 定义了grid里面的列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!--TextBlock文本块控件，用于显示少量文字-->
        <TextBlock>1</TextBlock>
        <TextBlock Grid.Column="1">2</TextBlock>
        <TextBlock Grid.Column="2">3</TextBlock>

        <TextBlock Grid.Row="1">4</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="1">5</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="2">6</TextBlock>

        <TextBlock Grid.Row="2">7</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="1">8</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="2">9</TextBlock>

    </Grid>
</Page>

grid网格布局，只是xaml提供的众多布局中的一种，其他的还有

StackPanel:堆放布局，将子元素排列成一行或一列

Canvas:绝对布局，通过指定子元素相对父元素的准确位置，来布局子元素。类似于javafx里面的anchorpane

ect.

3.StackPanel:

<Page
    x:Class="StackPanelExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StackPanelExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <!--Orientation表示stackpanel的方向-->
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
            <Rectangle Width="200" Height="200" Fill="Red" />
            
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="100" Height="100" Fill="White" />
                    <StackPanel Orientation="Vertical">
                        <Rectangle Width="100" Height="50" Fill="Green" />
                        <Rectangle Width="100" Height="50" Fill="Blue" />
                    </StackPanel>
                </StackPanel>
                
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="100" Height="100" Fill="Yellow" />
                    <StackPanel Orientation="Vertical">
                        <Rectangle Width="100" Height="50" Fill="Black" />
                        <Rectangle Width="100" Height="50" Fill="Pink" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>

最后，要提醒一点。如果习惯使用绝对布局，使用margin，或是直接拖拽的朋友要注意，如果在屏幕大小不同的设备上显示你的布局，可能会有问题。

所以，在设计页面布局时，最好使用*这样自动分配大小的属性，或是用ScrollViewer滚动视图控件来实现。