在 WPF 中使用 dataGrid 调整大小的网格

Question

我在调整应用程序窗口大小时遇到​​问题。我有两个 DataGrid，每个都放置在自己的 Grid 列中，另一列位于包含 GridSplitter 的 Grid 中间以调整 DataGrid 的大小。

通过从这个状态减小窗口宽度，我需要得到这个：

这样每个列和窗口都会达到 MinWidth。 但是我得到了这个（左列不在其最小宽度）：

我注意到 DataGrid 中的列停止/减慢了网格列的收缩，导致窗口以最小尺寸切割第二部分。当另一列更宽时，另一列也会发生同样的情况。

这是我的 XAML 文件：

<Window x:Class="DC_SB.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Application" Height="350" Width="525" MinWidth="430" MinHeight="150" Background="WhiteSmoke">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Menu Grid.Row="0" Background="#FFE0E0E0">
        <MenuItem Header="Settings">
            <MenuItem Header="Key bindings" Click="keyBindings" />
            <MenuItem Header="Color settings" Click="colorSettings" />
        </MenuItem>
        <MenuItem Header="View">
            <MenuItem x:Name="ViewCounters" Header="Counters" IsCheckable="True" IsChecked="True" Click="OnMouseDownView" />
            <MenuItem x:Name="ViewSounds" Header="Sounds" IsCheckable="True" IsChecked="True" Click="OnMouseDownView" />
        </MenuItem>
        <MenuItem Header="Enable">
            <MenuItem x:Name="EnableCounters" Header="Counters" IsCheckable="True" IsChecked="True" Click="OnMouseDownEnable" />
            <MenuItem x:Name="EnableSounds" Header="Sounds" IsCheckable="True" IsChecked="True" Click="OnMouseDownEnable" />
        </MenuItem>
    </Menu>

    <Grid Grid.Row="1" x:Name="Grid" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="205" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" MinWidth="205" />
        </Grid.ColumnDefinitions>

        <GridSplitter Margin="0,25,0,10" Grid.Column="1" ResizeBehavior="PreviousAndNext" Width="3" />

        <Grid x:Name="CountersGrid" Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Label Grid.Row="0" Content="Counters" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0" />

            <DataGrid x:Name="CountersList" Grid.Row="1" HorizontalAlignment="Stretch" Margin="10,0,10,10" AutoGenerateColumns="False" VerticalAlignment="Stretch" 
                      CanUserResizeColumns="True" CanUserReorderColumns="False" CanUserSortColumns="False" SelectionMode="Single" CanUserDeleteRows="False" 
                      CanUserAddRows="False" CanUserResizeRows="False" SelectionUnit="FullRow" MouseDoubleClick="OnDoubleClick" HeadersVisibility="Column" >
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Name" IsReadOnly="True" Binding="{Binding Path=Name}" />
                    <DataGridTextColumn Header="Path" IsReadOnly="True" Binding="{Binding Path=Path}" />
                    <DataGridTextColumn Header="Count" IsReadOnly="True" Binding="{Binding Path=CountKey}" />
                </DataGrid.Columns>
                <DataGrid.Resources>
                    <Style TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="Foreground" Value="Black" />
                    </Style>
                </DataGrid.Resources>
            </DataGrid>

            <Button Grid.Row="2" Content="Add" HorizontalAlignment="Left" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="60" Click="addCounter" />
            <Button Grid.Row="2" Content="Remove" HorizontalAlignment="Left" Margin="75,0,0,10" VerticalAlignment="Bottom" Width="60" Click="removeCounter" />
            <Button Grid.Row="2" Content="-" HorizontalAlignment="Right" Margin="0,0,40,10" VerticalAlignment="Bottom" Width="25" Click="decrement" />
            <Button Grid.Row="2" Content="+" HorizontalAlignment="Right" Margin="0,0,10,10" VerticalAlignment="Bottom" Width="25" Click="increment" />
        </Grid>

        <Grid x:Name="SoundsGrid"  Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Label Grid.Row="0" Content="Sounds" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0" />
            <Image Grid.Row="0" HorizontalAlignment="Right" Margin="0,8,110,0"  VerticalAlignment="Top" Height="10" Width="10" >
                <Image.Source>
                    <BitmapImage UriSource="volume.png" />
                </Image.Source>
            </Image>
            <Slider x:Name="Slider" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,10,5" Width="100" Maximum="100" Minimum="0" 
                    AutoToolTipPlacement="BottomRight" IsMoveToPointEnabled="True" ValueChanged="volume" >
                <Slider.LayoutTransform>
                    <ScaleTransform ScaleY="0.75" CenterX="15" CenterY="15"/>
                </Slider.LayoutTransform>
            </Slider>

            <DataGrid x:Name="SoundsList" Grid.Row="1" HorizontalAlignment="Stretch" Margin="10,0,10,10" AutoGenerateColumns="False" VerticalAlignment="Stretch" 
                      CanUserResizeColumns="True" CanUserReorderColumns="False" CanUserSortColumns="False" SelectionMode="Single" CanUserDeleteRows="False" 
                      CanUserAddRows="False" CanUserResizeRows="False" SelectionUnit="FullRow" MouseDoubleClick="OnDoubleClick" HeadersVisibility="Column" >
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Name" IsReadOnly="True" Binding="{Binding Path=Name}" />
                    <DataGridTextColumn Header="Path" IsReadOnly="True" Binding="{Binding Path=Path}" />
                    <DataGridTextColumn Header="Key" IsReadOnly="True" Binding="{Binding Path=CountKey}" />
                </DataGrid.Columns>
                <DataGrid.Resources>
                    <Style TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="Foreground" Value="Black" />
                    </Style>
                </DataGrid.Resources>
            </DataGrid>

            <Button Grid.Row="2" Content="Add" HorizontalAlignment="Left" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="60" Click="addSound" />
            <Button Grid.Row="2" Content="Remove" HorizontalAlignment="Left" Margin="75,0,0,10" VerticalAlignment="Bottom" Width="60" Click="removeSound" />
            <Button Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,40,10" VerticalAlignment="Bottom" Width="25" Height="22" Click="play" >
                    <Image Source="play.png" Width="8" Height="8" />
            </Button>
            <Button Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,10,10" VerticalAlignment="Bottom" Width="25" Height="22" Click="stop" >
                <Image Source="stop.png" Width="8" Height="8" />
            </Button>
        </Grid>
    </Grid>
