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

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

做列表这里我选用的是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>
   [Ctrl+A 全部选择 然后拷贝]
   
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>
   [Ctrl+A 全部选择 然后拷贝]        
   
   代码拷贝框
   <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>
   [Ctrl+A 全部选择 然后拷贝]  
   
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>
   [Ctrl+A 全部选择 然后拷贝]
   
   
   
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>
   [Ctrl+A 全部选择 然后拷贝]
   
   

出处：蓝色理想
责任编辑：moby

上一页 如何做一个自适应窗口大小的布局 下一页 全屏效果

◎进入论坛RIA设计与应用版块参加讨论