views:

819

answers:

2

I have an app with grid with 3 columns. The grid splitter between the first and second columns works just fine. To get the splitter over to be between the second and third columns I made a column for the splitter. (So now the the third column is really the fourth.)

When I resize the other columns also shrink. I assume that is because I have them set to be relative sized. But I don't know how to fix it.

Here is a XAML Pad Ready example of my issue. Plug this into XAML pad and then try to resize the last column to be smaller.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#feca00" Grid.Column="0">
            <TextBlock FontSize="35" Foreground="#58290A"
                   TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter Width="10" />
        <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="2" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <TabControl Grid.Column="3" Name="tabControl1">
            <TabItem Header="Add Links" Name="tabAddLinks">
                <Grid></Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Page>

Thanks for the help!


EDIT: It was suggested that having both splitters in their own columns might fix it. I tried that and now the first splitter also shrinks the columns like the second splitter does.

Here is the XAML Pad code for that example:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="#feca00" Grid.Column="0">
            <TextBlock FontSize="35" Foreground="#58290A"
                   TextWrapping="Wrap">Left Hand Side</TextBlock>
        </StackPanel>
        <GridSplitter Grid.Column="1" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <Border CornerRadius="10" BorderBrush="#58290A"
              BorderThickness="5" Grid.Column="2">
            <TextBlock FontSize="25" Margin="20" Foreground="#FECA00"
                   TextWrapping="Wrap">Right Hand Side</TextBlock>
        </Border>
        <GridSplitter Grid.Column="3" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Width="5"></GridSplitter>
        <TabControl Grid.Column="4" Name="tabControl1">
            <TabItem Header="Add Links" Name="tabAddLinks">
                <Grid></Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Page>
+1  A: 

A GridSplitter should be placed within its own Column in a Grid. I'm not sure I understand your issue entirely, but I suggest you try creating a Grid with 5 ColumnDefinitions. Use columns 1 and 2 to place the GridSplitters and columns 0, 2 and 4 for content.

The GridSplitter MSDN doc has a sample on how to do this.

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>
...
<GridSplitter Grid.Column="1"
          HorizontalAlignment="Center"
          VerticalAlignment="Stretch"
          Background="Black" 
          ShowsPreview="True"
          Width="5"
          />
siz
I tried that and now both columns are broken. See my updated question for the changed XAML.
Vaccano
Also note that this issue is only present on a 3 column situation. Two columns work just fine...
Vaccano
I guess you didn't try HorizontalAlignment="Center" like the sample I posted. :) Glad you solved the problem though.
siz
+4  A: 

Try setting HorizontalAlignment="Center" for both splitters - no idea why having it set to "Right" should cause the behaviour to go so screwy, but changing it worked for me :)

IanR
Bless you! I was pulling my hair out on this one!!!!!
Vaccano
update: I think it's to do with the GridSplitter's ResizeBehaviour property will default to BasedOnAlignment if unspecified, so only the column to the right of the GridSplitter's column will be resized... would need to dig deeper into the msdn doco to be sure...
IanR