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

Question

调整应用程序窗口大小时出现问题。我有两个DataGrids，每个都放在它自己的Grid of Grid中，另一个Column位于Grid的中间，包含GridSplitter，用于调整DataGrids的大小。

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

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

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

这是我的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不会影响Grid Column的大小调整。 谢谢你的帮助

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列大小更新网格列和窗口的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;
    }