WPF中常用的布局容器介紹

更新時間：2022年04月21日 14:04:37 作者：農(nóng)碼一生

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

一、簡介

所有的WPF布局容器都派生自System.Windows.Controls.Panel。Panel繼承自FrameworkElement。在Panel中有一個比較重要的屬性是UIElementCollection 類型的Children屬性,UIElementCollection是一個有序的集合。我們可以使用繼承自Panel的類來重寫MeasureOverride(),ArrangeOverride()實現(xiàn)自定義面板。

常用的布局容器：
Border不是布局面板，但是經(jīng)過幾個大佬的提醒，用好他真的很重要，所以我就放在第一個了。

StackPanel: 堆棧面板，水平或垂直放置元素。
WrapPanel:可換行的行中放置元素，在水平方向上從左向右放置元素，換行后也是從左向右。在垂直方向上，從上到下放置元素，在切換列后也是從上到下。
DockPanel: 根據(jù)容器的整個邊界調(diào)整元素。
Grid:在行列表格中排列元素。
UniformGrid:強制所有單元格具有相同尺寸。
Canvas:使用固定坐標(biāo)絕對定位元素。
ScrollViewer:通過添加滾動條可以使當(dāng)前過長布局內(nèi)的內(nèi)容縱向或者橫向滾動。再有限的區(qū)域內(nèi)可以通過滾動呈現(xiàn)更多的內(nèi)容。

二、代碼案例

1.Border

Border不是布局面板，但是經(jīng)常與布局類的面板一起配合使用，所以先介紹Border。Border的主要作用是給元素添加邊框，這個元素可以理解為一個布局面板，一個控件等等。他包含設(shè)置邊框的2個屬性，BorderBrush用來設(shè)置顏色，BorderThickness用來設(shè)置寬度。CornerRadius設(shè)置圓角。而Padding和Margin一個設(shè)置邊框和里面元素的間距，一個設(shè)置邊框和其他臨近元素的間距。而Background則是設(shè)置border所有內(nèi)容的顏色。

案例XAML代碼：

<Window x:Class="Wpf_Panel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Panel"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="800">
    <StackPanel>
        <!--BorderBrush用來設(shè)置顏色-->
        <!--BorderThickness用來設(shè)置寬度-->
        <!--CornerRadius設(shè)置圓角-->
        <!--Padding設(shè)置邊框和里面元素的間距-->
        <!--Margin設(shè)置邊框和其他臨近元素的間距-->
        <!--Background則是設(shè)置border所有內(nèi)容的顏色-->
        <Border Background="Bisque" BorderBrush="Coral"  BorderThickness="3">
            <Button Content="Button A" Width="120"/>
        </Border>
        <Border BorderBrush="Red" BorderThickness="3" Margin="5">
            <Button Content="Button B"/>
        </Border>
        <Border BorderBrush="DarkRed" BorderThickness="3" Background="Red" Padding="5">
            <Button Content="Button C"/>
        </Border>
    </StackPanel>
    <!--<Grid>
        
    </Grid>-->
</Window>

運行效果：

2.StackPanel

StackPanel面板可以在單行或者單列以堆棧的形式排列子元素。默認情況下StackPanel面板按從上到下的順序排列元素。如果不指定寬度、則默認寬度和StackPanel面板寬度一致，如果StackPanel寬度發(fā)生變化，則按鈕也會拉伸以適應(yīng)變化。而如果設(shè)置了寬度、就不會跟面板寬度變更發(fā)生變化。但是想要設(shè)計出自己想要的好看布局，還需要更多的元素，先看一個基本的例子。

案例XAML代碼：

<Window x:Class="Wpf_Panel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Panel"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="800">
    <StackPanel x:Name="root_spanel" >
        <Button Content="點我切換方向" Click="OrientationTranslator_Click"/>
        <Button Content="點我添加元素到面板中" Click="AddElementToPanel_Click"/>
        <Button x:Name="btn_FixedWidth" Content="點我手動設(shè)置寬度為120" Click="SetCurrentWidth_Click"/>
        <Button Content="大家一定要努力學(xué)習(xí)C#！?。?/>
    </StackPanel>
</Window>

后臺邏輯代碼：

        private void OrientationTranslator_Click(object sender, RoutedEventArgs e)
        {
            root_spanel.Orientation = root_spanel.Orientation == Orientation.Horizontal ? Orientation.Vertical : Orientation.Horizontal;
        }

        private void AddElementToPanel_Click(object sender, RoutedEventArgs e)
        {
            Button btn = new Button();
            btn.Content = "我是新添加的Button";
            root_spanel.Children.Add(btn);
        }

        private void SetCurrentWidth_Click(object sender, RoutedEventArgs e)
        {
            btn_FixedWidth.Width = 120;
        }

運行效果：

3.WrapPanel

WrapPanel面板可以一次排列一行或一列然后再換行繼續(xù)排列，和StackPanel一樣，可以通過設(shè)置Orientation屬性來設(shè)置當(dāng)前是以水平還是垂直來排列子元素。因為是根據(jù)窗體變化演示布局排列，這個只有XAML。

案例XAML代碼：

