wpf grid 的用法

WPF中的Grid是一种布局控件,可用于将子控件按照行和列的方式排列。

以下是Grid控件的用法:

  1. 在XAML文件中,添加一个Grid控件:
xml 复制代码
<Grid>
</Grid>
  1. 在Grid控件中,添加行和列定义:
xml 复制代码
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
</Grid>

在上面的例子中,Grid定义了两行和两列。行和列可以使用特定的值来定义大小,如"Auto"表示根据内容自动调整大小,"*"表示占用剩余空间的大小。

  1. 将子控件添加到Grid中,并设置其位置:
xml 复制代码
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <Button Grid.Row="0" Grid.Column="0" Content="Button 1"/>
    <Button Grid.Row="0" Grid.Column="1" Content="Button 2"/>
    <Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Content="Button 3"/>
</Grid>

在上面的例子中,三个Button控件被添加到Grid中,并通过Grid.Row和Grid.Column属性来设置它们的位置。Grid.ColumnSpan属性可以指定控件跨越的列数。

通过Grid控件,可以很灵活地布局子控件,使其按照行和列的方式排列,以实现更复杂的布局效果。

1、功能最强大,布局最灵活的容器,将区域划分不同大小网格

2、主要属性配置:

基本属性:

行定义:RowDefinitions->RowDefinition(Height:*/auto/数字)

列定义:ColumnDefinitions->ColumnDefinition(Width:*/auto/数字)

尺寸共享:Grid.IsSharedSizeScope="True"配合行/列中的SharedSizeGroup属性

附加属性:Grid.Row/Grid.Column3

使用场景:无处不在c0

下面是我写的一段代码

cs 复制代码
<Window x:Class="kongjian.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:kongjian"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100">
            </RowDefinition>
            <RowDefinition>
            </RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Background="red">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Border Background="Green" Width="20" Height="10" Grid.Column="2" Grid.RowSpan="2"/>
            <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="20" Background="red"/>
        </Grid>
        <Grid Grid.Row="1" Background="Green">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

        </Grid>
    </Grid>
</Window>

界面如下:

相关推荐
狮歌~资深攻城狮16 小时前
未来已来:HBase的新功能与发展趋势展望
大数据·wpf·hbase
界面开发小八哥1 天前
界面控件DevExpress WPF v24.2新版亮点:支持.NET 9
.net·wpf·界面控件·devexpress·ui开发·用户界面
九鼎科技-Leo2 天前
WPF快速创建DeepSeek本地自己的客户端-基础思路版本
wpf
MasterNeverDown3 天前
WPF 中为 Grid 设置背景图片全解析
大数据·hadoop·wpf
苏克贝塔3 天前
WPF8-常用控件
wpf
积跬步---行千里4 天前
记录一次WPF程序进程挂起问题
mongodb·wpf
蒋劲豪4 天前
WPF的Prism框架的使用
wpf·prism
de之梦-御风4 天前
【流程图】在 .NET (WPF 或 WinForms) 中实现流程图中的连线算法
.net·wpf·流程图
界面开发小八哥5 天前
DevExpress WPF中文教程:Grid - 如何创建未绑定列?
wpf·界面控件·devexpress·ui开发·.net9
Maybe_ch5 天前
WPF-数据转换器
开发语言·c#·.net·wpf