</Grid>

我需要做的是使 DataGrid 不会影响调整网格列的大小。 感谢您的帮助

Answer 1

以下是您的代码以及我的更改。我已删除 MinWidth 值并解决了该问题。两个面板保持相等。如果您想为整个面板设置最小尺寸，这将有效地为网格中的每一列创建最小宽度。不过看起来你已经有了：

<Window x:Class="WPFTestApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:Collections="clr-namespace:System.Collections;assembly=mscorlib"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:l="clr-namespace:WPFTestApp"
    Title="MainWindow" Height="350" Width="525" MinWidth ="430">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Menu Grid.Row="0" Background="#FFE0E0E0">
        <MenuItem Header="Settings">
            <MenuItem Header="Key bindings" Click="keyBindings" />
            <MenuItem Header="Color settings" Click="colorSettings" />
        </MenuItem>
        <MenuItem Header="View">
            <MenuItem x:Name="ViewCounters" Header="Counters" IsCheckable="True" IsChecked="True" Click="OnMouseDownView" />
            <MenuItem x:Name="ViewSounds" Header="Sounds" IsCheckable="True" IsChecked="True" Click="OnMouseDownView" />
        </MenuItem>
        <MenuItem Header="Enable">
            <MenuItem x:Name="EnableCounters" Header="Counters" IsCheckable="True" IsChecked="True" Click="OnMouseDownEnable" />
            <MenuItem x:Name="EnableSounds" Header="Sounds" IsCheckable="True" IsChecked="True" Click="OnMouseDownEnable" />
        </MenuItem>
    </Menu>

    <Grid Grid.Row="1" x:Name="Grid" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="0" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" MinWidth="0" />
        </Grid.ColumnDefinitions>

        <GridSplitter Margin="0,25,0,10" Grid.Column="1" ResizeBehavior="PreviousAndNext" Width="3" />

        <Grid x:Name="CountersGrid" Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Label Grid.Row="0" Content="Counters" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0" />

            <DataGrid x:Name="CountersList" Grid.Row="1" HorizontalAlignment="Stretch" Margin="10,0,10,10" AutoGenerateColumns="False" VerticalAlignment="Stretch" 
                  CanUserResizeColumns="True" CanUserReorderColumns="False" CanUserSortColumns="False" SelectionMode="Single" CanUserDeleteRows="False" 
                  CanUserAddRows="False" CanUserResizeRows="False" SelectionUnit="FullRow" MouseDoubleClick="OnDoubleClick" HeadersVisibility="Column" >
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Name" IsReadOnly="True" Binding="{Binding Path=Name}" />
                    <DataGridTextColumn Header="Path" IsReadOnly="True" Binding="{Binding Path=Path}" />
                    <DataGridTextColumn Header="Count" IsReadOnly="True" Binding="{Binding Path=CountKey}" />
                </DataGrid.Columns>
                <DataGrid.Resources>
                    <Style TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="Foreground" Value="Black" />
                    </Style>
                </DataGrid.Resources>
            </DataGrid>

            <Button Grid.Row="2" Content="Add" HorizontalAlignment="Left" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="60" Click="addCounter" />
            <Button Grid.Row="2" Content="Remove" HorizontalAlignment="Left" Margin="75,0,0,10" VerticalAlignment="Bottom" Width="60" Click="removeCounter" />
            <Button Grid.Row="2" Content="-" HorizontalAlignment="Right" Margin="0,0,40,10" VerticalAlignment="Bottom" Width="25" Click="decrement" />
            <Button Grid.Row="2" Content="+" HorizontalAlignment="Right" Margin="0,0,10,10" VerticalAlignment="Bottom" Width="25" Click="increment" />
        </Grid>

        <Grid x:Name="SoundsGrid"  Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Label Grid.Row="0" Content="Sounds" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0" />
            <Image Grid.Row="0" HorizontalAlignment="Right" Margin="0,8,110,0"  VerticalAlignment="Top" Height="10" Width="10" >
                <Image.Source>
                    <BitmapImage UriSource="volume.png" />
                </Image.Source>
            </Image>
            <Slider x:Name="Slider" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,10,5" Width="100" Maximum="100" Minimum="0" 
                AutoToolTipPlacement="BottomRight" IsMoveToPointEnabled="True" ValueChanged="volume" >
                <Slider.LayoutTransform>
                    <ScaleTransform ScaleY="0.75" CenterX="15" CenterY="15"/>
                </Slider.LayoutTransform>
            </Slider>

            <DataGrid x:Name="SoundsList" Grid.Row="1" HorizontalAlignment="Stretch" Margin="10,0,10,10" AutoGenerateColumns="False" VerticalAlignment="Stretch" 
                  CanUserResizeColumns="True" CanUserReorderColumns="False" CanUserSortColumns="False" SelectionMode="Single" CanUserDeleteRows="False" 
                  CanUserAddRows="False" CanUserResizeRows="False" SelectionUnit="FullRow" MouseDoubleClick="OnDoubleClick" HeadersVisibility="Column" >
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Name" IsReadOnly="True" Binding="{Binding Path=Name}" />
                    <DataGridTextColumn Header="Path" IsReadOnly="True" Binding="{Binding Path=Path}" />
                    <DataGridTextColumn Header="Key" IsReadOnly="True" Binding="{Binding Path=CountKey}" />
                </DataGrid.Columns>
                <DataGrid.Resources>
                    <Style TargetType="{x:Type DataGridColumnHeader}">
                        <Setter Property="Foreground" Value="Black" />
                    </Style>
                </DataGrid.Resources>
            </DataGrid>

            <Button Grid.Row="2" Content="Add" HorizontalAlignment="Left" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="60" Click="addSound" />
            <Button Grid.Row="2" Content="Remove" HorizontalAlignment="Left" Margin="75,0,0,10" VerticalAlignment="Bottom" Width="60" Click="removeSound" />
            <Button Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,40,10" VerticalAlignment="Bottom" Width="25" Height="22" Click="play" >
                <Image Source="play.png" Width="8" Height="8" />
            </Button>
            <Button Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,10,10" VerticalAlignment="Bottom" Width="25" Height="22" Click="stop" >
                <Image Source="stop.png" Width="8" Height="8" />
            </Button>
        </Grid>
    </Grid>
