了解

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簡單來說就是用來控制項(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（?？棵姘澹?/h3>

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

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

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

效果一

代碼一

        <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, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt ut
                labore 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博客文章來源地址http://www.zghlxwxcb.cn/news/detail-783111.html

到了這里，關(guān)于WPF 布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！