silverlight元素被遮挡使用ZIndex

     对象之间的位置是由xmal的声明顺序所决定，先申明的元素默认情况下显示在后什么的元素之后，同常情况下我们会遇到元素被覆盖层叠的情况，这种情况下可使用Canvas对象的Zindex来设置其层次关系，如下图是未设置之前的图元（图1），与设置之后的图元（图2）

     

 

                （图1）                                                                                         （图2）

通过设置Zindex来控制其显示层次关系，zindex值越大表示越接近前景，层次就越高，反之值越小就层级越低。代码如下：

xaml:

 

<UserControl x:Class="Demo.MenuItemDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    
    <Grid x:Name="LayoutRoot" Background="White" MouseRightButtonDown="LayoutRoot_MouseRightButtonDown"   MouseRightButtonUp="LayoutRoot_MouseRightButtonUp">
       
        <Rectangle Stroke="Red" Fill="Blue"   Height="45" HorizontalAlignment="Left" Margin="161,70,0,0" Name="rectangle1"  StrokeThickness="1" VerticalAlignment="Top" Width="53" Canvas.ZIndex="2"/>
        <Rectangle Stroke="Red"  Fill="AntiqueWhite" Height="45" HorizontalAlignment="Left" Margin="178,82,0,0" Name="rectangle2"  StrokeThickness="1" VerticalAlignment="Top" Width="53" Canvas.ZIndex="1"/>
        <Rectangle Height="45" Fill="Aquamarine" HorizontalAlignment="Left" Margin="138,50,0,0" Name="rectangle3" Stroke="Red" StrokeThickness="1" VerticalAlignment="Top" Width="53" Canvas.ZIndex="3"/>
    </Grid>
</UserControl>