了解

WPF中所有布局如下，我們一一嘗試實(shí)現(xiàn)，本文檔主要以圖形化的形式展示每個(gè)布局的功能。

• 布局：?Border、?BulletDecorator、?Canvas、?DockPanel、?Expander、?Grid、?GridView、?GridSplitter、?GroupBox、?Panel、?ResizeGrip、?Separator、?ScrollBar、?ScrollViewer、?StackPanel、?Thumb、?Viewbox、?VirtualizingStackPanel、?Window和?WrapPanel。

布局

Border（邊框）

主要用于繪制另一個(gè)元素四周的邊框和/或背景樣式。

Border?只能有一個(gè)子級(jí)。 若要顯示多個(gè)子元素，需要在父?Border內(nèi)放置一個(gè)附加Panel元素。 然后，可以在該?Panel?元素中放置子元素。（以下展示存放兩個(gè)元素，就會(huì)出現(xiàn)報(bào)錯(cuò)）

如果要在內(nèi)容周圍顯示邊框，必須將元素放在父?Border?元素中。

效果

代碼

        <!--margin為外邊距--><!--borderthickness為邊框的厚度--><Border BorderBrush="Green" BorderThickness="10" Margin="10,10,663,322" Background="Gray"><Label Content="border展示"/></Border>

BulletDecorator（子彈頭裝飾）

表示一個(gè)布局控件，該控件將項(xiàng)目符號(hào)與另一個(gè)可視對(duì)象對(duì)齊。

?BulletDecorator簡(jiǎn)單來說就是用來控制項(xiàng)目布局的，其布局方式分為：從左往右（默認(rèn)）、從右往左；是通過FlowDirection屬性來設(shè)置的；

效果

可能遇到的問題

讀者如果遇到運(yùn)行前圖片可以顯示但是運(yùn)行后圖片顯示不了的情況，右鍵圖片屬性將其生成操作更改為資源，并重寫生成項(xiàng)目解決方案

?BulletDecorator只能添加一個(gè)子元素，可以配合WrapPanel、StackPanel等控件一起使用，進(jìn)行布局。

代碼

        <!--VerticalAlignment垂直對(duì)齊--><BulletDecorator Margin="0,118,0,0" VerticalAlignment="Top" Background="Yellow"><BulletDecorator.Bullet><Image Source="images\Z_W_H_.png" Height="20"/></BulletDecorator.Bullet><!--TextWrapping文字換行 NoWrap不進(jìn)行換行將所有元素都顯示在同一行上 Wrap按字符換行 WrapWithOverflow按空格換行,并且即使該單詞顯示不出來也不換行--><TextBlock FontSize="20" Width="264" TextWrapping="NoWrap" HorizontalAlignment="Left" Foreground ="Purple">A Simple BulletDecorator</TextBlock></BulletDecorator><BulletDecorator Margin="0,148,0,0" VerticalAlignment="Top" Background="Yellow" FlowDirection="RightToLeft"><BulletDecorator.Bullet><Image Source="images\Z_W_H_.png" Height="20"/></BulletDecorator.Bullet><!--TextWrapping文字換行 NoWrap不進(jìn)行換行將所有元素都顯示在同一行上 Wrap按字符換行 WrapWithOverflow按空格換行,并且即使該單詞顯示不出來也不換行--><TextBlock FontSize="20" Width="264" TextWrapping="NoWrap" HorizontalAlignment="Left" Foreground ="Purple">A Simple BulletDecorator</TextBlock></BulletDecorator>

Canvas（畫布）

定義一個(gè)區(qū)域，可在其中使用相對(duì)于?Canvas?區(qū)域的坐標(biāo)以顯式方式來定位子元素。通過top，left，bottom，right設(shè)置相對(duì)于父元素的位置

效果

代碼

        <Canvas Margin="10,178,554,42"><Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/><Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/><Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/></Canvas>

DockPanel（?？棵姘?#xff09;

定義一個(gè)區(qū)域，從中可以按相對(duì)位置水平或垂直排列各個(gè)子元素。

?？棵姘孱愃朴赪inForm中控件的Dock屬性。DockPanel會(huì)對(duì)每個(gè)子元素進(jìn)行排序，并將根據(jù)指定的邊進(jìn)行?？?#xff0c;多個(gè)?？吭谕瑐?cè)的元素則按順序排序。在DockPanel中，指定?？窟叺目丶?#xff0c;會(huì)根據(jù)定義的順序占領(lǐng)邊角，所有控件絕不會(huì)交疊。

