200字范文 > 【愚公系列】07月 WPF+上位机+工业互联 002-WPF布局控件

【愚公系列】07月 WPF+上位机+工业互联 002-WPF布局控件

时间：2021-04-07 19:07:32

文章目录

前言一、WPF布局控件1.无边框设计2.理解布局2.1 WPF的布局处理2.1 布局原则2.3 布局过程 3.布局控件3.1 Grid控件3.1.1 属性3.1.2 案例 3.2 StackPanel控件3.2.1 属性3.2.2 案例 3.3 DockPanel3.3.1 属性3.3.2 案例 3.4 WrapPanel3.4.1 属性3.4.2 案例 3.5 UniformGrid3.5.1 属性3.5.2 案例 3.6 Canvas控件3.6.1 属性3.6.2 案例 3.7 InkCanvas3.7.1 属性3.7.2 案例 3.8 Border控件3.8.1 属性3.8.2 案例二、自定义控件1.定义控件2.使用控件

前言

WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。

以下是WPF布局控件的全面列表：

一、WPF布局控件

这边布局只是讲几个案例，具体布局使用可以看WPF控件专题

1.无边框设计

WPF无边框设计是一种Windows Presentation Foundation（WPF）应用程序界面设计技术，它不使用传统的窗口边框和标题栏来装饰应用程序窗口，而是完全自定义应用程序的外观和交互行为。这种设计技术可以实现更加灵活、现代化和个性化的用户界面。具体来说，WPF无边框设计可以通过以下方式实现：

自定义窗口边框和标题栏样式，包括大小、形状、颜色和文本样式等。

使用特定的控件来实现窗口的最小化、最大化和关闭等操作，以取代传统的窗口按钮。

使用动画和效果来增强交互体验，例如在鼠标悬停时显示工具提示、在窗口拖动时使用缓动效果等。

使用特定的布局控件和容器来实现窗口内容的自适应和响应式布局。

WPF无边框设计可以让开发人员更加自由地创造独特的用户界面，同时也提供了更好的性能和可扩展性，以下是相关代码：

2.理解布局

2.1 WPF的布局处理

WPF的布局处理是通过一组布局管理器来实现的。以下是常用的布局管理器：

StackPanel：按照方向（横向或纵向）依次排列控件。Grid：使用行和列来定义网格，并放置控件。Canvas：使用绝对位置来定位控件。WrapPanel：类似于StackPanel，但是会自动换行。DockPanel：将控件停靠在父容器的边缘或中心。

布局管理器可以嵌套使用，以实现复杂的布局。例如，将一个Grid放置在StackPanel中，可以实现在垂直方向上排列多个网格。

除了布局管理器外，WPF还提供了一些附加属性来帮助控件进行布局，例如Margin、HorizontalAlignment和VerticalAlignment等。这些属性可以在XAML中设置，也可以在代码中动态设置。WPF的布局处理是通过一组布局管理器来实现的。

2.1 布局原则

WPF的布局原则主要包括以下几点：

使用布局容器：WPF提供了多种布局容器，如Grid、StackPanel、Canvas等，可以根据布局要求选择相应的容器。

使用组件对齐：在WPF中，组件可以使用HorizontalAlignment和VerticalAlignment属性控制水平和垂直方向的对齐方式。

使用网格布局：使用Grid布局可以将UI元素放置在网格中，方便调整和组织。

使用大小调整：WPF提供了多种方式调整组件的大小，如使用Margin、Padding、Width和Height等属性。

使用自动布局：WPF中的布局系统可以自动适应组件的大小和位置，避免了手动计算和布局。

使用样式和模板：WPF中的样式和模板可以将UI元素的布局、样式和行为进行统一管理，提高了布局的灵活性和可维护性。

2.3 布局过程

WPF的布局过程分为以下几个步骤：

测量(Measure)：这一步是为了计算控件的大小，确定其需要的空间。该过程中，从父级容器中获取约束(Constraint)，如宽度和高度。

安排(Arrange)：根据计算出来的大小和约束，确定控件的位置。这一步是通过设置控件的位置和大小来实现的。

渲染(Render)：在布局完成后，将控件绘制到屏幕上。

更新(Update)：布局过程中，如果属性发生了改变，需要重新进行布局。比如，控件的内容或者大小发生变化。

