WPF 常用布局方式

KingCruel

已于 2023-09-27 09:53:13 修改

阅读量1.6k

点赞数

分类专栏： WPF 文章标签： wpf javascript 开发语言

于 2022-08-06 16:49:15 首次发布

本文链接：https://blog.csdn.net/KingCruel/article/details/126197508

版权

WPF 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

桌面指南 (WPF .NET)
数据绑定概述 (WPF .NET)

按功能分类的 WPF 控件
下面列出了内置的 WPF 控件：
按钮： Button 和 RepeatButton。
数据显示：DataGrid、ListView 和 TreeView。
日期显示和选项： Calendar 和 DatePicker。
对话框： OpenFileDialog、 PrintDialog和 SaveFileDialog。
数字墨迹： InkCanvas 和 InkPresenter。
文档： DocumentViewer、 FlowDocumentPageViewer、 FlowDocumentReader、 FlowDocumentScrollViewer和 StickyNoteControl。
输入： TextBox、 RichTextBox和 PasswordBox。
布局： Border、 BulletDecorator、 Canvas、 DockPanel、 Expander、 Grid、 GridView、 GridSplitter、 GroupBox、 Panel、 ResizeGrip、 Separator、 ScrollBar、 ScrollViewer、 StackPanel、 Thumb、 Viewbox、 VirtualizingStackPanel、 Window和 WrapPanel。
媒体： Image、 MediaElement和 SoundPlayerAction。
菜单： ContextMenu、 Menu和 ToolBar。
导航： Frame、 Hyperlink、 Page、 NavigationWindow和 TabControl。
选项： CheckBox、 ComboBox、 ListBox、 RadioButton和 Slider。
用户信息： AccessText、 Label、 Popup、 ProgressBar、 StatusBar、 TextBlock和 ToolTip。

Layout
一、Grid（网格面板）
二、StackPanel（栈面板）
三、WrapPanel（环绕面板）
四、DockPanel（停靠面板）
五、UniformGrid（网格,就是Grid的简化版，每个单元格的大小相同）
六、Canvas（画布）
七、ScrollViewer
八、ViewBox
九、Border：装饰控件，此控件用于绘制边框及背景，在Border中只能有一个子控件
*
*
*
一、Grid（网格面板）
Grid为WPF中最常用的布局容器, 作为View中的主要组成部分, 负责框架中整体的页面布局，Grid的网格布局控件，使用网格布局时候需要先确定行数列数。
ShowGridLines：可以设置行业的边距线的显示
Grid.RowDefinitions：可以创建任意【行】, 进行固定高度与百分比高度设置
Grid.ColumnDefinitions：可以创建任意【列】, 进行固定宽度与百分宽度设置
Background：背景色
Grid.Column：内部元素放在第几列，默认从零开始数，不设置，默认第零列
Grid.Row：内部元素放在第几行，默认从零开始数，不设置，默认第零列
Grid.ColumnSpan：内部元素跨第几列
Grid.ColumnRow：内部元素跨第几行

<Window x:Class="WpfApp1.Window4"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="2行2列" Height="450" Width="800">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" FontSize="24">第一行第一列
        </TextBlock>

        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" FontSize="24">第一行第二列
        </TextBlock>

        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" FontSize="24">第二行第一列
        </TextBlock>

        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" FontSize="24">第二行第二列
        </TextBlock>
    </Grid>

</Window>

2行2列

*
二、StackPanel（栈面板）
StackPanel将控件按照行或列【顺序布局，不会换行】，可以将元素排列成一行或者一列，它的特点是：每个元素各占一行或者一列。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical），默认为竖排（Vertical）。
Orientation：用于设置StackPanel的元素排列方式。默认以垂直的方式布局
Horizontal：水平布局, 设置水平效果
Vertical：垂直布局, 设置垂直效果

*
Horizontal

*
三、WrapPanel（环绕面板）
WrapPanel具有在有限的容器范围内, 可以【自动换行、自动换列】处理。具体则取决于WrapPanel的排列方式 (Orientation)。
Orientation="Horizontal"时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列
Orientation="Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列

*
四、DockPanel（停靠面板）
DockPanel支持让元素简单地【停靠在整个面板的某一条边上】，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。
包含在DockPanel中的元素, 具备DockPanel.Dock的4个枚举值（Top/Left/Right/Bottom）用于设置元素的锚定位置
LastChildFill：容器中的最后一个元素时, 默认该元素填充DockPanel所有空间, 默认值为True
DockPanel中的元素未显示添加DockPanel.Dock属性时, 系统则会默认为 DockPanel.Dock="Left"