<Window x:Class="Wpf_Panel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Panel"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="800">
    <WrapPanel>
        <Button Content="《老黃?！? Width="120"/>
        <Button Content="臧克家"  Width="120"/>
        <Button Content="塊塊荒田水和泥，"  Width="120"/>
        <Button Content="深翻細作走東西。"  Width="120"/>
        <Button Content="老牛亦解韶光貴，"  Width="120"/>
        <Button Content="不待揚鞭自奮蹄。"  Width="120"/>
    </WrapPanel>
</Window>

運行效果：

4.DockPanel

DockPanel面板與StackPanel面板類似，但是DockPanel可以通過設(shè)置Dock附加屬性設(shè)置子元素?？康倪叀ock的值為Left、Right、Top、Bottom。通過設(shè)置子元素再DockPanel面板中的Dock屬性?？梢孕薷淖釉卦貲ockPanel面板內(nèi)的位置?？梢酝ㄟ^LastChildFill設(shè)置為true來告訴DockPanel面板使最后一個元素占滿剩余控件。而設(shè)置的?？宽樞驎绊懖季纸Y(jié)果。

案例XAML代碼：

<Window x:Class="Wpf_Panel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Panel"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="900">
    <DockPanel LastChildFill="True">
        <Button DockPanel.Dock="Top" Content="今天學(xué)習(xí)了嗎？"/>
        <Button DockPanel.Dock="Left" Content="今天寫代碼了？"/>
        <Button DockPanel.Dock="Right" Content="隨便放點東西"/>
        <Button DockPanel.Dock="Right" VerticalAlignment="Center" Content="真的理解了嗎？要不要再多敲幾遍。"/>
        <Button DockPanel.Dock="Bottom" Content="程序員不學(xué)習(xí)寫代碼，還能干什么呢?"/>
        <Button DockPanel.Dock="Bottom" Content="程序員不學(xué)習(xí)寫代碼，還能干什么呢?"/>

    </DockPanel>
</Window>

運行效果：

5.Grid

Grid面板是把顯示內(nèi)容分割到不可見的行列網(wǎng)格中。通過設(shè)置行列和對應(yīng)的寬高占比。來進行網(wǎng)格布局。Grid布局再平時使用的比較多。大部分都是用來做布局的嵌套，設(shè)計外框各個部分的比例，然后在子元素中嵌套其他布局控件。來實現(xiàn)區(qū)域的劃分。
在使用Grid面板時，需要用到一個叫做附加依賴項屬性的參數(shù)。在布局相關(guān)的內(nèi)容里不會去講什么是附加依賴項屬性，這個會在依賴項屬性中去講解，這里只有了解就行。因為這個針對于Grid布局來說是固定寫法。
我們添加一個三行三列的Grid面板。Grid.RowDefinitions和Grid.ColumnDefinitions里面的內(nèi)容是我們設(shè)置的Gird的行列數(shù)。各有3個，代表我們是一個三行三列的網(wǎng)格。我們沒有設(shè)置寬高。就會默認為是等分的。

案例XAML代碼：

<Window x:Class="Wpf_Panel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Panel"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="900"> 
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!--各列平分寬度-->
            <ColumnDefinition/>
            <ColumnDefinition />
            <ColumnDefinition />
            
            <!--要求左邊一列寬度固定，右邊一列以文本內(nèi)容寬度適配，剩下的寬度區(qū)域都給中間的列。為了提高代碼可讀性，不建議省略Width="*"雖然都是一樣的。-->
            <!--<ColumnDefinition Width="140"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>-->
        </Grid.ColumnDefinitions>
        <!--網(wǎng)格布局設(shè)計好之后。我們需要往里面放置內(nèi)容。我們要使用Grid.Column、Grid.Row這2個附加依賴項屬性來實現(xiàn)把Button放置到不同的網(wǎng)格中-->
        <Button Grid.Column="0" Grid.Row="0" Content="Button Row 1 Column 1"/>
        <Button Grid.Column="1" Grid.Row="0" Content="Button Row 1 Column 2"/>
        <Button Grid.Column="2" Grid.Row="0" Content="Button Row 1 Column 3"/>
        <Button Grid.Column="0" Grid.Row="1" Content="Button Row 2 Column 1"/>
        <Button Grid.Column="1" Grid.Row="1" Content="Button Row 2 Column 2"/>
        <Button Grid.Column="2" Grid.Row="1" Content="Button Row 2 Column 3"/>
        <Button Grid.Column="0" Grid.Row="2" Content="Button Row 3 Column 1"/>
        <Button Grid.Column="1" Grid.Row="2" Content="Button Row 3 Column 2"/>
        <Button Grid.Column="2" Grid.Row="2" Content="Button Row 3 Column 3"/>
    </Grid>
</Window>

運行效果：

我們嘗試運行代碼。就會得到9個一樣大小的Button。我們嘗試拖動窗體大小。不管怎么拖動，應(yīng)該都是等量變化的。

6.UniformGrid

UniformGrid面板的特點是每個單元格始終保持一致的大小。通過設(shè)置行列數(shù)量來分割布局。元素通過放入的前后順序被分配到不同的位置。這個再某些特定場景配合數(shù)據(jù)虛擬化和列表虛擬化使用的還是比較多的。

