silverlight_容器

时间：2023-02-04 16:58:16

Canvas絕對佈局

　　定位Canvas.Top、Canvas.Left

　　ZIndex屬性

　　若制定2個控制項重疊，那麼後聲明控制項會覆蓋先聲明的控制項。此時可以使用Canvas.ZIndex屬性來改變它們之間的顯示順序。值越大顯示的越前

　　Canvas佈局也有其自身缺點，它使用於其中包含的UI元素比較固定的情形，如果你想向其中添加更多的控制項，或者UI元素需要改變大小或能隨著流覽器視窗的大小進行改變，此時Canvas就顯得有些力不從心。我們只能通過編寫代碼來控制UI元素的位置來應付這種動態的場景，這將是一件極其費時又費力的事情。更好的辦法通常使用其他帶有相關功能的內建語義的佈局面板，如StackPanel和Grid

<Canvas >

   <Button Canvas.Top="15" Canvas.Left="15"

Canvas.ZIndex="30" Content="按钮定位_前声明"></Button>

   <Button Canvas.Top="10" Canvas.Left="10" Content="按钮定位_后声明"></Button>

</Canvas>

　　相對佈局

　　StackPanel

　　StackPanel控制起來比較簡單，并沒有其他的設置。顯然，StackPanel不適合對整個頁面驚醒佈局，他適合對頁面上某一個很小的部份進行控制。

<StackPanel Orientation="Horizontal">
  
      <Button Content="O(∩_∩)O哈哈~" Margin="10" Width="90" Height="30"></Button>
  
      <Button Content="O(∩_∩)O哈哈~" Margin="10" Width="90" Height="30"></Button>
  
<Button Content="O(∩_∩)O哈哈~" Margin="10" Width="90" Height="30"></Button>
  
</StackPanel>

　　Grid

　　Grid控件是SilverLight中最強大靈活的佈局面板，它支持用多行和多列的方式排布頁面元素，與HTML裏的Table相似，不同的是，他不需要講UI元素內嵌到元素表格中，而是通過<Grid.RowDefinitions>和<Grid.ColumnDefinitions>屬性來定義Grid的行和列。這連個屬性要在<Grid>標籤內，然後就可以使用XAML的附件屬性語法制定UI元素屬於哪一行、那一列。索引是從0開始

<Grid>
  
    <Grid.RowDefinitions>
  
         <RowDefinition Height="30"></RowDefinition>
  
         <RowDefinition Height="30"></RowDefinition>
  
         <RowDefinition Height="30"></RowDefinition>
  
         <RowDefinition Height="30"></RowDefinition>
  
         <RowDefinition Height="30"></RowDefinition>
  
    </Grid.RowDefinitions>
  
    <Grid.ColumnDefinitions>
  
         <ColumnDefinition Width="90"></ColumnDefinition>
  
         <ColumnDefinition Width="90"></ColumnDefinition>
  
         <ColumnDefinition Width="90"></ColumnDefinition>
  
         <ColumnDefinition Width="90"></ColumnDefinition>
  
         <ColumnDefinition Width="90"></ColumnDefinition>
  
         <ColumnDefinition Width="90"></ColumnDefinition>
  
         <ColumnDefinition Width="*"></ColumnDefinition><!--自动适应-->
  
    </Grid.ColumnDefinitions>
  
         <Button Content="你" Grid.Row="3" Grid.ColumnSpan="2"></Button><!—合併單元格-->
  
         <Button Content="是" Grid.Row="4"></Button>
  
         <Button Content="你" Grid.Row="3" Grid.Column="6" Grid.RowSpan="2"></Button>
  
</Grid>

　　边距Margin

　　一般来说，有3中设置方式

　　壹.如果左、上、右、下 4个方向的空白呢便要设置相同值可以使用 Margin=”10”

　　贰.左右2边以及上下2边相同，可以用逗号分开2个数值来设置 Margin=”10,15”

　　参.4个方向边不一致，需要使用逗号分隔4个数值进行设置，顺序左、上、右、下

　　边框

　　Border对象，可以轻鬆在另一元素周围绘製边框或背景，嵌套的子元素必须从UIElement派生。同时还可以指定他的一些基本属性，如Width、Height、BorderThickness及BackGround。设置CornerRadius属性将边框的角改为圆角并通过Padding属性在Border中定位对象。

<Border Grid.Column="4" Grid.RowSpan="3"
  
CornerRadius="10" Background="Red" Margin="10" Padding="20">
  
    <TextBlock Text="悲催啊"></TextBlock>
  
</Border>

　　注意：使用Border元素時，須要注意，一個Border只能有唯一的直接子元素。如果想在Border內放入多個元素，必須先將一個容器(如Canvas 或 StackPanel容器)放入該Border元素內，軟后再將多個元素放入該容器對象內。

相关文章