#387 – Set Background Color to See How Layout Works
September 15, 2011 Leave a comment
It’s sometimes hard to understand how a container is laying out its children. You can use the Background property of each control, or of the panels, to get a better idea of where things are.
Suppose that we have a GUI that includes a handful of controls and two nested panels.
<StackPanel Orientation="Vertical"> <Label Content="Bob's Your Uncle" HorizontalAlignment="Right"/> <StackPanel Orientation="Horizontal"> <Label Content="Paul"/> <Button Content="Ringo" Margin="10"/> <TextBox Text="George" VerticalContentAlignment="Bottom"/> </StackPanel> <TextBox Text="Herman was here.."/> </StackPanel>
To better see how things are being layed out, we can set the Background to a different color for each element.
<StackPanel Orientation="Vertical" Background="Pink"> <Label Content="Bob's Your Uncle" HorizontalAlignment="Right" Background="Lavender"/> <StackPanel Orientation="Horizontal" Background="LightBlue"> <Label Content="Paul" Background="Red"/> <Button Content="Ringo" Margin="10" Background="Green"/> <TextBox Text="George" VerticalContentAlignment="Bottom" Background="Blue"/> </StackPanel> <TextBox Text="Herman was here.." Background="Orange"/> </StackPanel>