默認(rèn)情況下，后添加的元素只能使用剩余空間，無論對(duì)DockPanel的最后一個(gè)子元素設(shè)置任何?？恐?#xff0c;該子元素都將始終填滿剩余的空間。如果不希望最后一個(gè)元素填充剩余區(qū)域，可以將DockPanel屬性LastChildFill設(shè)置為false，還必須為最后一個(gè)子元素顯式指定停靠方向。

效果一

代碼一

        <DockPanel Margin="526,285,0,0"><Button DockPanel.Dock="Left" Content="ButtonLeft"></Button><Button DockPanel.Dock="Top" Content="ButtonTop"></Button><Button DockPanel.Dock="Right" Content="ButtonRight"></Button><Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button><Button  Content="ButtonTop"></Button></DockPanel>

效果二

代碼二

        <DockPanel LastChildFill="False" Margin="165,285,279,0" ><Button DockPanel.Dock="Left" Content="ButtonLeft"></Button><Button DockPanel.Dock="Top" Content="ButtonTop"></Button><Button DockPanel.Dock="Right" Content="ButtonRight"></Button><Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button><Button  DockPanel.Dock="Top" Content="最后一個(gè)Button不填充剩余空間"></Button></DockPanel>

Expander（擴(kuò)展器）

表示一種控件，該控件顯示具有可折疊內(nèi)容顯示窗口的標(biāo)題。

效果

代碼

        <!--HorizontalAlignment水平對(duì)齊--><!--ExpandDirection內(nèi)容窗口的打開方向--><!--Header設(shè)置控件的標(biāo)題--><!--IsExpanded初始的時(shí)候窗口是否可見--><Expander Name="myExpander" Background="Tan"  HorizontalAlignment="Left" Header="My Expander"  ExpandDirection="Down" IsExpanded="True" Width="100" Margin="165,10,0,322"><TextBlock TextWrapping="Wrap">Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua</TextBlock></Expander>

Grid（網(wǎng)格）

定義由列和行組成的靈活的網(wǎng)格區(qū)域。

效果

代碼

        <!--ShowGridLines網(wǎng)格線在此 Grid 中是否可見。--><Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100" Margin="362,13,0,0"><!--ColumnDefinitions列定義--><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><!--RowDefinitions行定義--><Grid.RowDefinitions><RowDefinition /><RowDefinition /><RowDefinition /><RowDefinition /></Grid.RowDefinitions><!--ColumnSpan指示 Grid 中的子內(nèi)容所跨越的總列數(shù)。--><TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock><!--Row顯示 Grid 中的哪個(gè)子內(nèi)容行。--><!--Column顯示 Grid 中的子內(nèi)容的列。--><!--FontWeight指定所需的字體粗細(xì)--><TextBlock FontSize="12" FontWeight="ExtraLight" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock><TextBlock FontSize="12" FontWeight="Black" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock><TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock><TextBlock Grid.Row="2" FontWeight="DemiBold" Grid.Column="0">50000</TextBlock><TextBlock Grid.Row="2" FontWeight="ExtraBlack" Grid.Column="1">100000</TextBlock><TextBlock Grid.Row="2" FontWeight="ExtraBold" Grid.Column="2">150000</TextBlock><TextBlock FontSize="16" FontWeight="Heavy" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock></Grid>

GridView（顯示數(shù)據(jù)表格）

表示?ListView?控件的以列形式顯示數(shù)據(jù)項(xiàng)的視圖模式。

GridView視圖模式是ListView控件的視圖模式中的一種。

效果

代碼

前端

        <ListView x:Name="UserListView"  Margin="236,148,350,156"><ListView.View><GridView><GridView.Columns><GridViewColumn DisplayMemberBinding="{Binding UserName}" Header="用戶名"/><GridViewColumn DisplayMemberBinding="{Binding Password}" Header="密碼"/><GridViewColumn DisplayMemberBinding="{Binding Level}" Header="權(quán)限等級(jí)"/></GridView.Columns></GridView></ListView.View></ListView>

