Gridsplitter not showing

6
votes

I am new to WPF. I declared my Grid as so:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"></ColumnDefinition>
    <ColumnDefinition Width="5"></ColumnDefinition>
    <ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
     <Grid.RowDefinitions>
         <RowDefinition Height="*"></RowDefinition>
         <RowDefinition Height="*"></RowDefinition>
         <RowDefinition Height="*"></RowDefinition>
     </Grid.RowDefinitions>
</Grid>

I basically want that 3rd column of width 5 to be the GridSplitter and to be resizeable for the left and right columns. So I have this code for the splitter:

<GridSplitter Grid.Column="1" Grid.RowSpan="3" ResizeDirection="Columns" Height="Auto"
              VerticalAlignment="Stretch" HorizontalAlignment="Center"
              Margin="0" Background="Black"/>

I do not see the GridSplitter in the column. Did I set it up right? Thanks.

2
c#wpfgridsplitter
Don't you think 5 is a very narrow width? Is it just that it's too narrow to be seen? - Jaymz
I have used a larger width, like 50, and I can see the column change, but I do not see the GridSplitter in it. - Crystal

2 Answers

6
votes

You have the GridSplitter centering in it's column, but it has no width defined. So you are effectively centering it with a width of zero. It also looks like you have two Grids, where you'd need one.

Seems like you want something like this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <GridSplitter Grid.Column="1" Grid.RowSpan="3" ResizeDirection="Columns" Height="Auto"
         Width="5" VerticalAlignment="Stretch" Margin="0" Background="Black"/>

</Grid>

If you need the nested Grid, then you may need to duplicate the Column definitions.

0
votes

I just ran this XAML and it works fine

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="5"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>


    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <TextBox Grid.Column="0" MinWidth="100" />
    <GridSplitter Grid.Column="1" Grid.RowSpan="3" ResizeDirection="Columns" HorizontalAlignment="Stretch" />

    <TextBox Grid.Column="2" MinWidth="100" />
</Grid>

Are you sure you want to put three rows inside 0th column? because it doesn't make much sense

And you are doing this

<GridSplitter Grid.Column="1" Grid.RowSpan="3" ResizeDirection="Columns" Height="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Center"
                            Margin="0" Background="Black"/>

But apparently first column don't have three rows which I think you have mistakenly placed in column 0.

I think what you want to do is first XAML I wrote