原文:
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 element = 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了,开始工作吧