容器控件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的介紹及用法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！