WPF布局系统提供一些附加的服务，如测量工作的缓存，用于提高性能，以及支持控件的自定义测量和排列。除了常规的布局处理之外，WPF还提供了数据绑定、动画和模板等高级特性，可以让控件的布局更加灵活和易于维护。

3.布局控件

3.1 Grid控件

Grid控件是WPF中最常用的布局控件之一，它可以将控件按照网格的形式排列，并可以设置行、列、单元格的属性，比如宽度、高度、对齐方式等。

3.1.1 属性

在WPF中，Grid控件的布局属性主要有以下几种：

RowDefinitions和ColumnDefinitions：分别定义网格中的行和列，可以设置行高和列宽。

Grid.Row和Grid.Column：用来指定控件所在的行和列。可以设置控件所占据的行数和列数。

Grid.RowSpan和Grid.ColumnSpan：用来指定控件跨越的行数和列数。

HorizontalAlignment和VerticalAlignment：用来指定控件在单元格中的水平和垂直对齐方式。

Margin：用来指定控件与单元格边缘的距离。

Padding：用来指定控件内边距。

示例代码：

在这个示例中，我们定义了一个2x2的网格，第一行高度为50，第二行高度为自适应。第一列宽度为剩余空间，第二列宽度为100。在网格中放置了三个Label控件，第一个控件在第一行第一列，第二个控件在第一行第二列，第三个控件占据了第二行的全部列并设置了Margin和Padding。这个例子演示了Grid控件的基本使用方法和布局属性。

3.1.2 案例

1、简单的2x2网格布局

这个示例定义了一个2x2的网格，第一行为自适应高度，第二行为星号高度（即剩余空间），第一列为自适应宽度，第二列为星号宽度。在网格中有两个Label和两个TextBox控件，它们分别放在不同的行、列中。这个布局非常灵活，可以通过调整行、列的大小来达到不同的效果。

2、简单的3x3网格布局

在这个例子中，我们定义了一个3x3的网格，第一行的Label通过设置HorizontalAlignment属性为Center实现了水平居中的效果。这个例子中还有一些留空的Label控件，它们可以用来占据网格中的空白部分，使布局更合理。

3、共享尺寸

3.2 StackPanel控件

StackPanel控件是WPF（Windows Presentation Foundation）中的一种布局控件。它允许您将控件排列在一行或一列中，并根据需要包装它们。StackPanel可以在水平或垂直方向上排列控件，并将控件压缩在可用空间内。StackPanel适用于需要动态添加或移除控件的情况，以及需要灵活地自动布局的情况。

3.2.1 属性

StackPanel控件的常用属性如下：

Orientation：取值为“Horizontal”（水平方向排列）或“Vertical”（垂直方向排列）。

HorizontalAlignment和VerticalAlignment：用于控制子控件在StackPanel内的水平对齐方式和垂直对齐方式。

Margin：用于控制StackPanel控件的边距。

Background：用于设置StackPanel控件的背景颜色。

MinHeight和MinWidth：用于控制StackPanel控件的最小高度和宽度。

MaxHeight和MaxWidth：用于控制StackPanel控件的最大高度和宽度。

Children：用于向StackPanel控件中添加子控件。

3.2.2 案例

1、水平排列的按钮

<StackPanel Orientation="Horizontal"><Button Content="按钮1"/><Button Content="按钮2"/><Button Content="按钮3"/></StackPanel>

2、垂直排列的文本框

<StackPanel Orientation="Vertical"><TextBox Text="文本框1"/><TextBox Text="文本框2"/><TextBox Text="文本框3"/></StackPanel>

3、多层嵌套

3.3 DockPanel

DockPanel控件是WPF（Windows Presentation Foundation）中的一种布局控件，它可以使子元素根据指定的方向自动停靠在容器边缘，从而实现灵活的布局排列。通过设置子元素的DockPanel.Dock属性，子元素可以停靠在上、下、左、右四个方向中的任意一个或多个方向上。DockPanel控件通常用于实现窗口、工具栏等常见的用户界面组件的布局。

3.3.1 属性

DockPanel控件的常用属性如下：

Dock：指定控件在DockPanel中的停靠方式，值为Left、Top、Right、Bottom或None，默认值为Left。LastChildFill：当DockPanel中有多个控件时，指定最后一个控件是否填充剩余空间，默认值为True。Background：指定控件的背景色。Margin：指定控件与其他控件之间的空白边距。Padding：指定内容与控件边缘之间的空白边距。HorizontalAlignment：指定控件在水平方向上的对齐方式，值为Left、Center、Right或Stretch，默认值为Stretch。VerticalAlignment：指定控件在垂直方向上的对齐方式，值为Top、Center、Bottom或Stretch，默认值为Stretch。Width：指定控件的宽度。Height：指定控件的高度。MinWidth：指定控件的最小宽度。MinHeight：指定控件的最小高度。MaxWidth：指定控件的最大宽度。MaxHeight：指定控件的最大高度。

3.3.2 案例

<DockPanel LastChildFill="True"><Button Content="Button2" DockPanel.Dock="Left"/><Button Content="Button1" DockPanel.Dock="Top"/><Button Content="Button4" DockPanel.Dock="Bottom"/><Button Content="Button3" DockPanel.Dock="Right"/><Button Content="Button5" DockPanel.Dock="Bottom"/><Button Content="Button6"/></DockPanel>

3.4 WrapPanel

WrapPanel是一种在WPF中使用的面板控件，它可以自动把子元素按照指定方向排列，并在需要时自动换行。相比于其他面板控件，WrapPanel更加灵活，可以实现多种布局方式。在WrapPanel中，子元素可以具有不同的宽度和高度。它还可以控制子元素之间的间隔以及子元素的对齐方式。WrapPanel通常用于实现流式布局，例如显示文章列表、图片列表等。

3.4.1 属性

WrapPanel控件的主要属性如下：

Orientation：指定子元素的排列方向，可以是水平（Horizontal）或垂直（Vertical），默认为水平方向。

ItemWidth：指定子元素的宽度，如果未指定，则使用子元素的默认宽度。

ItemHeight：指定子元素的高度，如果未指定，则使用子元素的默认高度。

ItemMargin：指定子元素之间的间隔大小，默认为0。

HorizontalAlignment：指定子元素的水平对齐方式，可以是左对齐（Left）、居中对齐（Center）或右对齐（Right），默认为左对齐。

VerticalAlignment：指定子元素的垂直对齐方式，可以是上对齐（Top）、居中对齐（Center）或下对齐（Bottom），默认为上对齐。

FlowDirection：指定子元素的排列顺序，可以是从左到右（LeftToRight）或从右到左（RightToLeft），默认为从左到右。

CanHorizontallyScroll：指定是否可以水平滚动。

CanVerticallyScroll：指定是否可以垂直滚动。

3.4.2 案例

3.5 UniformGrid

UniformGrid控件是一种用于WPF和UWP应用程序中的布局控件，它将内容在一个均匀的网格中排列。UniformGrid控件提供了一种简单的方式来布局相同大小的元素，并且可以控制元素的行列数量。与其他布局控件相比，UniformGrid控件的优势在于它可以确保所有元素都具有相同的大小，并且不会影响布局中其他元素的位置。

3.5.1 属性

UniformGrid控件是一个布局面板，可以将其子控件排列成类似于网格的形式，其中每个子控件的大小和位置是相同的。UniformGrid控件有以下属性：

Rows：指定UniformGrid控件中的行数。

Columns：指定UniformGrid控件中的列数。

FirstColumn：指定第一个子控件应该位于哪一列。

FirstRow：指定第一个子控件应该位于哪一行。

HorizontalAlignment：指定UniformGrid控件中所有子控件的水平对齐方式。

VerticalAlignment：指定UniformGrid控件中所有子控件的垂直对齐方式。

Margin：指定UniformGrid控件与其父控件之间的边距。

Background：指定UniformGrid控件的背景颜色或背景图片。

Padding：指定UniformGrid控件中所有子控件之间的间距大小。

IsItemsHost：指定UniformGrid控件是否作为ItemsControl的ItemsPanel，并作为其子控件的容器。

3.5.2 案例

<UniformGrid Rows="2" Columns="2"><Button Content="Button1"/><Button Content="Button2"/><Button Content="Button3"/><Button Content="Button4"/><Button Content="Button5"/><Button Content="Button6"/><Button Content="Button6"/><Button Content="Button6"/><Button Content="Button6"/><Button Content="Button6"/><Button Content="Button6"/><Button Content="Button6"/><Button Content="Button6"/><Button Content="Button6"/></UniformGrid>

