[Windows 8 App]介面介紹-----Canvas(Canvas相對位置定位與嵌套)

2013-12-20

第一種：Canvas相對位置定位與嵌套

在定義Canvas子元素的位置時，需要先設定Canvas.Left和CanvasTop屬性

Canvas.Left表示與左側框之間的距離

Canvas.Top表示與頂端之間的距離

Canvas其實是可以互相嵌套的

在一個Canvas中可以在放置一個Canvas，然後內層的Canvas一樣可以使用上面介紹的Canvas.Left和Canvas.Top來設置位置

我們就來實作個範例

首先，新增一個專案【Canvas】，開啟【MainPage.xaml】

我們先在Grid中放進一個Canvas元素，並設計Canvas元素的寬與高都是280像素

然後在剛剛設定的Canvas元素裡面在放進一個Canvas元素，這一個新增的Canvas長與寬均是240像素

之後，在240元素的Canvas裡面放置一個矩形，長與寬均為150像素，紅色填滿

最後，對第二個Canvas與矩形設定Canvas.Left和Canvas.Top的屬性值均為30像素

【MainPage.xaml】的Grid中程式碼

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Canvas Width="280" Height="280" Margin="83,210,1003,278">
<Canvas Width="240" Height="240" Canvas.Left="30" Canvas.Top="30">
<Rectangle Width="150" Height="150" Fill="Red" Canvas.Left="30" Canvas.Top="30" />
</Canvas>
</Canvas>
</Grid>


<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Canvas Width="280" Height="280" Margin="83,210,1003,278">
        <Canvas Width="240" Height="240" Canvas.Left="30" Canvas.Top="30">
            <Rectangle Width="150" Height="150" Fill="Red" Canvas.Left="30" Canvas.Top="30" />
        </Canvas>
     </Canvas>
</Grid>

專案的設計畫面：

回首頁