StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's some XAML that shows how to use a <code>GridSplitter</code> as you've described:</p> <pre><code><Grid VerticalAlignment="Stretch"> <Grid.RowDefinitions> <RowDefinition Height="10" /> <RowDefinition Height="10" /> <RowDefinition Height="10" /> <RowDefinition Height="10" /> <RowDefinition Height="10" /> <RowDefinition Height="10" /> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Rectangle Grid.Row="0" Fill="Red" /> <Rectangle Grid.Row="1" Fill="Orange" /> <Rectangle Grid.Row="2" Fill="Yellow" /> <Rectangle Grid.Row="3" Fill="Green" /> <Rectangle Grid.Row="4" Fill="Blue" /> <Rectangle Grid.Row="5" Fill="LightBlue" /> <ListBox Grid.Row="6" Background="Indigo"> <ListBoxItem>Hello</ListBoxItem> <ListBoxItem>World</ListBoxItem> </ListBox> <GridSplitter Grid.Row="7" Height="5" Background="Gray" VerticalAlignment="Top" HorizontalAlignment="Stretch" /> <ListBox Grid.Row="7" Background="Violet" Margin="0,5,0,0"> <ListBoxItem>Hello</ListBoxItem> <ListBoxItem>World</ListBoxItem> </ListBox> </Grid> </code></pre> <p>Avoid putting the GridSplitter in it's own row. Put it inside an existing row, and set it's alignment to the top (or bottom, if in the upper cell), stretched horizontally. Note how I've set it's height to 5, and then given an upper margin of 5 to the second ListBox so that neither element hides any part of the other.</p> <p>Hope that helps.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload