Pro Silverlight 3 in C# Layout

1. Borders

<Border Margin="25" Background="LightYellow"
BorderBrush="SteelBlue" BorderThickness="8" CornerRadius="15">
<Button Margin="10 Content="Click Me"></Button>
</Border>

2.StackPanel

<UserControl x:Class="Layout.SimpleStack"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Background="White">
<TextBlock Text="A Button Stack"></TextBlock>
<Button Content="Button 1"></Button>
<Button Content="Button 2"></Button>
<Button Content="Button 3"></Button>
<Button Content="Button 4"></Button>
</StackPanel>
</UserControl>

<StackPanel Orientation="Horizontal" Background="White">

3.WrapPanel

<toolkit:WrapPanel Margin="3">
<Button VerticalAlignment="Top" Content="Top Button"></Button>
<Button MinHeight="60" Content="Tall Button"></Button>
<Button VerticalAlignment="Bottom" Content="Bottom Button"></Button>
<Button Content="Stretch Button"></Button>
<Button VerticalAlignment="Center" Content="Centered Button"></Button>
</toolkit:WrapPanel>

4.DockPanel

<toolkit:DockPanel LastChildFill="True">
<Button toolkit:DockPanel.Dock="Top" Content="Top Button"></Button>
<Button toolkit:DockPanel.Dock="Bottom" Content="Bottom Button"></Button>
<Button toolkit:DockPanel.Dock="Left" Content="Left Button"></Button>
<Button toolkit:DockPanel.Dock="Right" Content="Right Button"></Button>
<Button Content="Remaining Space"></Button>
</toolkit:DockPanel>

5.Grid

<Grid ShowGridLines="True" Background="White">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
...
</Grid>

6.GridSplitter

<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition MinWidth="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Margin="3" Content="Left Side of the Grid"></Button>
<controls:GridSplitter Grid.Column="1" Grid.RowSpan="2" Background="LightGray"
Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"
ShowsPreview="False"></controls:GridSplitter>
<Button Grid.Column="2" Margin="3" Content="Right Side of the Grid"></Button>
</Grid>

 

<!-- This is the Grid for the entire page. -->
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- This is the nested Grid on the left.
It isn't subdivided further with a splitter. -->
<Grid Grid.Column="0" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Margin="3" Grid.Row="0" Content="Top Left"></Button>
<Button Margin="3" Grid.Row="1" Content="Bottom Left"></Button>
</Grid>
<!-- This is the vertical splitter that sits between the two nested
(left and right) grids. -->
<controls:GridSplitter Grid.Column="1" Background="LightGray"
Width="3" HorizontalAlignment="Center" VerticalAlignment="Stretch">
</controls:GridSplitter>
<!-- This is the nested Grid on the right. -->
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>

<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="3" Content="Top Right"></Button>
<Button Grid.Row="2" Margin="3" Content="Bottom Right"></Button>
<!-- This is the horizontal splitter that subdivides it into
a top and bottom region.. -->
<controls:GridSplitter Grid.Row="1" Background="LightGray"
Height="3" VerticalAlignment="Center" HorizontalAlignment="Stretch"
ShowsPreview="False"></controls:GridSplitter>
</Grid>
</Grid>

7.Canvas

<Canvas Background="White">
<Button Canvas.Left="10" Canvas.Top="10" Canvas.ZIndex="1"  Content="(10,10)"></Button>
<Button Canvas.Left="120" Canvas.Top="30" Content="(120,30)"></Button>
<Button Canvas.Left="60" Canvas.Top="80" Width="50" Height="50"
Content="(60,80)"></Button>
<Button Canvas.Left="70" Canvas.Top="120" Width="100" Height="50"
Content="(70,120)"></Button>
</Canvas>

8.Scrolling

<ScrollViewer Background="AliceBlue"></ScrollViewer>

9.Scaling

<toolkit:Viewbox></toolkit:Viewbox>

10.Full Screen

private void Button_Click(object sender, RoutedEventArgs e)
{
Application.Current.Host.Content.IsFullScreen = true;
}

book mark:145