您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“容器控件Canvas的介绍及用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
Canvas控件
Canvas :绝对布局,即指定控件在容器中的绝对位置。
Canvas.Left、Canvas.Top :设置子控件的左上角相对于容器左上角的位置,
Canvas.ZIndex: 改变叠加的顺序,数值越大越靠上。
在C#中设置子控件相对于Canvas的坐标:
Canvas.SetLeft(参数列表); |
Canvas.SetRight(参数列表); |
Canvas.SetZIndex(参数列表); |
示例一:
附带代码:
<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的介绍及用法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。