ZIndex

这 也是一个附加属性,表示canvas的children集合内的子元素的显示顺序,在canvas中的元素默认情况下是后面的子元素覆盖前面的子元素,所 以我们可以使用此附加属性更改显示属性,ZIndex其实是一个虚拟的Z轴,正方向延伸出屏幕的,ZIndex的数值越大,表示在越向外,越小越容易被覆 盖,所以如果想设置某个子元素显示,可以设置ZIndex较大值,ZIndex默认值为0;

触摸处理

下面演示的示例是通过改变RenderTransform属性上的变形对象,从而是元素可以在屏幕上移动,也可以通过在代码中设置left和top附加属性移动Canvas中的元素;

首先在Canva中绘制三个Ellipse元素,并设置演示为红色,绿色和蓝色,另外当移动哪一个ellipse对象的时候,它的ZIndex就会在最上层,也就是设置移动的对象ZIndex值比其他两个大

xaml部分代码:

  1. <!--ContentPanel - 在此处放置其他内容--> 
  2.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
  3.             <Canvas Name="cav"> 
  4.                 <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Fill="Red"></Ellipse> 
  5.                 <Ellipse Canvas.Left="150" Canvas.Top="150" Width="100" Height="100" Fill="Green"></Ellipse> 
  6.                 <Ellipse Canvas.Left="250" Canvas.Top="250" Width="100" Height="100" Fill="Blue"></Ellipse> 
  7.             </Canvas> 
  8.         </Grid> 

xaml代码比较简单,两个附加属性设置相对位置,宽和高相等做圆,填充三个不同的颜色;在这里我们重写 OnManipulationStarted和OnManipulationDelta方法,在OnManipulationStarted方法中 e.ManipulationContainer = cav;

部分隐藏代码

  1. protected override void OnManipulationStarted(ManipulationStartedEventArgs e) 
  2.         { 
  3.             //获得定义坐标的容器 
  4.             e.ManipulationContainer = cav
  5.             base.OnManipulationStarted(e); 
  6.         } 
  7.         
  8.         int i = 0
  9.         protected override void OnManipulationDelta(ManipulationDeltaEventArgs e) 
  10.         { 
  11.             
  12.             //获得引发事件的元素 
  13.             UIElement eelement = e.OriginalSource as UIElement; 
  14.             //获得修改 
  15.             Point translation = e.DeltaManipulation.Translation; 
  16.             
  17.             //设置新位置 
  18.             Canvas.SetLeft(element,Canvas.GetLeft(element)+translation.X); 
  19.             Canvas.SetTop(element, Canvas.GetTop(element) + translation.Y); 
  20.             Canvas.SetZIndex(element, i++); 
  21.  
  22.             e.Handled = true
  23.             base.OnManipulationDelta(e); 
  24.         } 

 无任何移动下的效果

 

上 面中我们看到一个新方法就是Canvas.GetLeft(element),这个是获得子元素在canvas中的left值,同理 Canvas.GetTop(element),还有可以看到Canvas.SetZIndex(element, i++);把移动的元素放在最外层

看看移动的效果吧

 

 另一张截图:

 

 五一假期Over了,开始工作吧