3.6 Canvas控件

WPF中的Canvas控件是一个面板控件，用于在其上面放置其他控件或绘制图形。Canvas控件允许您以x,y坐标系的形式放置UI元素。您可以使用Canvas控件来创建自定义控件，或为您的应用程序中的其他控件提供布局支持。Canvas控件提供了许多附加属性，如Left，Top，Bottom和Right，用于定位和放置子元素。Canvas控件还允许您使用Path、Line、Polygon、Polyline等形状对象创建线条、多边形、折线等图形。

3.6.1 属性

WPF中的Canvas控件属性包括：

Background：设置Canvas的背景颜色或使用图片进行填充Width和Height：设置Canvas的宽度和高度Children：用于添加子元素，可以添加任何UIElement对象ClipToBounds：指定Canvas是否截取超出其边界的子元素IsItemsHost：指定Canvas是否作为ItemsControl子控件的宿主控件Left、Top、Right、Bottom：确定子元素的位置和大小，可以使用Canvas.SetXXX方法进行设置RenderTransform：应用于Canvas的变换效果，可以包括旋转、缩放和平移等操作Tag：一个Object类型的属性，用于存储任意数据，并与Canvas关联。

3.6.2 案例

3.7 InkCanvas

InkCanvas控件是WPF中用于捕捉和显示用户手写笔迹的专用控件。它提供了一种可视化的方式来收集、编辑和呈现手写笔迹，可以用于绘图、手写笔记、签名等应用场景。InkCanvas控件提供了多种绘图工具和笔刷，可以自由选择颜色、笔触粗细和透明度等属性，同时还支持撤销、重做、清除、保存和加载笔迹等操作。InkCanvas控件还具有高度的可定制性，可以通过绑定事件、使用样式和自定义模板等方式实现个性化的界面和行为。

3.7.1 属性

InkCanvas是WPF中用于手写或涂鸦的控件，它具有以下属性：

Background：设置InkCanvas的背景颜色或背景图像。

DefaultDrawingAttributes：设置InkCanvas默认的画笔属性，如颜色、粗细等。

EditingMode：设置InkCanvas的编辑模式，包括Ink、EraseByPoint、EraseByStroke等。

EditingModeInverted：设置InkCanvas的反向编辑模式，可以将之前的Ink转换为橡皮擦。

EraserShape：设置InkCanvas橡皮擦的形状，如矩形或圆形。

Strokes：获取或设置在InkCanvas上绘制的笔画。

DefaultStylusPointDescription：获取或设置InkCanvas默认的触笔点的描述，包括坐标、压力等信息。

UseCustomCursor：设置是否在InkCanvas上使用自定义光标。

Cursor：设置InkCanvas上的光标。

IsManipulationEnabled：设置是否允许手势操作。

IsHitTestVisible：设置是否允许在InkCanvas上进行命中测试。

GestureRecognizer：获取或设置手势识别器，用于识别手势操作。

DynamicRenderer：获取或设置用于在InkCanvas上实时呈现笔画的DynamicRenderer对象。

ActiveEditingMode：获取或设置当前InkCanvas的激活编辑模式，包括Ink、EraseByPoint、EraseByStroke等。

StylusPlugIns：获取或设置与InkCanvas一起使用的StylusPlugin对象集合。

3.7.2 案例

<InkCanvas EditingMode="Ink" ><InkCanvas.DefaultDrawingAttributes><DrawingAttributes Color="Red" Width="10" Height="10"></DrawingAttributes></InkCanvas.DefaultDrawingAttributes><Button Content="Button1" InkCanvas.Left="50" InkCanvas.Top="100"/><Button Content="Button2"/><Button Content="Button3"/><Button Content="Button4"/><Button Content="Button5"/><Button Content="Button6"/><Button Content="Button7"/><Button Content="Button8"/><Button Content="Button9"/></InkCanvas>

3.8 Border控件

WPF中的Border控件是一种容器控件，可用于将其他控件装入其中，并在它们周围添加边框、填充和背景。它可以显示一个矩形框，作为其他控件的容器，并可以通过控制边框颜色、样式和厚度来改变外观。Border控件还可以设置背景颜色和填充，以及圆角半径来实现更复杂的外观效果。Border控件常用于创建自定义控件、按钮、文本框、标签等UI元素。

