Canvas控件

 Canvas ：绝对布局，即指定控件在容器中的绝对位置。

 Canvas.Left、Canvas.Top :设置子控件的左上角相对于容器左上角的位置，

 Canvas.ZIndex: 改变叠加的顺序，数值越大越靠上。

 在C#中设置子控件相对于Canvas的坐标：

Canvas.SetLeft(参数列表);
Canvas.SetRight(参数列表);
Canvas.SetZIndex(参数列表);

 示例一：

 附带代码：

  1. <Grid x:Name="LayoutRoot"  Width="400" Height="400" Background="Transparent"> 
  2.  
  3.         <Canvas Background="CadetBlue"> 
  4.  
  5.             <Rectangle Canvas.ZIndex="2" Fill="Red" Width="200" Height="200" Name="rect1" Canvas.Left="99" Canvas.Top="43"></Rectangle> 
  6.  
  7.             <Rectangle Canvas.ZIndex="1" Fill="Black" Width="100" Height="100" Name="rect2" Canvas.Left="236" Canvas.Top="154"></Rectangle> 
  8.  
  9.         </Canvas> 
  10.  
  11.     </Grid> 

 效果为1-1：

容器控件Canvas_容器控件Canvas

1-1

 修改ZIndex改变叠加顺序：

  1. <Grid x:Name="LayoutRoot"  Width="400" Height="400" Background="Transparent"> 
  2.  
  3.         <Canvas Background="CadetBlue"> 
  4.  
  5.             <Rectangle Canvas.ZIndex="11" Fill="Red" Width="200" Height="200" Name="rect1" Canvas.Left="99" Canvas.Top="43"></Rectangle> 
  6.  
  7.             <Rectangle Canvas.ZIndex="21" Fill="Black" Width="100" Height="100" Name="rect2" Canvas.Left="236" Canvas.Top="154"></Rectangle> 
  8.  
  9.         </Canvas> 
  10.  
  11.     </Grid> 

 

 效果为1-2：

 容器控件Canvas_容器控件Canvas_02

1-2

 示例二：如图1-3 

 容器控件Canvas_容器控件Canvas_03

 1-3

 附带代码：

 XAML代码：

  1. <Grid x:Name="LayoutRoot" Background="Transparent"> 
  2.  
  3.         <Canvas Width="400" Height="400"  VerticalAlignment="Top" > 
  4.  
  5.             <Ellipse Name="ellipse1" Width="133" Height="127" Fill="Red" Canvas.Left="85" Canvas.Top="76"></Ellipse> 
  6.  
  7.             <Ellipse Name="ellipse2" Width="100" Height="100" Fill="Blue" Canvas.Left="169" Canvas.Top="137"></Ellipse> 
  8.  
  9.          </Canvas>     
  10.  
  11.         <Button Height="71" Click="up_Click" Width="80" Name="up" Content="上" Margin="125,406,275,290"></Button> 
  12.  
  13.         <Button Height="71" Click="right_Click" Width="80" Name="right" Content="右" Margin="211,469,189,227"></Button> 
  14.  
  15.         <Button Height="71" Click="down_Click" Width="80" Name="down" Content="下" Margin="125,470,275,226"></Button> 
  16.  
  17.         <Button Height="71" Click="left_Click" Width="80" Name="left" Content="左" Margin="39,470,0,228" HorizontalAlignment="Left"></Button> 
  18.  
  19.         <Button Content="前" Click="fore_Click"  Name="fore" Height="71" Margin="0,407,57,290" Width="80" HorizontalAlignment="Right" /> 
  20.  
  21.         <Button Content="后" Click="back_Click" Name="back" Height="71" Margin="343,471,57,226" Width="80" /> 
  22.  
  23.     </Grid> 

 C#代码：

  1.        private void up_Click(object sender, RoutedEventArgs e) 
  2.  
  3.         { 
  4.  
  5.             Canvas.SetTop(ellipse1,Canvas.GetTop(ellipse1)+10); 
  6.  
  7.         } 
  8.  
  9.   
  10.  
  11.         private void right_Click(object sender, RoutedEventArgs e) 
  12.  
  13.         { 
  14.  
  15.             Canvas.SetLeft(ellipse1,Canvas.GetLeft(ellipse1)+10); 
  16.  
  17.         } 
  18.  
  19.   
  20.  
  21.         private void down_Click(object sender, RoutedEventArgs e) 
  22.  
  23.         { 
  24.  
  25.             Canvas.SetTop(ellipse1, Canvas.GetTop(ellipse1) - 10); 
  26.  
  27.         } 
  28.  
  29.   
  30.  
  31.         private void left_Click(object sender, RoutedEventArgs e) 
  32.  
  33.         { 
  34.  
  35.             Canvas.SetLeft(ellipse1, Canvas.GetLeft(ellipse1) - 10); 
  36.  
  37.         } 
  38.  
  39.   
  40.  
  41.         private void fore_Click(object sender, RoutedEventArgs e) 
  42.  
  43.         { 
  44.  
  45.             Canvas.SetZIndex(ellipse1,1); 
  46.  
  47.         } 
  48.  
  49.   
  50.  
  51.         private void back_Click(object sender, RoutedEventArgs e) 
  52.  
  53.         { 
  54.  
  55.             Canvas.SetZIndex(ellipse1,0); 
  56.  
  57.         } 

 示例三：

  1. <!--LayoutRoot contains the root grid where all other page content is placed--> 
  2.    <Grid x:Name="LayoutRoot" Background="Transparent"> 
  3.        <!--ContentPanel - place additional content here--> 
  4.        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="1 0 0 0"> 
  5.            <Canvas> 
  6.                <Canvas.Resources> 
  7.                    <Style x:Key="ellipseStyle" TargetType="Ellipse"> 
  8.                        <Setter Property="Width" Value="100" /> 
  9.                        <Setter Property="Height" Value="100" /> 
  10.                        <Setter Property="Stroke" Value="{StaticResource PhoneAccentBrush}" /> 
  11.                        <Setter Property="StrokeThickness" Value="10" /> 
  12.                    </Style> 
  13.                </Canvas.Resources> 
  14.                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="0" Canvas.Top="0" /> 
  15.                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="52" Canvas.Top="53" /> 
  16.                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="116" Canvas.Top="92" /> 
  17.                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="190" Canvas.Top="107" /> 
  18.                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="263" Canvas.Top="92" /> 
  19.                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="326" Canvas.Top="53" /> 
  20.                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="380" Canvas.Top="0" /> 
  21.            </Canvas> 
  22.        </Grid> 
  23.    </Grid> 

 效果图： 

 容器控件Canvas_容器控件Canvas_04