</Grid>
</Window>

编辑：

上述解决方案没有解决隐藏其中一个面板的拆分器。为此，您需要在每一侧添加一列：

            <ColumnDefinition Width="*" MinWidth="40" />
            <ColumnDefinition Width="*" MinWidth="0" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" MinWidth="0" />
            <ColumnDefinition Width="*" MinWidth="40" />

然后您需要移动网格和拆分器以跨越两列：

        <GridSplitter Margin="0,25,0,10" Grid.Column="2" ResizeBehavior="PreviousAndNext" Width="3" Padding="5"/>

        <Grid x:Name="CountersGrid" Grid.Column="0" Grid.ColumnSpan="2">

        <Grid x:Name="SoundsGrid"  Grid.Column="3" Grid.ColumnSpan="2">

这应该给你足够的解决方案。您可能需要调整 minWidth 以满足您的需要。

Answer 2

我已通过添加根据 DataGrid Columns 大小更新 Grid Columns 和 Window 的 MinWidth 的代码解决了这个问题。现在，窗口将从第二个 DataGrid 开始切割的位置停止缩小。

    void OnLayoutUpdated(object sender, EventArgs e)
    {
        double countersMinWidth = CountersList.Columns[0].ActualWidth + CountersList.Columns[1].ActualWidth + CountersList.Columns[2].ActualWidth + CountersList.Margin.Left + CountersList.Margin.Right;
        double soundsMinWidth = SoundsList.Columns[0].ActualWidth + SoundsList.Columns[1].ActualWidth + SoundsList.Columns[2].ActualWidth + SoundsList.Margin.Left + SoundsList.Margin.Right;
        if (countersMinWidth < 205) countersMinWidth = 205;
        if (soundsMinWidth < 205) soundsMinWidth = 205;
        Grid.ColumnDefinitions[0].MinWidth = countersMinWidth;
        Grid.ColumnDefinitions[2].MinWidth = soundsMinWidth;
        this.MinWidth = countersMinWidth + soundsMinWidth + Splitter.ActualWidth + 18;
    }