容器控件Canvas的介绍及用法

本篇内容介绍了“容器控件Canvas的介绍及用法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

 Canvas控件

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

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

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

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

 示例一：

 附带代码：

<Grid x:Name="LayoutRoot"  Width="400" Height="400" Background="Transparent">          <Canvas Background="CadetBlue">              <Rectangle Canvas.ZIndex="2" Fill="Red" Width="200" Height="200" Name="rect1" Canvas.Left="99" Canvas.Top="43"></Rectangle>              <Rectangle Canvas.ZIndex="1" Fill="Black" Width="100" Height="100" Name="rect2" Canvas.Left="236" Canvas.Top="154"></Rectangle>          </Canvas>      </Grid>

 效果为1-1：

1-1

 修改ZIndex改变叠加顺序：

<Grid x:Name="LayoutRoot"  Width="400" Height="400" Background="Transparent">          <Canvas Background="CadetBlue">              <Rectangle Canvas.ZIndex="11" Fill="Red" Width="200" Height="200" Name="rect1" Canvas.Left="99" Canvas.Top="43"></Rectangle>              <Rectangle Canvas.ZIndex="21" Fill="Black" Width="100" Height="100" Name="rect2" Canvas.Left="236" Canvas.Top="154"></Rectangle>          </Canvas>      </Grid>

 效果为1-2：

1-2

 示例二：如图1-3 

 1-3

 附带代码：

 XAML代码：

<Grid x:Name="LayoutRoot" Background="Transparent">          <Canvas Width="400" Height="400"  VerticalAlignment="Top" >              <Ellipse Name="ellipse1" Width="133" Height="127" Fill="Red" Canvas.Left="85" Canvas.Top="76"></Ellipse>              <Ellipse Name="ellipse2" Width="100" Height="100" Fill="Blue" Canvas.Left="169" Canvas.Top="137"></Ellipse>           </Canvas>              <Button Height="71" Click="up_Click" Width="80" Name="up" Content="上" Margin="125,406,275,290"></Button>          <Button Height="71" Click="right_Click" Width="80" Name="right" Content="右" Margin="211,469,189,227"></Button>          <Button Height="71" Click="down_Click" Width="80" Name="down" Content="下" Margin="125,470,275,226"></Button>          <Button Height="71" Click="left_Click" Width="80" Name="left" Content="左" Margin="39,470,0,228" HorizontalAlignment="Left"></Button>          <Button Content="前" Click="fore_Click"  Name="fore" Height="71" Margin="0,407,57,290" Width="80" HorizontalAlignment="Right" />          <Button Content="后" Click="back_Click" Name="back" Height="71" Margin="343,471,57,226" Width="80" />      </Grid>

 C#代码：

       private void up_Click(object sender, RoutedEventArgs e)          {              Canvas.SetTop(ellipse1,Canvas.GetTop(ellipse1)+10);          }             private void right_Click(object sender, RoutedEventArgs e)          {              Canvas.SetLeft(ellipse1,Canvas.GetLeft(ellipse1)+10);          }             private void down_Click(object sender, RoutedEventArgs e)          {              Canvas.SetTop(ellipse1, Canvas.GetTop(ellipse1) - 10);          }             private void left_Click(object sender, RoutedEventArgs e)          {              Canvas.SetLeft(ellipse1, Canvas.GetLeft(ellipse1) - 10);          }             private void fore_Click(object sender, RoutedEventArgs e)          {              Canvas.SetZIndex(ellipse1,1);          }             private void back_Click(object sender, RoutedEventArgs e)          {              Canvas.SetZIndex(ellipse1,0);          }

 示例三：

<!--LayoutRoot contains the root grid where all other page content is placed-->    <Grid x:Name="LayoutRoot" Background="Transparent">        <!--ContentPanel - place additional content here-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="1 0 0 0">            <Canvas>                <Canvas.Resources>                    <Style x:Key="ellipseStyle" TargetType="Ellipse">                        <Setter Property="Width" Value="100" />                        <Setter Property="Height" Value="100" />                        <Setter Property="Stroke" Value="{StaticResource PhoneAccentBrush}" />                        <Setter Property="StrokeThickness" Value="10" />                    </Style>                </Canvas.Resources>                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="0" Canvas.Top="0" />                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="52" Canvas.Top="53" />                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="116" Canvas.Top="92" />                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="190" Canvas.Top="107" />                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="263" Canvas.Top="92" />                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="326" Canvas.Top="53" />                <Ellipse Style="{StaticResource ellipseStyle}" Canvas.Left="380" Canvas.Top="0" />            </Canvas>        </Grid>    </Grid>

 效果图： 

“容器控件Canvas的介绍及用法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！