快捷導(dǎo)航

WPF使用Canvas畫布面板布局

更新時(shí)間：2022年02月25日 11:01:23 作者：.NET開發(fā)菜鳥

這篇文章介紹了WPF使用Canvas畫布面板布局的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Canvas：畫布面板

畫布，用于完全控制每個(gè)元素的精確位置。他是布局控件中最為簡(jiǎn)單的一種，直接將元素放到指定位置，主要來布置圖面。使用Canvas，必須指定一個(gè)子元素的位置（相對(duì)于畫布），否則所有元素都將出現(xiàn)在畫布的左上角。調(diào)整位置用Left、Right、Top和Bottom四個(gè)附加屬性。如果Canvas是窗口主元素（即最外層的布局面板是Canvas），用戶改變窗口大小時(shí)，Canvas也會(huì)隨之變化，子元素的位置也會(huì)隨之移動(dòng)，以保證相對(duì)于Canvas的位置屬性不變。

Canvas允許子元素的部分或全部超過其邊界，默認(rèn)不會(huì)裁剪子元素，同時(shí)可以使用負(fù)坐標(biāo)，即溢出的內(nèi)容會(huì)顯示在Canvas外面，這是因?yàn)槟J(rèn) ClipToBounds=”False”，因此畫布不需要指定大小。如果想復(fù)制畫布內(nèi)容，將ClipToBounds設(shè)為true即可。

1、子元素不超出邊界

使用XAML代碼實(shí)現(xiàn)：

<Window x:Class="WpfDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
    <Canvas>
        <TextBox Width="100" BorderBrush="Blue"></TextBox>
        <TextBox Canvas.Left="200" Canvas.Top="50" Width="100" BorderBrush="Green"></TextBox>
        <Button Height="20" Canvas.Right="10" Canvas.Bottom="10" Content="按鈕"></Button>
    </Canvas>
</Window>

2、子元素超出邊界

使用XAML代碼實(shí)現(xiàn)：

<Window x:Class="WpfDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
    <Canvas>
        <TextBox Width="100" BorderBrush="Blue"></TextBox>
        <TextBox Canvas.Left="200" Canvas.Top="50" Width="100" BorderBrush="Green"></TextBox>
        <Button Height="200" Canvas.Right="10" Canvas.Bottom="-130" Content="按鈕"></Button>
    </Canvas>
</Window>

在XAML設(shè)計(jì)界面，超出的部分不會(huì)進(jìn)行裁剪，如圖所示：

如果將ClipToBounds屬性設(shè)為true，在設(shè)計(jì)界面將會(huì)對(duì)子元素的超出部分進(jìn)行裁剪：

注意：要說明一點(diǎn)Canvas內(nèi)的子控件不能使用兩個(gè)以上的Canvas附加屬性，如果同時(shí)設(shè)置Canvas.Left和Canvas.Right屬性，那么后者將會(huì)被忽略。

ZIndex屬性

Canvas面板中可能會(huì)有多個(gè)相互重疊的元素，可以設(shè)置Canvas的ZIndex附加屬性，來控制他們的重疊方式 ZIndex屬性默認(rèn)值都是0，屬性值必須是整數(shù)。

如圖所示：

除此之外，我們還可以通過代碼的方式設(shè)置ZIndex的值，代碼如下：

using System.Windows;
using System.Windows.Controls;

namespace CanvasDemo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 點(diǎn)擊按鈕，修改ZIndex屬性值
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btnClick_Click(object sender, RoutedEventArgs e)
        {
            // 設(shè)置按鈕的ZIndex屬性
            Canvas.SetZIndex(this.btn, 2);
        }
    }
}

到此這篇關(guān)于WPF使用Canvas畫布面板布局的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: