windows phone (25) Canvas元素B

 ZIndex

這 也是一個附加屬性，表示canvas的children集合內的子元素的顯示順序，在canvas中的元素默認情況下是後面的子元素覆蓋前面的子元素，所 以我們可以使用此附加屬性更改顯示屬性，ZIndex其實是一個虛擬的Z軸，正方向延伸出屏幕的，ZIndex的數值越大，表示在越向外，越小越容易被覆 蓋，所以如果想設置某個子元素顯示，可以設置ZIndex較大值，ZIndex默認值爲0；

觸摸處理

下面演示的示例是通過改變RenderTransform屬性上的變形對象，從而是元素可以在屏幕上移動，也可以通過在代碼中設置left和top附加屬性移動Canvas中的元素；

首先在Canva中繪製三個Ellipse元素，並設置演示爲紅色，綠色和藍色，另外當移動哪一個ellipse對象的時候，它的ZIndex就會在最上層，也就是設置移動的對象ZIndex值比其他兩個大

xaml部分代碼:

<!--ContentPanel - 在此處放置其他內容-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Canvas Name="cav">
                <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Fill="Red"></Ellipse>
                <Ellipse Canvas.Left="150" Canvas.Top="150" Width="100" Height="100" Fill="Green"></Ellipse>
                <Ellipse Canvas.Left="250" Canvas.Top="250" Width="100" Height="100" Fill="Blue"></Ellipse>
            </Canvas>
        </Grid>

xaml代碼比較簡單，兩個附加屬性設置相對位置，寬和高相等做圓，填充三個不同的顏色；在這裏我們重寫 OnManipulationStarted和OnManipulationDelta方法，在OnManipulationStarted方法中 e.ManipulationContainer = cav;

部分隱藏代碼

protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
        {
            //獲得定義座標的容器
            e.ManipulationContainer = cav;
            base.OnManipulationStarted(e);
        }

        int i = 0;
        protected override void OnManipulationDelta(ManipulationDeltaEventArgs e)
        {

            //獲得引發事件的元素
            UIElement eelement = e.OriginalSource as UIElement;
            //獲得修改
            Point translation = e.DeltaManipulation.Translation;

            //設置新位置
            Canvas.SetLeft(element,Canvas.GetLeft(element)+translation.X);
            Canvas.SetTop(element, Canvas.GetTop(element) + translation.Y);
            Canvas.SetZIndex(element, i++);

            e.Handled = true;
            base.OnManipulationDelta(e);
        }

 無任何移動下的效果

 

上 面中我們看到一個新方法就是Canvas.GetLeft(element)，這個是獲得子元素在canvas中的left值，同理 Canvas.GetTop(element)，還有可以看到Canvas.SetZIndex(element, i++);把移動的元素放在最外層

看看移動的效果吧

 

 另一張截圖：

 

 五一假期Over了，開始工作吧