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++);把移动的元素放在最外层

看看移动的效果吧

 另一张截图：

本文转自shenzhoulong  51CTO博客，原文链接：http://blog.51cto.com/shenzhoulong/849826，如需转载请自行联系原作者