user130268 user130268 - 3 months ago 31
C# Question

How to use GridSplitter to correctly resize the controls?

Below is my code:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"
Title="MainWindow" Height="673" Width="1008" >

<Grid Margin="0, 0, 8, 8">
<Grid.Resources>
<Style TargetType="{x:Type Control}">
<Setter Property="Margin" Value="8, 8, 0, 0" />
</Style>
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Control}}" />
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Control}}" />
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type Control}}" />
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type Control}}" />
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type Control}}" />
</Grid.Resources>

<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="7"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox x:Name="original_text" TextWrapping="Wrap" AcceptsReturn="True" Text="text1" />

<GridSplitter Grid.Row="1" Background="AntiqueWhite" HorizontalAlignment="Stretch" />

<Grid x:Name="grid2" Grid.Row="2" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox IsChecked="True" Content="aaaa" VerticalAlignment="Center" />
<CheckBox IsChecked="True" Content="bbbb" Grid.Row="1" VerticalAlignment="Center" />

<CheckBox IsChecked="True" Content="cccc" VerticalAlignment="Center" Grid.Column="1" />
<CheckBox IsChecked="False" Content="dddd" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" />

<Label Content="aaa" Grid.Column="2" VerticalAlignment="Center" Margin="20, 0, 0, 0" />
<ComboBox Grid.Column="2" Grid.Row="1" VerticalAlignment="Center" Margin="24, 0, 0, 0">
<ComboBoxItem IsSelected="True">eeee</ComboBoxItem>
</ComboBox>
<Label Content="asdf" Grid.Column="3" VerticalAlignment="Center" Margin="20, 0, 0, 0" />
<ComboBox Grid.Column="3" Grid.Row="1" VerticalAlignment="Center" Margin="24, 0, 0, 0" IsEditable="True" Width="130">
<ComboBoxItem IsSelected="True">fff</ComboBoxItem>
<ComboBoxItem>ggg</ComboBoxItem>
</ComboBox>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="0" Grid.RowSpan="2" Grid.Column="4">

</StackPanel>
</Grid>

<TextBox TextWrapping="Wrap" AcceptsReturn="True" Grid.Row="3" FontFamily="Courier New" Text="text2" />
</Grid>

</Window>


And it looks like this:

enter image description here

The behavior that I want to implement is that when the user drags the GridSplitter, he can resize text1 and text2. The center part grid2 should remain its original size. Is this possible? Hope someone can point me the right direction. Thanks in advance.

G.Y G.Y
Answer

Try this:

<Window 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d"
        Title="MainWindow" Height="673" Width="1008" >

    <Grid Margin="0, 0, 8, 8">
        <Grid.Resources>
            <Style TargetType="{x:Type Control}">
                <Setter Property="Margin" Value="8, 8, 0, 0" />
            </Style>
            <Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Control}}" />
            <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Control}}" />
            <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type Control}}" />
            <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type Control}}" />
            <Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type Control}}" />
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" MinHeight="50"/>
            <RowDefinition Height="7"/>
            <RowDefinition Height="*" MinHeight="100"/>
        </Grid.RowDefinitions>
        <TextBox x:Name="original_text" TextWrapping="Wrap" AcceptsReturn="True" Text="text1" VerticalAlignment="Stretch" />

        <GridSplitter Grid.Row="1" Background="AntiqueWhite" HorizontalAlignment="Stretch" />

        <Grid Grid.Row="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid x:Name="grid2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <CheckBox IsChecked="True" Content="aaaa" VerticalAlignment="Center" />
                <CheckBox IsChecked="True" Content="bbbb" Grid.Row="1" VerticalAlignment="Center" />

                <CheckBox IsChecked="True" Content="cccc" VerticalAlignment="Center" Grid.Column="1" />
                <CheckBox IsChecked="False" Content="dddd" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" />

                <Label Content="aaa" Grid.Column="2" VerticalAlignment="Center" Margin="20, 0, 0, 0" />
                <ComboBox Grid.Column="2" Grid.Row="1" VerticalAlignment="Center" Margin="24, 0, 0, 0">
                    <ComboBoxItem IsSelected="True">eeee</ComboBoxItem>
                </ComboBox>
                <Label Content="asdf" Grid.Column="3" VerticalAlignment="Center" Margin="20, 0, 0, 0" />
                <ComboBox Grid.Column="3" Grid.Row="1" VerticalAlignment="Center" Margin="24, 0, 0, 0" IsEditable="True" Width="130">
                    <ComboBoxItem IsSelected="True">fff</ComboBoxItem>
                    <ComboBoxItem>ggg</ComboBoxItem>
                </ComboBox>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="0" Grid.RowSpan="2" Grid.Column="4">

                </StackPanel>
            </Grid>

            <TextBox TextWrapping="Wrap" AcceptsReturn="True" Grid.Row="1" FontFamily="Courier New" Text="text2" VerticalAlignment="Stretch" />
        </Grid>
    </Grid>
</Window>