Sign in TopomorphRSS Feed

maybe you have seen this behaviour of the grid splitter. It resizes two columns at once.
The top splitter behave like you'd want. The bottom one cant be moved to the left only to the right



It is the (not obvious) result of omitting a HorizontalAlignment Attribute on the grid splitter. See the XAML below. The two GrdSplitter tags are identical, except for their HorizontalAlignment.

 

<Grid x:Name="LayoutRoot" Background="White" Margin="30"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Border Background="#F7E48C" CornerRadius="20" Grid.Column="0" Grid.Row="0" BorderBrush="Black" BorderThickness="1.0" Margin="10"/> <Border Background="#F0C542" CornerRadius="20" Grid.Column="2" Grid.Row="0" BorderBrush="Black" BorderThickness="1.0" Margin="10" /> <Border Background="#7F8078" CornerRadius="20" Grid.Column="0" Grid.Row="1" BorderBrush="Black" BorderThickness="1.0" Margin="10" /> <Border Background="#FF2F1D" CornerRadius="20" Grid.Column="2" Grid.Row="1" BorderBrush="Black" BorderThickness="1.0" Margin="10" /> <b:GridSplitter Width="5" Grid.Column="1" Grid.Row="0" Background="Black" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="True" /> <b:GridSplitter Width="5" Grid.Column="1" Grid.Row="1" Background="Black" VerticalAlignment="Stretch" ShowsPreview="True" /> </Grid> [copy code to clipboard]
   1: <Grid x:Name="LayoutRoot" Background="White" Margin="30">
   2:         <Grid.ColumnDefinitions>
   3:             <ColumnDefinition />
   4:             <ColumnDefinition Width="Auto" />
   5:             <ColumnDefinition />
   6:         </Grid.ColumnDefinitions>
   7:         <Grid.RowDefinitions>
   8:             <RowDefinition />
   9:             <RowDefinition />
  10:         </Grid.RowDefinitions>
  11:         <Border Background="#F7E48C" CornerRadius="20" Grid.Column="0" Grid.Row="0" BorderBrush="Black" BorderThickness="1.0" Margin="10"/>
  12:         <Border Background="#F0C542" CornerRadius="20" Grid.Column="2" Grid.Row="0" BorderBrush="Black" BorderThickness="1.0" Margin="10" />
  13:         <Border Background="#7F8078" CornerRadius="20" Grid.Column="0" Grid.Row="1" BorderBrush="Black" BorderThickness="1.0" Margin="10" />
  14:         <Border Background="#FF2F1D" CornerRadius="20" Grid.Column="2" Grid.Row="1" BorderBrush="Black" BorderThickness="1.0" Margin="10" />
  15:         <b:GridSplitter Width="5" Grid.Column="1"  Grid.Row="0"  Background="Black" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="True" />
  16:         <b:GridSplitter Width="5" Grid.Column="1" Grid.Row="1" Background="Black" VerticalAlignment="Stretch" ShowsPreview="True" />
  17:     </Grid>  
Technorati Tags:

Comments