学习Silverlight笔记—佈局

佈局

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