CODEWITHSUNDEEP
wpfxamlgridsplitter
Crippledsmurf
Crippledsmurf

Reputation: 4012

Why does my GridSplitter not work at all?

I'm migrating a WinForms app to WPF. Everything has gone well so far except in relation to my attempts to use GridSplitter which I can never seam to make resize anything at run-time.

To make sure it wasn't just my code I attempted to compile the GridSplitter sample from LearnWPF.com and it doesn't appear to work either. I am expecting to see the standard resize cursor when I mouse over the splitter which doesn't happen, and as far as I can see there is no other visual representation of the splitter in the window either.

What am I missing here?

<Window x:Class="UI.Test"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test" Height="300" Width="300">
<Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#feca00" Grid.Column="0">
            <TextBlock FontSize="35" Foreground="#58290A"
               TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter/>
        <Border CornerRadius="10" BorderBrush="#58290A"
          BorderThickness="5" Grid.Column="1">
            <TextBlock FontSize="25" Margin="20" Foreground="#FECA00"
               TextWrapping="Wrap">Right Hand Side</TextBlock>
        </Border>
    </Grid>

Upvotes: 11

Views: 8831

Answers (2)

Quark Soup
Quark Soup

Reputation: 4741

You're missing important concept of Z-Ordering. Controls are placed in the z-order in the order you list them. Basically, your grid splitter is being covered up by the last column. If you place the Grid Splitter over the last column in the z-order, it should work just fine without requiring an extra column:

<Window x:Class="UI.Test"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test" Height="300" Width="300">
    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <StackPanel Background="#feca00" Grid.Column="0">
                <TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock>
            </StackPanel>
            <Border CornerRadius="10" BorderBrush="#58290A" BorderThickness="5" Grid.Column="1">
                <TextBlock FontSize="25" Margin="20" Foreground="#FECA00" TextWrapping="Wrap">Right Hand Side</TextBlock>
            </Border>
            <GridSplitter Grid.Column="1"/>
        </Grid>
    </Grid>

Upvotes: -1

moswald
moswald

Reputation: 11677

In your example, GridSplitter is being placed in the first column. I don't remember my WPF alignment rules off the top of my head, but I think it's probably being placed on the left side of the first column. Not really what you wanted.

It is much easier to make a GridSplitter occupy a row or column, than to try and share a row or column with other controls.

<Window x:Class="UI.Test"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test" Height="300" Width="300">
<Grid>
      <Grid>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
         <StackPanel Grid.Column="0" Background="#feca00">
            <TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">
              Left Hand Side
            </TextBlock>
         </StackPanel>
         <GridSplitter
            Width="4"
            Grid.Column="1"
            Background="Red"
            VerticalAlignment="Stretch"
            HorizontalAlignment="Center"/>
         <Border
            Grid.Column="2"
            BorderBrush="#58290A"
            BorderThickness="5"
            CornerRadius="10">
            <TextBlock FontSize="25" Foreground="#FECA00" TextWrapping="Wrap">
              Right Hand Side
            </TextBlock>
         </Border>
      </Grid>
   </Grid>
</Window>

Upvotes: 13

Related Questions