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元素內,軟后再將多個元素放入該容器對象內。