Using a Grid Splitter in WPF

1
votes

I am trying to implement a GridSplitter in C# WPF but I'm not finding any decent tutorials, I've tried working it out for myself but so far no joy.

I have the below XAML layout:

<Window x:Class="SqliteManager.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="444" Width="802">
    <Grid>
        <Grid Grid.Column="0" HorizontalAlignment="Left" Name="grid1" Width="181" Background="#FFE23D3D" />
        <GridSplitter Grid.Column="1" HorizontalAlignment="Left" Margin="179,0,0,0" Name="gridSplitter1" Width="10" ResizeDirection="Columns" />
        <Grid Grid.Column="2" HorizontalAlignment="Left" Margin="187,0,0,0" Name="grid2" Width="593" Background="#FF2B42C7" />
    </Grid>
</Window>

This looks like the following in the actual program.

Screenshot of program

In my program, when I place my mouse over the grid splitter, my cursor changes to the horizontal double ended pointer, but dragging it either left and right makes absolutely no different. Everything stays where it is currently placed.

1
c#wpf

1 Answers

4
votes

You need to define actual columns in your layout, rather than using margins. For example:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0" HorizontalAlignment="Left" Name="grid1" Width="181" Background="#FFE23D3D" />
    <GridSplitter Grid.Column="1" HorizontalAlignment="Left"  Name="gridSplitter1" Width="10" ResizeDirection="Columns" />
    <Grid Grid.Column="2" HorizontalAlignment="Left" Name="grid2" Width="593" Background="#FF2B42C7" />
</Grid>