Grid with dataGrid resizing in WPF

Question

I have an issue when resizing window of my application. I have two DataGrids each placed in its own Column of Grid with another Column in the middle of the Grid containing GridSplitter to adjust the size of DataGrids.

By reducing the window width from this state I need to get this:

This way the each column and window would hit the MinWidth. But instead of that I get this (the left Column is not at its MinWidth):

I noticed that it is the Columns in the DataGrid that stop/slow the shrinking of the Column of the Grid causing window at minimum size to cut the second part. The same thing happens to the other column when its columns are wider.

This is my XAML file:

<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>

What I need is to make it so the DataGrid does not infulence resizing of the Grid Column. Thanks for help

Answer 1

Below is your code with my changes. I have removed the MinWidth values and that resolved the issue. Both panels remain equal. If you want to set a minimum size to the whole panel, that will effectively create minimum widths for each columns in the grid. It looks like you already have that though:

<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>

EDIT:

The above solution does not address the splitter hiding one of the panels. To do this, you will need to add a column to each side:

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

Then you need to move the grids and the splitter around to span the two columns:

        <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">

That should give you enough for the solution. You may need to adjust the minWidth to meet your needs.

Answer 2

I have resolved the issue by adding a code that updates the MinWidth of Grid Columns and Window according to DataGrid Columns sizes. Now the window will stop sizing down where it would start cutting from the second 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;
    }