3.8.1 属性

WPF中的Border控件属性有：

Background：设置Border控件背景色。

BorderBrush：设置Border控件边框的颜色。

BorderThickness：设置Border控件的边框宽度。

CornerRadius：设置Border控件的圆角半径。

Padding：控制Border控件内部内容与Border边缘之间的距离。

SnapsToDevicePixels：设置Border的渲染方式，使其在像素级别上对齐。

UseLayoutRounding：设置Border的渲染方式，使用布局舍入。

Effect：设置Border控件的效果，如阴影、模糊等。

Opacity：设置Border控件的透明度。

RenderTransform：设置Border控件的渲染变换。

VerticalAlignment、HorizontalAlignment：设置Border控件的垂直和水平对齐方式。

Visibility：设置Border控件的可见性。

Name：设置Border控件的名称，以便在代码中引用。

Tag：设置Border控件的标记，以便在代码中识别。

ToolTip：设置Border控件的工具提示内容。

3.8.2 案例

实例：在WPF中使用Border控件创建一个简单的登录窗口

下面是一个简单的WPF窗口，它使用Border控件实现了一个登录窗口。该窗口包含用户名和密码输入框、登录按钮和一个取消按钮。

运行效果：

二、自定义控件

1.定义控件

public class ZxStackPanel : Panel{// 从上向下的累积// 第一个子项第一个// 第二个子项在第一个子项的高度下面// 第三个子项在第二个子项的高度+第一个子项的高度// 。。。。。// 两个过程：// 测量：// 排列List<ListItem> children = new List<ListItem>();// 测量：主要是对子控件进行期望尺寸的测量protected override Size MeasureOverride(Size availableSize){//Size size = new Size(availableSize.Width / 4, availableSize.Height);// 记录所有子控件的整体高度double height = 0;// 遍历子控件，对控件一一进行测量动作foreach (FrameworkElement item in this.InternalChildren){int index = ZxStackPanel.GetIndex(item);// 添加到临时集合，供后续排序用children.Add(new ListItem {Control = item, Index = index });// 控件测量->得到控件的期望尺寸DesiredSizeitem.Measure(availableSize);//height += item.DesiredSize.Height;}// 通过依赖附加属性对子控件进行排序children = children.OrderBy(c => c.Index).ToList();// 根据指定序号进行调整int i = 0;while (i < children.Count){if (children[i].Index > 0){ListItem item = children[i];children.RemoveAt(i);children.Insert(item.Index, item);}elsei++;}// 返回所有子控件所需要的Size，可能比容器大小要大：availableSizereturn new Size(availableSize.Width, height);}// 排列：最终子控件在放在哪个位置（坐标）上// finalSize等于MeasureOverride返回值protected override Size ArrangeOverride(Size finalSize){// 记录所有子控件的整体高度double height = 0;foreach (ListItem item in children){// 将Item子项放到特定的位置，主要是在Rect的X和Y，大小由Rect的Width和Height决定item.Control.Arrange(new Rect(0, height, finalSize.Width, item.Control.DesiredSize.Height));//height += item.Control.DesiredSize.Height;}return finalSize;}// 需求：StackPanel中的子项进行顺序调整public static int GetIndex(DependencyObject obj){return (int)obj.GetValue(IndexProperty);}public static void SetIndex(DependencyObject obj, int value){obj.SetValue(IndexProperty, value);}public static readonly DependencyProperty IndexProperty =DependencyProperty.RegisterAttached("Index", typeof(int), typeof(ZxStackPanel), new PropertyMetadata(0));//private int _index;//public int Index//{// get { return _index; }// set { _index = value; }//}// // 指定子项的区域大小大中小}class ListItem{public FrameworkElement Control {get; set; }public int Index {get; set; }}

2.使用控件

<local:ZxStackPanel><Button Content="Button1"/><Button Content="Button2" local:ZxStackPanel.Index="5"/><Button Content="Button3"/><Button Content="Button4"/><Button Content="Button5"/><Button Content="Button6"/><Button Content="Button7"/><Button Content="Button8" local:ZxStackPanel.Index="3"/><Border Background="Orange" Height="40"/></local:ZxStackPanel>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。