Silverlight 中使用不同面板进行布局的效果比较
时间：2011-05-04 来源：DotNet编程
本文通过一个实例程序，比较Silverlight中应用面板控件Canvas,StackPanel,DockPanel,WrapPanel,Grid来面板时，它们产生的效果异同。
一、不同面板的布局效果
二、源代码
<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="PanelLayout.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="800">
<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160*"/>
<ColumnDefinition Width="160*"/>
<ColumnDefinition Width="160*"/>
<ColumnDefinition Width="160*"/>
<ColumnDefinition Width="160*"/>
</Grid.ColumnDefinitions>
<sdk:Label Grid.Row="0" Grid.Column="0" HorizontalContentAlignment="Center" Content="Canvas"/>
<Canvas Grid.Row="1" Grid.Column="0">
<Button Background="Red">Left=0, Top=0</Button>
<Button Canvas.Left="18" Canvas.Top="18"
Background="Orange">Left=18, Top=18</Button>
</Canvas>
<sdk:Label Grid.Row="0" Grid.Column="1" HorizontalContentAlignment="Center" Content="StackPanel"/>
<StackPanel Grid.Row="1" Grid.Column="1" FlowDirection="LeftToRight" VerticalAlignment="Center">
<Button Background="Red">1</Button>
<Button Background="Orange">2</Button>
<Button Background="Yellow">3</Button>
<Button Background="Lime">4</Button>
<Button Background="Aqua">5</Button>
</StackPanel>
<sdk:Label Grid.Row="0" Grid.Column="2" HorizontalContentAlignment="Center" Content="DockPanel"/>
<toolkit:DockPanel Grid.Row="1" Grid.Column="2" VerticalAlignment="Center">
<Button Background="Red">1</Button>
<Button Background="Orange">2</Button>
<Button Background="Yellow">3</Button>
<Button Background="Lime">4</Button>
<Button Background="Aqua">5</Button>
</toolkit:DockPanel>
<sdk:Label Grid.Row="0" Grid.Column="3" HorizontalContentAlignment="Center" Content="WrapPanel"/>
<toolkit:WrapPanel Grid.Row="1" Grid.Column="3" VerticalAlignment="Center">
<Button Background="Red">1</Button>
<Button Background="Orange">2</Button>
<Button Background="Yellow">3</Button>
<Button Background="Lime">4</Button>
<Button Background="Aqua">5</Button>
</toolkit:WrapPanel>
<sdk:Label Grid.Row="0" Grid.Column="4" HorizontalContentAlignment="Center" Content="Grid"/>
<Grid Grid.Row="1" Grid.Column="4">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="3" Background="Green" BorderBrush="Red" BorderThickness="5" ></Button>
</Grid>
<sdk:GridSplitter Grid.Row="1" Grid.Column="0" Width="10" Background="Lime"/>
<sdk:GridSplitter Grid.Row="1" Grid.Column="1" Width="10" Background="Lime"/>
<sdk:GridSplitter Grid.Row="1" Grid.Column="2" Width="10" Background="Lime"/>
<sdk:GridSplitter Grid.Row="1" Grid.Column="3" Width="10" Background="Lime"/>
</Grid>
</UserControl>
三、通过比较它们之间的异同，得出它们适合应用在那种场合。
明日继续。
相关阅读 更多 +