*
五、UniformGrid
UniformGrid就是Grid的简化版，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件。
与Grid不同的是, 该容器具备Columns/Rows 属性, 通过设置该属性, UniformGrid则具备相应的行与列, 但是设置的Columns/Rows不允许单独的进行容器的大小设置
位于UniformGrid中的子元素, 按输入顺序排列至容器中, 直至填充容器的所有空间
未显示指定Columns/Rows, UniformGrid则为子元素动态分配Columns/Rows, 换行与换列的基准主要基于UniformGrid的容器大小( 宽度与高度)
*
六、Canvas
Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。
如果同时设置 Canvas.Left="50"，Canvas.Right="50"，则以Canvas.Left="50"为准
如果同时设置Canvas.Top="50"，Canvas.Bottom="50"，则以Canvas.Top ="50"为准
*
七、ScrollViewer
ScrollViewer是带有滚动条的面板。在ScrollViewer中只能有一个子控件，若要显示多个子控件，需要将一个附加的 Panel控件放置在父 ScrollViewer中。然后可以将子控件放置在该控件中。
HorizontalScrollBarVisibility：水平滚动条是否显示默认为Hidden
VerticalScrollBarVisibility：垂直滚动条是否显示默认为Visible
一般我们都会设置 HorizontalScrollBarVisibility="Auto"，VerticalScrollBarVisibility="Auto"，意思是：当内容超出可视范围时，才显示横向/纵向滚动条。
*
八、ViewBox
Viewbox的作用是拉伸或延展位于其中的组件，以填满可用空间。在Viewbox中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Viewbox中。然后可以将子控件放置在该控件中。
常用属性：Stretch：获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间，Stretch默认值为Uniform。
None：不进行拉伸，按子元素设置的长宽显示
Uniform：按原比例缩放子元素，使得一边不足，另一边恰好填充
Fill：缩放子元素，使得子元素的长变为Viewbox的长，宽变为Viewbox的宽
UniformToFill：按原比例缩放子元素，使得子元素一边恰好填充，另一边超出Viewbox的区域
*
九、Border
Border 是一个装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Border中。然后可以将子控件放置在该 Panel控件中。
Background：背景色
BorderBrush：边框色
BorderThickness：边框宽度
CornerRadius：各个角，圆的半径
*
*
*、数据绑定
通常情况下，每个绑定具有四个组件：
● 绑定目标对象。
● 目标属性。
● 绑定源。
● 指向绑定源中要使用的值的路径。
例如，如果将 TextBox 的内容绑定到 Employee.Name 属性，则可以类似如下所示设置绑定：
目标：TextBox
目标属性：Text
源对象：Employee
源对象值路径：Name
*
*
*
通过后台代码形式完成数据绑定
*、Window6.xaml

<Window x:Class="WpfApp1.Window6"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="Window6" Height="450" Width="800">
    <StackPanel Margin="10">
        <TextBox x:Name="txtBindingSource" />
        <WrapPanel>
            <TextBlock Text="value:" FontWeight="Bold" />
            <TextBlock Name="lbValue" />
        </WrapPanel>
    </StackPanel>
</Window>

*、Window6.xaml.cs

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

namespace WpfApp1
{
    /// <summary>
    /// Window6.xaml 的交互逻辑
    /// </summary>
    public partial class Window6 : Window
    {
        public Window6()
        {
            InitializeComponent();
            BindingData();
        }

        private void BindingData()
        {
            //创建绑定对象
            var binding = new Binding("Text");
            //设置绑定源
            binding.Source = txtBindingSource;
            //设置绑定目标
            lbValue.SetBinding(TextBlock.TextProperty, binding);
        }
    }
}

*、效果图

*
*
*
*
*
UpdateSourceTrigger 有三个枚举，用来控制改变的值何时传递给源
Explicit，源不会更新除非你手动来操作。添加了一个按钮，用于手动更新源。
LostFocus，目标控件失去焦点，源就会被更新。
PropertyChanged，绑定的属性值改变，源会立即更新。
绑定的UpdateSourceTrigger属性用来控制改变的值何时传递给源。
源码如下：

<Window x:Class="WpfApp1.Window5"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="Window5" Height="450" Width="800" MinHeight="300">
    <StackPanel Margin="10">
        <WrapPanel>
            <TextBlock Text="窗口标题" />
            <TextBox Name="txtWindowTitle" Text="{Binding Title,UpdateSourceTrigger=Explicit}" Width="250" />
            <Button x:Name="BtnUpdateSource" Content="更新源" Click="BtnUpdateSource_Click"></Button>
        </WrapPanel>
        <WrapPanel Margin="0 10 0 0">
            <TextBlock Text="窗口尺寸"></TextBlock>
            <TextBox Text="{Binding Width,UpdateSourceTrigger=LostFocus}" Width="50" />
            <TextBlock Text="X"></TextBlock>
            <TextBox Text="{Binding Height,UpdateSourceTrigger=PropertyChanged}" Width="50" />
        </WrapPanel>
    </StackPanel>
</Window>

效果图：

*
*
*
*
*
样式
*
*
*
*
*
自定义控件
*
*
*
*