后臺(tái)

    public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void Window_Loaded(object sender, RoutedEventArgs e){UserListView.ItemsSource = GetNameList();}public List<UserList> GetNameList(){List<UserList> list = new List<UserList>();list.Add(new UserList() { Level = 1, UserName = "John", Password = "Doe" });list.Add(new UserList() { Level = 2, UserName = "Jane", Password = "Doe" });list.Add(new UserList() { Level = 3, UserName = "Tom", Password = "Smith" });list.Add(new UserList() { Level = 4, UserName = "Jerry", Password = "Wang" });list.Add(new UserList() { Level = 5, UserName = "Linda", Password = "Li" });return list;}}public class UserList{ public string UserName { get;set; }public string Password { get;set; }public int Level {get;set; }}

GridSplitter

表示重新分布?Grid?控件的列間距或行間距的控件。

效果

代碼

        <Grid Margin="487,217,67,176" ShowGridLines="True" Background="AliceBlue"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><!--通過 GridSplitter 覆蓋列的邊緣來調(diào)整 中 Grid 列的大小。--><GridSplitter Grid.Column ="0" Background="Blue" Height="10" HorizontalAlignment="Stretch" VerticalAlignment="Top"/><GridSplitter Grid.Column ="0" Background="Blue" Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"/><GridSplitter Grid.Column ="0" Background="Blue" Width="10" HorizontalAlignment="Left" VerticalAlignment="Stretch"/><GridSplitter Grid.Column ="1" Background="Blue" Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"/><Border Grid.Row="0" Grid.Column="0" BorderBrush="Red" BorderThickness="2"></Border></Grid><Grid Margin="514,63,40,330" ShowGridLines="True" Background="AliceBlue"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition Width="Auto"/><ColumnDefinition/></Grid.ColumnDefinitions><!--定義 一個(gè) GridSplitter ，以重設(shè)中的 Grid 列大小，并占用 中的 Grid列。--><!--ShowsPreview指示 GridSplitter 控件在用戶拖動(dòng)控件時(shí)是否更新列大小或行大小。--><GridSplitter Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Background="Black"  ShowsPreview="True" Width="5" /><Border Grid.Row="0" Grid.Column="0" BorderBrush="Red" BorderThickness="2"></Border></Grid>

GroupBox

表示一個(gè)控件，該控件用于創(chuàng)建具有用戶界面 (UI) 內(nèi)容邊框和標(biāo)題的容器。

效果

代碼

前端

        <GroupBox Margin="1070,0,685,0"><GroupBox.Header><Label>Employee Data</Label></GroupBox.Header><StackPanel><TabControl Name="myTabControl" TabStripPlacement="Top"  Margin="0, 0, 0, 10" Height="350" ><TabItem Name="PersonalInfo"><TabItem.Header>_Personal Info</TabItem.Header><StackPanel><TextBlock>Employee</TextBlock><TextBlock>Select your name</TextBlock><ListBox Name="empName" SelectionChanged="updateSummary"><ListBoxItem IsSelected="true">Esther</ListBoxItem><ListBoxItem>George</ListBoxItem><ListBoxItem>Alan</ListBoxItem><ListBoxItem>Eric</ListBoxItem></ListBox></StackPanel></TabItem><TabItem><TabItem.Header>_Job Info</TabItem.Header><StackPanel><TextBlock>Select a job</TextBlock><ListBox Name ="job" SelectionChanged="updateSummary"><ListBoxItem IsSelected="true">Programmer</ListBoxItem><ListBoxItem>Tester</ListBoxItem><ListBoxItem>Writer</ListBoxItem><ListBoxItem>Manager</ListBoxItem></ListBox></StackPanel></TabItem><TabItem Name="Skill"><TabItem.Header>_Skill</TabItem.Header><StackPanel><TextBlock>Select your strongest skill</TextBlock><ListBox Name="skills" SelectionChanged="updateSummary"><ListBoxItem IsSelected="true">C#</ListBoxItem><ListBoxItem>Visual Basic</ListBoxItem><ListBoxItem>.NET</ListBoxItem><ListBoxItem>JScript</ListBoxItem></ListBox></StackPanel></TabItem><TabItem Name="Summary" ><TabItem.Header>Su_mmary</TabItem.Header><StackPanel><TextBlock Name="emp"/><TextBlock Name="ejob"/><TextBlock Name="eskill"/></StackPanel></TabItem></TabControl><Button Content="Show Summary" Click="goToSummaryTab"/></StackPanel></GroupBox>

