Silverlight 超入門 記錄1 Layout Control elements (Canvas)

silverlight 主要有三種Layout control element,分別是Canvas ,Grid 和 StackPanel.這裡暫時只介紹一下Canvas的用法,其他2個會在記錄2和3中後補

Canvas  -主要使用坐標來定義 Canvas本身的定位.

Grid      -主要使用類似表格(Table)利用橫行(rows)和直行(columns)來定義元素的位置,這方式最有彈性,同時是VS2008預建的顯示方法.

StackPanel  -將元素平均放成1行是平方和垂直方式來定位.

以下是VS2008 當我們開啟一個新的silverlight專案時所自動產生的代碼

<UserControl x:Class="dark6player.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">

  </Grid>
</UserControl>

我們可以看到VS2008 已經自動產生了一個Grid元素給我們並命名為LayoutRoot.

以下是幾個Canvas 的例子.

我們先不要理會上面的一堆宜告並在加入以下代碼:

<Canvas Width="480" Height="480" Background="blue">
    <Rectangle Canvas.Left="30" Canvas.Top="30"
       Fill="red" Width="200" Height="200" />
</Canvas>

效果:

我們定義了一個canvas和在裡面定義了一個rectangle,留意rectangle當中的Canvas.Left和Canvas.right對這個元素影響.

 

我們再加上多一些元素試看看我們再多加入一個canvas和rectangle到上面的例子:

<Canvas Width="480" Height="480" Background="blue">
    <Rectangle Canvas.Left="30" Canvas.Top="30"
       Fill="red" Width="200" Height="200" />
    <Canvas Width="320" Height="320" Background="Yellow" Canvas.Left="80" Canvas.Top="80">
    <Rectangle Canvas.Left="30" Canvas.Top="30"
       Fill="green" Width="200" Height="200" />
       </Canvas>
</Canvas>

 

效果:

我們所以看到同樣是同一個Canvas的child,比較後的會覆蓋比較前的,而已所有以canvas來定位的元素只會對自己上一個canvas對齊而不是根canvas.