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
