中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

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

有數(shù)據(jù)就肯定會(huì)有列表，這里就寫一下我使用的心得。

做列表這里我選用的是StackPanel，它可以橫向或縱向排列。同樣若是縱向排列�？梢栽O(shè)置寬度一定。高度Auto。如果需要設(shè)置間距，那就在它的子控件設(shè)置。

重點(diǎn)說一下對(duì)StackPanel的遮罩。 這個(gè)做遮罩首先先把StackPanel組合到一個(gè)Canvas中。然后在canvas上畫一個(gè)矩形。同時(shí)選中Canvas和矩形，如圖所示：

1. Canvas
   Canvas是一個(gè)絕對(duì)定位的組件，它以左上角為定點(diǎn)進(jìn)行定位。
   
             
     
   代碼拷貝框
   <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是一個(gè)容器控件。它可以是一個(gè)空的，為動(dòng)態(tài)加載的控件做占位實(shí)用。不過它的內(nèi)部只能包含一個(gè)控件。
3. StatckPanel
   其可以橫行或縱向的對(duì)子控件進(jìn)行排列。
   
   代碼拷貝框
   <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
   該控件允許其子控件大小大于其本身的大小。在大于其自身的情況下出現(xiàn)滾動(dòng)條進(jìn)行控制顯示的區(qū)域。
   
   代碼拷貝框
   <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
   這個(gè)控件是最復(fù)雜的，其可以設(shè)置行和列，尺寸（寬高）其設(shè)置分為三種：
   Auto，自適應(yīng)子控件
   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 全部選擇 然后拷貝]
   
   

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁 如何做一個(gè)自適應(yīng)窗口大小的布局 下一頁 全屏效果

◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論