案例XAML代碼：

<Window x:Class="Wpf_Panel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Panel"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="900">
    <UniformGrid Columns="2" Rows="2">
        <!--按照先來后到的順序，先行后列的放入到行列單元格-->
        <Button Content="Button A"/>
        <Button Content="Button B"/>
        <Button Content="Button C"/>
        <Button Content="Button D"/>
    </UniformGrid>
</Window>

運行效果：

7.Canvas

Canvas是一個基于坐標(biāo)的布局面板。他主要用于構(gòu)建圖形工具的繪圖、Canvas知識再指定的位置放置子元素。并且子元素要提供精確的尺寸。再Canvas中需要設(shè)置Canvas.Left和Canvas.Top屬性。用來設(shè)置相對于原點的left和top。
也可以使用Canvas.Right和Canvas.Bottom。但是Canvas.left和Right不能同時使用，Canvas.Top和Canvas.Bottom也不能同時使用。使用Panel.ZIndex來設(shè)置子元素的層級關(guān)系。

案例XAML代碼：

<Window x:Class="Wpf_Panel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Panel"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="900">
    <Canvas>
        <!--Panel.ZIndex="1"設(shè)置子元素的層級關(guān)系，哪個數(shù)字大，哪個在上面-->
        <Button Content="Button A" Canvas.Left="255" Canvas.Top="70"  Panel.ZIndex="2" Width="80px" Height="30px"/>
        <Button Content="Button B" Canvas.Left="110" Canvas.Top="100"  Width="80px" Height="30px"/>
        <Button Content="Button C" Canvas.Left="295" Canvas.Top="81" Panel.ZIndex="1"  Width="80px" Height="30px"/>
    </Canvas>
</Window>

運行效果：

Button A和Button C的重疊關(guān)系使用Panel.ZIndex來設(shè)置。

8.ScrollViewer

如果要再一個比較小的區(qū)域內(nèi)顯示特別多的內(nèi)容，就需要使用ScrollViewer來進行橫向或縱向滾動了，但是再實際使用過程中往往配合數(shù)據(jù)虛擬化和列表虛擬化來實現(xiàn)支持更多內(nèi)容的滾動效果。不然如果內(nèi)容一旦特別多，ScrollViewer下的內(nèi)容又特別長，每次滾動都會觸發(fā)布局的重新測量和排列。如果不使用虛擬化，會全部重新計算所有的布局元素，會特別卡，導(dǎo)致使用困難。

案例XAML代碼：

<Window x:Class="Wpf_Panel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Panel"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="900">
    <Grid>
        <StackPanel>
            <ScrollViewer Name="scroll" Width="480"  Height="350" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" >
                <TextBlock    Name="txtShowArticle"   Foreground="Gray" Margin="20,10" Loaded="txtShowArticle_Loaded" />
            </ScrollViewer>
        </StackPanel>
    </Grid>
</Window>

后臺邏輯代碼：

        string content = @"中國青年網(wǎng)6月22日電 據(jù)“健康廣東”微信公眾號消息，6月21日0-24時，全省新增2例本土確診病例，深圳報告1例，東莞報告1例。
全省新增境外輸入確診病例5例，廣州報告2例，分別來自法國和阿曼；深圳報告1例，來自印度尼西亞；珠海報告1例，來自孟加拉國；東莞報告1例，來自阿聯(lián)酋。新增境外輸入無癥狀感染者7例，廣州報告3例，2例來自柬埔寨，1例來自阿聯(lián)酋；佛山報告1例，來自柬埔寨；中山報告1例，來自加蓬；肇慶報告2例，均來自印度尼西亞。新增出院16例。
截至6月21日24時，全省累計報告新冠肺炎確診病例2706例（境外輸入1140例）。目前在院221例。
（來源：中國青年網(wǎng)）";
        private void ShowArticle()
        {
            //獲取私信信息           
            StringBuilder strMessage = new StringBuilder();
            strMessage.Append("標(biāo)題:" + "廣東昨日新增2例本土確診病例，深圳、東莞各1例" + "\r\n");
            strMessage.Append("來源：" + "中國青年網(wǎng)" + "\r\n");
            strMessage.Append("發(fā)送時間：" + "2021-06-22 15:31:32" + "\r\n");
            strMessage.Append("發(fā)送內(nèi)容：" + content + "\r\n\n");
            txtShowArticle.Text = strMessage.ToString();
        }
       
        private void txtShowArticle_Loaded(object sender, RoutedEventArgs e)
        {
            ShowArticle();
        }

運行效果：

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

WPF中常用的布局容器介紹

目錄

一、簡介

二、代碼案例

1.Border

2.StackPanel

3.WrapPanel

4.DockPanel

5.Grid

6.UniformGrid

7.Canvas

8.ScrollViewer

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

WPF中常用的布局容器介紹

目錄

一、簡介

二、代碼案例

1.Border

2.StackPanel

3.WrapPanel

4.DockPanel

5.Grid

6.UniformGrid

7.Canvas

8.ScrollViewer

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、簡介

二、代碼案例