Grid

最新推荐文章于 2022-11-27 16:58:34 发布

zhruifei

最新推荐文章于 2022-11-27 16:58:34 发布

阅读量395

点赞数

分类专栏： WPF

WPF 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

原文链接：http://www.cnblogs.com/Jennifer/articles/1988103.html

<Grid Background="LightBlue" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

    <!-- Define four rows: -->
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <!-- Define two columns: -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- Arrange the children: -->
    <Label    Grid.Row="0" Grid.Column="0" Background="Blue" Foreground="White"
        HorizontalContentAlignment="Center">Start Page</Label>
    <GroupBox Grid.Row="1" Grid.Column="0" Background="White"
        Header="Recent Projects">...</GroupBox>
    <GroupBox Grid.Row="2" Grid.Column="0" Background="White"
        Header="Getting Started">...</GroupBox>
    <GroupBox Grid.Row="3" Grid.Column="0" Background="White"
        Header="Headlines">...</GroupBox>
    <GroupBox Grid.Row="1" Grid.Column="1" Background="White"
        Header="Online Articles">
        <ListBox>
            <ListBoxItem>Article #1</ListBoxItem>
            <ListBoxItem>Article #2</ListBoxItem>
            <ListBoxItem>Article #3</ListBoxItem>
            <ListBoxItem>Article #4</ListBoxItem>
        </ListBox>
    </GroupBox>
</Grid>

效果如下图：

要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和ColumnDefinitions元素，从而定义行数和列数。可以在Grid中使用Row和Column附加属性定位子元素，它们都是以0为基准的整型值。如果没有显式设置任何行或列，Grid将会隐式地加入一个单元格。而如果没有在子元素上显式地设置Grid.Row或者Grid.Column，它们的值将为0.
Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。与Canvas医院，同一个单元格中的子元素不会与其他元素交互布局，信息——它们仅仅是重叠而已。从上图中看到的在线文章列表太小了，可以使用Grid的两个附加属性来解决这个问题，它们是RowSpan和ColumnSpan。属性默认设置为1，且可以被设置为任何比1大的数字，这样可以让元素跨多行或多列。

通过设置某个RowDefinition的Height和某个ColumnDefinition的Width为字符串Auto（区分大小写），就可以实现自动尺寸监控。

<Grid Background="LightBlue" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

    <!-- Define four rows: -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <!-- Define two columns: -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- Arrange the children: -->
    <Label    Grid.Row="0" Grid.Column="0" Background="Blue" Foreground="White"
        HorizontalContentAlignment="Center"
        Grid.ColumnSpan="2">Start Page</Label>
    <GroupBox Grid.Row="1" Grid.Column="0" Background="White"
        Header="Recent Projects">...</GroupBox>
    <GroupBox Grid.Row="2" Grid.Column="0" Background="White"
        Header="Getting Started">...</GroupBox>
    <GroupBox Grid.Row="3" Grid.Column="0" Background="White"
        Header="Headlines">...</GroupBox>
    <GroupBox Grid.Row="1" Grid.Column="1" Background="White"
        Header="Online Articles" Grid.RowSpan="3">
        <ListBox>
            <ListBoxItem>Article #1</ListBoxItem>
            <ListBoxItem>Article #2</ListBoxItem>
            <ListBoxItem>Article #3</ListBoxItem>
            <ListBoxItem>Article #4</ListBoxItem>
        </ListBox>
    </GroupBox>
</Grid>

效果如下图：

注释：行合并：从上往下合并。

列合并：从左往右合并。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Border Background="Red" Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="2" Grid.RowSpan="2"></Border>
</Grid>

效果如下图：