wpf之Grid控件 - 技术栈

前言

Grid是wpf中的容器控件，可将窗体分割为多行多列，每个单元格可以放置控件，在wpf中得到非常频繁的应用。

1、1行1列

默认填充满整个窗体

csharp 复制代码

<Window x:Class="wpf之Grid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之Grid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Background="Green" >
    <Grid Background="Blue"   Margin=" 10" >
    </Grid >
</Window>

2、1行多列

2.1 列宽度的设置

通过Grid.ColumnDefinitions来定义Grid有多少列，每一个ColumnDefinition都代表了一列，通过Width设置列的宽度。Width="20" 代表使用绝对值宽度20，Width="2*"代表使用剩下宽度的比例，具体计算方式为把前的数字加起来作为分母，比如本文中就是2+1+1+1=5（*前面没写数字就是代表1*，不设置宽度也代表1*），所在列前面的数字作为分子，比如本文的第2列就是2/5，最终再乘以剩余没有被使用的宽度，相当于第2列占了剩余宽度的2份，3、4、5列各占了1份。

csharp 复制代码

<Window x:Class="wpf之Grid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之Grid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Background="Green" >
    <Grid Background="Blue"   Margin=" 10" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column=" 0" Text="列1" Foreground="Red" Background="Yellow"/>
        <TextBlock Grid.Column=" 1" Text="列2" Foreground="Red"  Background="White"/>
        <TextBlock Grid.Column=" 1" Text="列2" Foreground="Red"  Background="White"/>
        <TextBlock Grid.Column=" 2" Text="列3" Foreground="Red" Background="Yellow"/>
        <TextBlock Grid.Column=" 3" Text="列4" Foreground="Red" Background="White" />
        <TextBlock Grid.Column=" 4" Text="列5" Foreground="Red" Background="Yellow"/>
    </Grid >
</Window>

2.2 在每个列中添加控件

通过Grid.Column=" 0" 来指定控件占据哪一列，0代表占用第一列（索引从0开始）。

3、1列多行

3.1 行高度的设置

通过Grid.RowDefinitions来定义Grid有多少行，每一个RowDefinition都代表了一行，通过Height设置列的高度。Height="20" 代表使用绝对值高度20，Height="2*"代表使用剩下高度的比例，具体计算方式为把前的数字加起来作为分母，比如本文中就是2+1+1+1=5（*前面没写数字就是代表1*，不设置宽度也代表1*），所在列前面的数字作为分子，比如本文的第2列就是2/5，最终再乘以剩余没有被使用的高度，相当于第2行占了剩余高度的2份，3、4、5行各占了1份。

csharp 复制代码

<Window x:Class="wpf之Grid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之Grid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Background="Green" >
    <Grid Background="Blue"   Margin=" 10" >
        <Grid.RowDefinitions  >
            <RowDefinition  Height ="20" />
            <RowDefinition Height="2*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="*"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row =" 0" Text="行1" Foreground="Red" Background="Yellow"/>
        <TextBlock Grid.Row=" 1" Text="行2" Foreground="Red"  Background="White"/>
        <TextBlock Grid.Row=" 1" Text="行2" Foreground="Red"  Background="White"/>
        <TextBlock Grid.Row=" 2" Text="行3" Foreground="Red" Background="Yellow"/>
        <TextBlock Grid.Row=" 3" Text="行4" Foreground="Red" Background="White" />
        <TextBlock Grid.Row=" 4" Text="行5" Foreground="Red" Background="Yellow"/>
    </Grid >
</Window>

3.2 在每个行中添加控件

通过Grid.Row==" 0" 来指定控件占据哪一行，0代表占用第一行（索引从0开始）。

4、多行多列

下面的代码中同时通过Grid.RowDefinitions 设置多行、Grid.ColumnDefinitions 设置多列，然后再通过给子控件TextBlock的 Grid.Row选择控件应该放置在哪一行，Grid.Column选择控件应该放置在哪一列。比如行2列2它的Grid.Row和Grid.Column都是1（索引从0开始）。

csharp 复制代码

<Window x:Class="wpf之Grid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:wpf之Grid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Background="Green" >
    <Grid Background="Blue"   Margin=" 10" >
        <Grid.RowDefinitions  >
            <RowDefinition  Height ="20" />
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions   >
            <ColumnDefinition Width  ="200" />
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row =" 0" Grid.Column="0"  Text="行1列1" Foreground="Red" Background="Yellow"/>
        <TextBlock Grid.Row=" 1" Grid.Column="0"  Text="行2列1" Foreground="Red"  Background="White"/>
        <TextBlock Grid.Row=" 0" Grid.Column="1"  Text="行1列2" Foreground="Red"  Background="White"/>
        <TextBlock Grid.Row=" 1" Grid.Column="1"  Text="行2列2" Foreground="Red" Background="Yellow"/>
    </Grid >
</Window>

马工撰写的年入30万+C#上位机项目实战必备教程（点击下方链接即可访问文章目录）

1、《C#串口通信从入门到精通》

2、《C#与PLC通信从入门到精通》

3、《C# Modbus通信从入门到精通》

4、《C#Socket通信从入门到精通》

5、《C# MES通信从入门到精通》

6、《winform控件从入门到精通》

7、《C#操作MySql数据库从入门到精通》