WPF Grid 根据内容自适应

WPF Grid 根据内容自适应, 为了能让 Grid 的行和列根据内容自动适应可以通过设置来实现:

Grid 表格布局,默认是平均分配,为了便于观察,通过设置 ShowGridLine 显示分界线如下:

<Grid Margin="100" ShowGridLines="True">
      <Grid.RowDefinitions>
           <RowDefinition/>
           <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
           <ColumnDefinition/>
           <ColumnDefinition/>
      </Grid.ColumnDefinitions>
 </Grid>

行 Row 可以设置行高 Height;
列 Column 可以设置列宽 Width;

Grid 中 RowDefinition 的 Height 和 ColumnDefinition 的 Width 可以通过以下几种方式来设置:

  1. 使用具体数值,固定不变;
    设置第一行行高为 40,效果如下,第一行的高度就固定为 40 不变了。
    除非界面的内容固定不变,一般不建议直接使用具体数值。
 <RowDefinition Height="40"/>

 2. 按比例划分,使用 * 星号,
分配的规则是,把所有的数字相加作为分母,每一个单独的数字作为分子,算出比例,如: 2*,5*,8*; 分母为(2+5+8=15),分子则是(2/15、5/15、8/15):

<Grid.RowDefinitions>
     <RowDefinition Height="3*"/>
     <RowDefinition Height="5*"/>
</Grid.RowDefinitions>

此时只是比例固定不变,如果界面尺寸变化,对应的内容部分就会变大。

  3. 设置为 Auto,根据内容自适应;
只有行设置为 Auto,设置为 Auto 的行高为当前行内容最高的高度,剩下没有设置 Auto 的平均分配剩余的高度,如下:

 <Grid.RowDefinitions>
     <RowDefinition/>
     <RowDefinition/>
     <RowDefinition/>
</Grid.RowDefinitions>
<Grid Margin="100" ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Background="Aqua" TextWrapping="Wrap" Text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"/>
            <TextBlock Grid.Row="0" Grid.Column="1" Background="Chartreuse" TextWrapping="Wrap"  Text="BBBBBBBBBBBBBBB"/>
            <TextBlock Grid.Row="1" Grid.Column="0" Background="Coral"  TextWrapping="Wrap"  Text="CCCCCCCCCCCCCCCCCCCC"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Background="DodgerBlue"  TextWrapping="Wrap"  Text="DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD"/>
            <TextBlock Grid.Row="2" Grid.Column="0" Background="Thistle"  TextWrapping="Wrap"  Text="EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE"/>
            <TextBlock Grid.Row="2" Grid.Column="1" Background="OliveDrab"  TextWrapping="Wrap"  Text="FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF"/>
        </Grid>

默认的平均分配

第一行设置 Height = “Auto” 后,如下:

第一行已自适应,第二行和第三行平均分剩下的高度

4. 通过 MinHeight、MaxHeight 和 MinWidth、MaxWidth 来协调,指定自适应的范围

<Grid.RowDefinitions>
                <RowDefinition MinHeight="50" MaxHeight="100"/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>

使用 Grid 进行布局,还有一个好处,如果界面允许调整大小,而且 Grid 的行高和列宽没有设置固定数值,Grid 的内容会自适应。

参考:

WPF中Grid的行的Height和列的Width根据内容自适应

推荐阅读:

WPF 使用日期选择器控件 DatePicker