CaseStudy(showcase)布局篇列表的排放与遮罩

做silvelight也有一段时间了，相册、游戏，刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy。

布局篇-列表的排放与遮罩

有数据就肯定会有列表，这里就写一下我使用的心得。

做列表这里我选用的是StackPanel，它可以横向或纵向排列。同样若是纵向排列。可以设置宽度一定。高度Auto。如果需要设置间距，那就在它的子控件设置。

重点说一下对StackPanel的遮罩。 这个做遮罩首先先把StackPanel组合到一个Canvas中。然后在canvas上画一个矩形。同时选中Canvas和矩形，如图所示：

这样做事为了以后做滚动条方便。

下边分别对各个布局控件进行介绍。

1. Canvas

   Canvas是一个绝对定位的组件，它以左上角为定点进行定位。

   

   <Canvas x:Name="LayoutRoot" Background="White"> <Rectangle Height="100" Width="100" Fill="#FF4A656C" Canvas.Top="60" Canvas.Left="100"/> </Canvas>

2. Border

Border是一个容器控件。它可以是一个空的，为动态加载的控件做占位实用。不过它的内部只能包含一个控件。

3. StatckPanel

   其可以横行或纵向的对子控件进行排列。

   <StackPanel Height="144" Width="165" Canvas.Top="71" Canvas.Left="142"> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> </StackPanel>

   

   <StackPanel Height="144" Width="221" Canvas.Top="53" Canvas.Left="56.715" Orientation="Horizontal"> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> </StackPanel>

   

4. ScrollViewer

   该控件允许其子控件大小大于其本身的大小。在大于其自身的情况下出现滚动条进行控制显示的区域。

   <ScrollViewer Height="141" Width="186" Canvas.Left="54.715" Canvas.Top="50" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> <StackPanel Height="127" Width="223" Orientation="Horizontal"> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> </StackPanel> </ScrollViewer>

   

5. Grid

   这个控件是最复杂的，其可以设置行和列，尺寸（宽高）其设置分为三种

   Auto，自适应子控件

   InPixel，固定的宽高

   *，按百分比分配

   <Grid Height="278" Width="365" Canvas.Left="63" Canvas.Top="91"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.249*"/> <ColumnDefinition Width="0.751*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="0.097*"/> <RowDefinition Height="0.23*"/> <RowDefinition Height="0.673*"/> </Grid.RowDefinitions> <Button HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" RenderTransformOrigin="0.529999971389771,0.0700000002980232" Grid.ColumnSpan="2" Grid.RowSpan="1" Content="Button"/> <Button HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" Content="Button"/> <Button HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Grid.ColumnSpan="1" Grid.Row="2" Content="Button" d:LayoutOverrides="HorizontalAlignment"/> <Button Margin="0,0,0,0" Grid.RowSpan="1" Content="Button" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="Auto"/> </Grid>

   

布局模版下载

作者：nasa
出处：nasa.cnblogs.com
联系:nasa_wz@hotmail.com
QQ:12446006