wpf - 使用拆分器调整大小时如何允许 wpf 控件填充其网格单元格但也具有默认宽度

Question

我有一种情况，我在选项卡中有 2 列。第二列可以隐藏。用图片更好地解释问题：

没有显示第二列的初始选项卡应该如下所示，所以它是正确的：

并且频道选项卡也应该看起来像这样，这也是正确的：

但是当我使用网格拆分器调整第二列的大小时，列表框保持固定宽度而不是拉伸。我希望它伸展：

现在，在调整第二个选项卡列表框的大小后，第一个选项卡有一个不需要的空白区域：

代码 ：

<TabControl x:Name="tcTabs" ItemsSource="{Binding Rooms, UpdateSourceTrigger=PropertyChanged}" Margin="5" BorderThickness="1" IsSynchronizedWithCurrentItem="True">
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Header" Value="{Binding Name}" />
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="22"/>
                            </Grid.RowDefinitions>

                            <ListBox ItemsSource="{Binding Messages}" DisplayMemberPath="Raw" Grid.Row="0" Grid.Column="0" BorderThickness="0" />
                            <GridSplitter ResizeDirection="Columns" VerticalAlignment="Stretch" Width="3" />
                            <ListBox ItemsSource="{Binding Users}" DisplayMemberPath="Nick" Visibility="{Binding Type, Converter={StaticResource UserListVisibilityConverter}}" Grid.Row="0" Grid.Column="1" BorderThickness="1,0,0,0" BorderBrush="#FFBBBBBB" Width="130" />
                            <TextBox Grid.Row="1" Grid.ColumnSpan="2" BorderThickness="0,1,0,0" BorderBrush="#FFBBBBBB" Height="22" />
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>

我该如何解决这个问题？

Answer 1

首先，我会将 GridSplitter 放在它自己的列中。其次，确保您的最后一列也具有成比例的大小。第三，不要在最右边设置固定宽度ListBox。如果您希望它具有最小宽度，请设置MinWidth. 所以你的 XAML 看起来像：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="22"/>
</Grid.RowDefinitions>

<ListBox ItemsSource="{Binding Messages}" DisplayMemberPath="Raw" Grid.Row="0" Grid.Column="0" BorderThickness="0" />
<GridSplitter Grid.Column="1" ResizeDirection="Columns" VerticalAlignment="Stretch" Width="3" />
<ListBox ItemsSource="{Binding Users}" DisplayMemberPath="Nick" Visibility="{Binding Type, Converter={StaticResource UserListVisibilityConverter}}" Grid.Row="0" Grid.Column="2" BorderThickness="1,0,0,0" BorderBrush="#FFBBBBBB" MinWidth="130" />
<TextBox Grid.Row="1" Grid.ColumnSpan="3" BorderThickness="0,1,0,0" BorderBrush="#FFBBBBBB" Height="22" />