[Windows 8 App]介面介紹-----Canvas(Canvas的Z軸順序)

2013-12-20

第二種：Canvas的Z軸順序

有時候Canvas中有多個元素會相互的重疊

為了讓元素可以依照我們所想的方式顯示

我們可以透過元素的Canvas.ZIndex屬性來設定

Canvas.ZIndex數值越大表示越上層

那相對的Canvas.ZIndex數值越小表示越下層

我們在上一個範例的程式碼後面繼續寫這一個範例

首先，我們先放進一個Canvas元素

在Canvas元素裡我們在放置3個橢圓形

第一個橢圓形的程式碼：

這是最上層

<Ellipse Canvas.ZIndex="4" Canvas.Left="525" Canvas.Top="217" Width="100" Height="100" Fill="Red"/>


<Ellipse Canvas.ZIndex="4" Canvas.Left="525" Canvas.Top="217" Width="100" Height="100" Fill="Red"/>

這是中間層

<Ellipse Canvas.ZIndex="3" Canvas.Left="545" Canvas.Top="237" Width="150" Height="150" Fill="Yellow"/>


<Ellipse Canvas.ZIndex="3" Canvas.Left="545" Canvas.Top="237" Width="150" Height="150" Fill="Yellow"/>

這是最底層

<Ellipse Canvas.ZIndex="2" Canvas.Left="565" Canvas.Top="257" Width="200" Height="200" Fill="Green"/>


<Ellipse Canvas.ZIndex="2" Canvas.Left="565" Canvas.Top="257" Width="200" Height="200" Fill="Green"/>

這是Grid裡面Canvas的完整程式碼

<Canvas>
<Ellipse Canvas.ZIndex="4" Canvas.Left="525" Canvas.Top="220" Width="100" Height="100" Fill="Red"/>
<Ellipse Canvas.ZIndex="3" Canvas.Left="545" Canvas.Top="240" Width="150" Height="150" Fill="Yellow"/>
<Ellipse Canvas.ZIndex="2" Canvas.Left="565" Canvas.Top="260" Width="200" Height="200" Fill="Green"/>
</Canvas>


<Canvas>
    <Ellipse Canvas.ZIndex="4" Canvas.Left="525" Canvas.Top="220" Width="100" Height="100" Fill="Red"/>
    <Ellipse Canvas.ZIndex="3" Canvas.Left="545" Canvas.Top="240" Width="150" Height="150" Fill="Yellow"/>
    <Ellipse Canvas.ZIndex="2" Canvas.Left="565" Canvas.Top="260" Width="200" Height="200" Fill="Green"/>
</Canvas>

專案的設計畫面：

回首頁