Panel

為所有?Panel?元素提供基類。 使用?Panel?元素放置和排列 WPF應(yīng)用程序中的子對(duì)象。

效果

代碼

        <StackPanel Margin="832,48,1083,288"><Button>Button 1</Button><Button>Button 2</Button></StackPanel>

ResizeGrip

表示?Thumb?控件的一種實(shí)現(xiàn)，該控件使?Window?能改變其自身的大小。

ResizeGrip 定義為 的可視化樹的一?Window部分。

效果

代碼

Separator

用于分隔項(xiàng)控件中各個(gè)項(xiàng)的控件。

效果

代碼

        <ToolBarTray Background="White" Margin="839,131,1083,276"><ToolBar Band="1" BandIndex="1"><Button Content="1"></Button><Button  Content="1"></Button><Button  Content="1"></Button><Separator/><Button  Content="1"></Button><Button  Content="1"></Button><Button  Content="1"></Button><Separator/><Button  Content="1"></Button><Button  Content="1"></Button></ToolBar></ToolBarTray>

ScrollBar

表示提供滾動(dòng)條的控件，該滾動(dòng)條具有一個(gè)滑動(dòng)?Thumb，其位置對(duì)應(yīng)于一個(gè)值。

效果

代碼

<ScrollBar Orientation="Horizontal" Width ="4in"Scroll="OnScroll" Minimum="1" Maximum="100" />

ScrollViewer

表示可包含其他可視元素的可滾動(dòng)區(qū)域。

效果

代碼

        <ScrollViewer HorizontalScrollBarVisibility="Auto" Margin="1446,28,421,197"><StackPanel VerticalAlignment="Top" HorizontalAlignment="Left"><TextBlock TextWrapping="Wrap" Margin="0,0,0,20">Scrolling is enabled when it is necessary. Resize the window, making it larger and smaller.</TextBlock><Rectangle Fill="Red" Width="500" Height="500"></Rectangle></StackPanel></ScrollViewer>

StackPanel

?效果

代碼

        <StackPanel Margin="832,48,1083,288"><Button>Button 1</Button><Button>Button 2</Button></StackPanel>

Thumb

表示可以由用戶拖動(dòng)的控件。?Thumb還可用于調(diào)整控件的大小。 例如，?Thumb?窗口一角的控件可以提供一個(gè)位置，供用戶使用鼠標(biāo)單擊以開始調(diào)整大小操作。

效果

代碼

Viewbox

定義一個(gè)內(nèi)容修飾器，以便拉伸或縮放單一子項(xiàng)使其填滿可用的控件。

效果

代碼

VirtualizingStackPanel

在水平或垂直的一行中排列并顯示內(nèi)容。

效果

代碼

Window（窗口）

提供創(chuàng)建、配置、顯示和管理窗口和對(duì)話框的生存期的能力。

我們新建一個(gè)wpf應(yīng)用程序后，就包含一個(gè)window布局元素

用戶與獨(dú)立應(yīng)用程序之間的交互點(diǎn)是一個(gè)窗口。

效果

代碼

<Window x:Class="WpfApp2.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:WpfApp2"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"></Window>

WrapPanel

按從左到右的順序位置定位子元素，在包含框的邊緣處將內(nèi)容切換到下一行。 后續(xù)排序按照從上至下或從右至左的順序進(jìn)行，具體取決于?Orientation?屬性的值。

效果

代碼

        <Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2" Margin="1766,88,0,0"><WrapPanel Background="LightBlue" Width="200" Height="100"><Button Width="200">Button 1</Button><Button>Button 2</Button><Button>Button 3</Button><Button>Button 4</Button></WrapPanel></Border>

參考文獻(xiàn)

WPF 介紹 | Microsoft Learn

WPF 介紹 | Microsoft Learn

WPF圖片問題：運(yùn)行前可以看見，運(yùn)行后不見了_wpf運(yùn)行圖片不顯示-CSDN博客

WPF教程四：布局之DockPanel面板 - .NET開發(fā)菜鳥 - 博客園 (cnblogs.com)

C# Wpf Binding 使用詳解_c# binding-CSDN博客