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

article/2025/10/12 16:13:27

文章目录

  • 前言
  • 一、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 DockPanel
        • 3.3.1 属性
        • 3.3.2 案例
      • 3.4 WrapPanel
        • 3.4.1 属性
        • 3.4.2 案例
      • 3.5 UniformGrid
        • 3.5.1 属性
        • 3.5.2 案例
      • 3.6 Canvas控件
        • 3.6.1 属性
        • 3.6.2 案例
      • 3.7 InkCanvas
        • 3.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布局控件的全面列表：

控件功能
Canvas用于绝对定位元素，可以直接指定元素相对于父元素或Canvas左上角的位置和大小。
DockPanel用于将元素分配到面板的上下、左右、中心位置，元素的大小可以自动调整。
Grid用于将元素分配到网格中，可以自由定义行和列，可实现复杂的布局。
StackPanel用于将元素按照方向堆叠排列，可以实现水平或垂直排列。
WrapPanel用于将元素按照方向排列，当一行或一列排不下时自动换行或换列。
UniformGrid用于将元素均匀分配到网格中，行列的大小相等。
VirtualizingStackPanel用于在大量数据的列表中进行虚拟化处理，提高性能。
ScrollViewer用于将元素放入滚动容器中，当元素大小超出容器大小时自动出现滚动条。
ItemContainerTemplate用于自定义可重复使用元素的外观和行为。
TabControl用于创建选项卡界面，可以切换不同的内容。
ToolBar用于显示一组工具按钮，可以在工具栏上方或下方放置其他控件。
ToolBarTray用于将多个ToolBar放入一个水平或垂直的容器中。
TreeView用于显示层次结构数据的树形列表。
Expander用于在界面中展开或收起额外的内容。
GroupBox用于将内容分组并添加标题，可以折叠展开。
ListBox用于显示一组列表项，并允许用户从中选择一个或多个。
ListView用于显示列表数据，可以自定义列和样式。
Menu用于创建菜单和子菜单。
Tootip用于显示提示信息。
ComboBox用于显示一个下拉列表，用户可以从中选择一个值。
StatusBar用于显示状态信息，通常位于窗口底部。
ScrollBar用于控制滚动容器中元素的可见部分。
Slider用于选择数值范围的控件。
ProgressBar用于显示进度条。
Separator用于在工具栏和菜单中分隔不同的项。
ContentControl可以显示任何类型的内容，并允许进行自定义。
Panel作为控件容器的基类。
Border用于在控件周围添加边框。
ViewBox可以自动缩放其内容以适应可用空间。
HeaderedContentControl带有标题的ContentControl。
HeaderedItemsControl带有标题的ItemsControl。
ItemsControl用于显示一组可重复使用的元素。
Calendar用于显示日期和日历。
DatePicker用于选择日期。
TimePicker用于选择时间。
DataGrid用于显示大量数据的表格。
DataTemplate用于自定义数据绑定的模板。
DataTrigger用于在数据绑定值更改时触发特定视觉效果。
MultiBinding允许将多个绑定合并到一个属性上。
CommandBinding用于将UI元素上的命令与应用程序逻辑绑定。
Style用于定义控件的视觉样式。
ControlTemplate用于自定义控件的外观和行为。
ResourceDictionary用于组织和管理资源。
VisualStateManager用于管理不同UI状态下的控件的视觉效果。
EventTrigger用于在某个事件发生时触发特定的视觉效果。
Binding用于将控件属性绑定到数据源。
RelativeSource用于在数据绑定中引用相对于目标控件的其他控件。
TemplateBinding用于将控件模板中的属性绑定到控件本身的属性。
Converter用于在数据绑定中将值从一种类型转换为另一种类型。
ValidationRule用于验证数据绑定的输入。

一、WPF布局控件

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

1.无边框设计

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

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

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

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

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

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

<Window x:Class="Zhaoxi.LayoutStudy.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:Zhaoxi.LayoutStudy"mc:Ignorable="d"Title="MainWindow" Width="400" FontSize="16"SizeToContent ="Height"WindowStartupLocation="CenterScreen"WindowStyle="None" AllowsTransparency="True" Background="Transparent"><!--<Window.Clip><RectangleGeometry Rect="20,20,100,50"/><EllipseGeometry RadiusX="80" RadiusY="40" Center="50,50"/><PathGeometry Figures="M117.5,0.66 C124.57615,-28.287894 109.76686,-39.946743 147,-54.84 167.67902,-63.11161 185.9579,-61.293286 208.5,-52.84 222.32639,-47.655105 233.42911,-43.807096 245,-34.34 253.06664,-27.740025 261.84249,-24.010334 267,-14.34 274.10567,-1.0168648 279.5,10.144515 279.5,26.16 279.5,35.339615 270.48945,38.672311 264.5,45.66 257.91477,53.342767 251.25906,60.649938 244.5,68.16 235.8575,77.762779 228.24856,80.285144&#xD;&#xA;214.5,81.66 193.7326,83.73674 183.44174,81.357641 163.5,75.66 144.09912,70.11689 123.36349,65.609706 104.5,58.66 82.590544,50.588095 76.066167,51.245154 63.5,27.16 55.000033,10.868397 48.761808,12.017288 62,-7.84 68.126788,-17.030182 74.447764,-22.335982 87.5,-23.34 96.711428,-24.048571 109.98442,-9.5074671 119,-4.34"/></Window.Clip>--><Border Background="#EEE" Margin="5" CornerRadius="5"><Border.Effect><DropShadowEffect ShadowDepth="0" Color="Gray" Direction="0" Opacity="0.3" BlurRadius="10"/></Border.Effect><Grid Margin="10"><Grid.RowDefinitions><RowDefinition Height="40"/><RowDefinition Height="40"/><RowDefinition Height="40"/><RowDefinition Height="auto"/></Grid.RowDefinitions><TextBlock Text="用户名" VerticalAlignment="Center" Margin="20,0,0,0"/><TextBlock Text="密  码" VerticalAlignment="Center" Grid.Row="1"/><Button Content="登  录" Height="30" Grid.Row="2"/><TextBlock Text="用户名或密码错误！" Foreground="Red" Grid.Row="3" VerticalAlignment="Center"HorizontalAlignment="Center" Margin="0,10" Name="txtErrorMsg" Visibility="Collapsed"/></Grid></Border>
</Window>

在这里插入图片描述

2.理解布局

2.1 WPF的布局处理

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

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

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

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

2.1 布局原则

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

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

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

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

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

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

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

2.3 布局过程

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

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

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

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

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

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

3.布局控件

3.1 Grid控件

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

3.1.1 属性

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

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

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

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

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

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

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

示例代码：

<Grid><Grid.RowDefinitions><RowDefinition Height="50"/> <!--第一行高度为50--><RowDefinition Height="Auto"/> <!--第二行高度自适应--></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"/> <!--第一列宽度为剩余空间--><ColumnDefinition Width="100"/> <!--第二列宽度为100--></Grid.ColumnDefinitions><Label Grid.Row="0" Grid.Column="0" Content="Row 1, Column 1" HorizontalAlignment="Center" VerticalAlignment="Center"/><Label Grid.Row="0" Grid.Column="1" Content="Row 1, Column 2" HorizontalAlignment="Center" VerticalAlignment="Center"/><Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Content="Row 2, Column 1-2" HorizontalAlignment="Center" VerticalAlignment="Center"Margin="5" Padding="10"/>
</Grid>

在这里插入图片描述

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

3.1.2 案例

1、简单的2x2网格布局

<Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><!--第一行第一列--><Label Grid.Row="0" Grid.Column="0" Content="Name:"/><!--第一行第二列--><TextBox Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding Name}"/><!--第二行第一列--><Label Grid.Row="1" Grid.Column="0" Content="Age:"/><!--第二行第二列--><TextBox Grid.Row="1" Grid.Column="1" Margin="5" Text="{Binding Age}"/>
</Grid>

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

2、简单的3x3网格布局

<Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><!--第一行第二列--><Label Grid.Row="0" Grid.Column="1" Content="Welcome to my app!" HorizontalAlignment="Center"/><!--第二行第一列--><Button Grid.Row="1" Grid.Column="0" Content="OK"/><!--第二行第二列--><Button Grid.Row="1" Grid.Column="1" Content="Cancel"/><!--第二行第三列--><Button Grid.Row="1" Grid.Column="2" Content="Exit"/><!--第三行第一列--><Label Grid.Row="2" Grid.Column="0" Content="© 2021 My Company, Inc."/><!--第三行第二列--><Label Grid.Row="2" Grid.Column="1"/><!--第三行第三列--><Label Grid.Row="2" Grid.Column="2"/>
</Grid>

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

3、共享尺寸

<Border BorderBrush="Green" BorderThickness="1" Margin="10 20 30 50"><Grid Grid.IsSharedSizeScope="True"><Grid.RowDefinitions><RowDefinition Height="30"/><RowDefinition/></Grid.RowDefinitions><!--列头--><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="50" SharedSizeGroup="A" /><ColumnDefinition Width="100" SharedSizeGroup="B"/><ColumnDefinition/></Grid.ColumnDefinitions><Border Background="Orange"/><Border Background="Green" Grid.Column="1" Margin="3,7,10,15"/><!--左上右下--><GridSplitter HorizontalAlignment="Right" Height="10" Width="5" Background="Gray"/><GridSplitter HorizontalAlignment="Right" Height="10" Width="5" Background="Gray" Grid.Column="1"/></Grid><!--数据表--><Grid Grid.Row="1" Height="60" VerticalAlignment="Top" Margin="0,10,0,0"><Grid.ColumnDefinitions><ColumnDefinition SharedSizeGroup="A"/><ColumnDefinition  SharedSizeGroup="B"/><ColumnDefinition/></Grid.ColumnDefinitions><Border Background="Orange"></Border><Border Grid.Column="1" BorderBrush="Red" BorderThickness="1"><TextBlock/></Border></Grid><Grid Grid.Row="1" Height="30" VerticalAlignment="Top" Margin="0,150,0,0"><Grid.ColumnDefinitions><ColumnDefinition SharedSizeGroup="A"/><ColumnDefinition  SharedSizeGroup="B"/><ColumnDefinition/></Grid.ColumnDefinitions><Border Background="Orange"></Border><Border Background="Green" Grid.Column="1"/></Grid></Grid>
</Border>

在这里插入图片描述

3.2 StackPanel控件

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

3.2.1 属性

StackPanel控件的常用属性如下：

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

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

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

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

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

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

  7. 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、多层嵌套

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><!--栈--><!--关于顺序问题：自定义布局的时候讲布局原理：StackPanel.Order="-1"--><Border Background="Orange" Height="30" Width="50"/><Border Background="Green" Height="30" Width="70" /><StackPanel Orientation="Horizontal"><TextBlock Text="用户名：" VerticalAlignment="Center"/><TextBox Width="100" Height="30"/></StackPanel><!--使用场景：ToolBar-》控件模板：--><ToolBar Height="40"><Button Content="butt"/><Button Content="butt"/><Button Content="butt"/><Button Content="butt"/></ToolBar>
</StackPanel>

在这里插入图片描述

3.3 DockPanel

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

3.3.1 属性

DockPanel控件的常用属性如下：

  1. Dock：指定控件在DockPanel中的停靠方式，值为Left、Top、Right、Bottom或None，默认值为Left。
  2. LastChildFill：当DockPanel中有多个控件时，指定最后一个控件是否填充剩余空间，默认值为True。
  3. Background：指定控件的背景色。
  4. Margin：指定控件与其他控件之间的空白边距。
  5. Padding：指定内容与控件边缘之间的空白边距。
  6. HorizontalAlignment：指定控件在水平方向上的对齐方式，值为Left、Center、Right或Stretch，默认值为Stretch。
  7. VerticalAlignment：指定控件在垂直方向上的对齐方式，值为Top、Center、Bottom或Stretch，默认值为Stretch。
  8. Width：指定控件的宽度。
  9. Height：指定控件的高度。
  10. MinWidth：指定控件的最小宽度。
  11. MinHeight：指定控件的最小高度。
  12. MaxWidth：指定控件的最大宽度。
  13. 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"/><!--alt+箭头--><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控件的主要属性如下：

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

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

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

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

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

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

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

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

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

3.4.2 案例

<WrapPanel Orientation="Vertical"><Button Content="Button1" Height="40" Width="120" VerticalAlignment="Top"/><Button Content="Button2" Height="40" Width="120" VerticalAlignment="Bottom"/><Button Content="Button3" Height="60" Width="120"/><Button Content="Button4" Height="40" Width="120"/><Button Content="Button4" Height="80" Width="120"/><Button Content="Button4" Height="40" Width="220"/><Button Content="Button4" Height="40" Width="120"/><Button Content="Button4" Height="40" Width="120"/><Button Content="Button4" Height="40" Width="120"/><Button Content="Button4" Height="40" Width="120"/><Button Content="Button4" Height="40" Width="120"/>
</WrapPanel>

在这里插入图片描述

3.5 UniformGrid

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

3.5.1 属性

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

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

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

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

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

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

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

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

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

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

  10. 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控件属性包括：

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

3.6.2 案例

<Canvas><Button Content="Button1" Width="300" Height="90"/><Button Content="Button2" Canvas.Right="20" Canvas.Left="400" Canvas.Top="60" Canvas.Bottom="20"/><Button Content="Button3" Panel.ZIndex="0"/><Button Content="Button4" Panel.ZIndex="0"/><Button Content="Button5" Width="250" Height="80"/><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="Butt"/>
</Canvas>

在这里插入图片描述

3.7 InkCanvas

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

3.7.1 属性

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

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

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

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

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

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

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

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

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

  9. Cursor：设置InkCanvas上的光标。

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

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

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

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

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

  15. 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控件属性有：

  1. Background：设置Border控件背景色。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.8.2 案例

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

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

<Window x:Class="WpfApp1.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="Login Window" Height="200" Width="300"><Border BorderBrush="Gray" BorderThickness="1" CornerRadius="5"Margin="10" Padding="5"><Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition/></Grid.ColumnDefinitions><Label Grid.Row="0" Grid.Column="0" Content="Username:"/><TextBox Grid.Row="0" Grid.Column="1" Margin="5" /><Label Grid.Row="1" Grid.Column="0" Content="Password:"/><PasswordBox Grid.Row="1" Grid.Column="1" Margin="5" /><StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal"HorizontalAlignment="Right" Margin="0,10,0,0"><Button Content="Cancel" Margin="5" IsCancel="True"/><Button Content="Login" Margin="5" IsDefault="True"/></StackPanel></Grid></Border>
</Window>

运行效果：

在这里插入图片描述

二、自定义控件

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>

在这里插入图片描述


http://chatgpt.dhexx.cn/article/Ed7hMnU8.shtml

相关文章

WordPress响应式主题：Three/博客/CMS/博客导航三合一主题

WordPress响应式主题：Three/博客/CMS/博客导航三合一主题

效果演示:http://cxyo.vip/ 下载地址在最后面 主题使用说明 1、首页设置 ①选择首页布局&#xff1a;博客布局或杂志布局或博客导航&#xff0c;默认博客布局&#xff0c;若选择杂志布局或博客导航后&#xff0c;必须设置CMS/导航布局后才能正常显示&#xff0c;否则会错位。…
阅读更多...
使用dedecms构建响应式站点（二）——系统设置

使用dedecms构建响应式站点（二）——系统设置

在上一篇文章中&#xff0c;我们介绍了使用dedecms构建响应式站点的安装部分&#xff0c;这一次&#xff0c;我们来讲讲dedecms系统安装后的初始状态下如何进行各项系统设置。 进入管理后台后&#xff0c;我们会看到系统的管理菜单&#xff0c;如下图所示&#xff1a; 通过菜单…
阅读更多...
浏览器请求与响应全过程详解

浏览器请求与响应全过程详解

3. 浏览器请求与响应全过程详解 前言 当在浏览器上输入一个网站链接时&#xff0c;它是如何运行将网页内容呈现在我们的浏览器上的呢&#xff1f; 本文旨在对www.yangoogle.com网页进行详细分析&#xff0c;了解浏览器展示内容的整个流程。下图是在网上检索到一个较清晰的流程…
阅读更多...
android创建布局文件,android学习——Android Studio下创建menu布局文件

android创建布局文件,android学习——Android Studio下创建menu布局文件

一、问题： android studio项目中没有看到menu文件夹： 在android studio项目中想要添加menu布局文件，一开始我的做法是：直接在res文件夹右键选择xml文件来添加，如下图： 但是会发现新建的布局文件好像很奇怪，不能添加menu以及item，如下图： 二、解决办法： 经过百度才知道…
阅读更多...
当前比较流行的页面布局方式

当前比较流行的页面布局方式

1.固定宽度布局&#xff1a;当前各大网站的页面都是固定宽度布局。 优点&#xff1a;更好的适应当前市场上所有的设备&#xff1a;我们知道当前市面上主流的集中分辨率为以下几种 800*600 1024*768 1280*1024等属于普通显示器所支持的分辨率 1280*800 一般是14宽屏笔记本的最…
阅读更多...
响应式 概念

响应式 概念

&#xfeff;&#xfeff; 原文地址&#xff1a;http://isux.tencent.com/responsive-web-design.html 概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念&#xff1a;为什么一定要为每个用户群各自打造一套设计和开发方案&#xff1f;Web设计应该做到根据不同设备环…
阅读更多...
【iOS架构】iOS ReactiveCocoa函数响应式编程

【iOS架构】iOS ReactiveCocoa函数响应式编程

声明式编程 声明式编程&#xff08;declarative programming&#xff09;是一种编程范型&#xff0c;与命令式编程相对立。它描述目标的性质&#xff0c;让电脑明白目标&#xff0c;而非流程。声明式编程不用告诉电脑问题领域&#xff0c;从而避免随之而来的副作用&#xff0c;…
阅读更多...
基于AntDesign Vue的响应式登录页面

基于AntDesign Vue的响应式登录页面

为了做一个自己的前后端分离的后台管理系统&#xff0c;特地做了一下登录页面。大概的架子如下&#xff0c;后面需要替换一下顶部导航的信息。先大概贴一下代码&#xff0c;以后直接复制使用。整体的布局是自己写的样式&#xff0c;如果后面要替换为其他的UI框架&#xff0c;比…
阅读更多...
Angular最新教程-第六节编写响应式导航栏

Angular最新教程-第六节编写响应式导航栏

这节课我们讲解如何使用bootstrap 4 编写响应式布局。 参考图我们还是参照Angular中文社区http://www.angularjs.cn/ 图中标注红色的部分，我自己不是很喜欢，所以做了一点小改动。 他这里也没有做响应式布局，所以样式就不抄他的，我们自己重写。 首先我们先简要的分析一…
阅读更多...
什么是响应式网页设计？响应式布局的实现原理

什么是响应式网页设计？响应式布局的实现原理

2019独角兽企业重金招聘Python工程师标准>>> 概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念&#xff1a;为什么一定要为每个用户群各自打造一套设计和开发方案&#xff1f;Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是…
阅读更多...
【Bootstrap】两个常用布局，居中布局和全屏左右布局，响应式布局

【Bootstrap】两个常用布局，居中布局和全屏左右布局，响应式布局

居中布局 居中布局&#xff0c;上面为菜单&#xff0c;下面为内容&#xff0c;内容居中&#xff0c;无论屏幕多宽&#xff0c;内容总是在中间 代码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; cha…
阅读更多...
响应式页面实现

响应式页面实现

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念&#xff1a;为什么一定要为每个用户群各自打造一套设计和开发方案&#xff1f;Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等&#xff0c;它更…
阅读更多...
移动端页面布局（响应式布局）以及meta标签的设置

移动端页面布局（响应式布局）以及meta标签的设置

响应式网站设计 什么是响应式布局？ 1、服务器根据不同的浏览器用户端，为用户呈现不同的页面效果。 2、可以让一个网站兼容不同分辨率的设备，给用户更好的视觉使用体验。 3、移动互联网催生了响应式布局的诞生。 响应式设计优缺点 优点: 解决了设备之间的差异化展示,让不同的…
阅读更多...
移动端基础及响应式布局

移动端基础及响应式布局

目录 1.移动端概述和hybird模式 2.响应式布局基础 3.响应式布局之流式布局 4.做移动端项目之前的准备 5.响应式布局demo 6.rem响应式布局 7.swiper的使用和轮播图 8.综合案例-微信场景应用 1.移动端概述和hybird模式 移动端&#xff1a;运行在移动设备上的产品 产品…
阅读更多...
linux 透明图片,FreeImage 生成带透明通道的GIF

linux 透明图片,FreeImage 生成带透明通道的GIF

FreeImage 生成带透明通道的GIF 主要方法&#xff1a; 加载图像及读取参数 FreeImage_Load FreeImage_GetWidth FreeImage_GetHeight FreeImage_Allocate FreeImage_GetPixelColor FreeImage_SetPixelColor 保存GIF FreeImage_OpenMultiBitmap FreeImage_SetMetadata FreeImage…
阅读更多...
freeimage转到cvmat 单通道图像转到3通道[freeimage][cvmat]

freeimage转到cvmat 单通道图像转到3通道[freeimage][cvmat]

0 结果 1 代码 将freeImage转为cv::mat&#xff0c;代码如下&#xff1a; #include <FreeImage.h> #include <opencv2\opencv.hpp> using namespace cv;// #define _CRT_SECURE_NO_WARNINGS #pragma warning(disable : 4996) void FI2MAT(FIBITMAP* src, Mat&…
阅读更多...
linux系统下替换图片,Linux（ubuntu系统）下使用FreeImage库

linux系统下替换图片,Linux（ubuntu系统）下使用FreeImage库

Linux(ubuntu系统)下使用FreeImage库 Linux(ubuntu系统)下使用FreeImage库 最近在搞一个图像处理的项目，需要用到FreeImage，之前在Windows下用过，很简单，因为FreeImage官网提供了可供使用的静态库动态库，直接包含就行了。现在需要在Linux平台下使用，发现官网并没有提供直…
阅读更多...
计算机中缺失freeimage.dll,修复freeimage.dll

计算机中缺失freeimage.dll,修复freeimage.dll

freeimage.dll是一款如果丢失会造成系统无法造成运行等问题的重要文件。今天久友下载站小编教大家一个修复freeimage.dll文件的方法&#xff0c;来久友下载站下载 freeimage.dll进行安装修复即可。Freeimage.dll是程序访问的组合文件&#xff0c;支持方便的程序打开&#xff0c…
阅读更多...
Linux FreeImage安装编译

Linux FreeImage安装编译

1.下载FreeImage 安照包 wget http://downloads.sourceforge.net/freeimage/FreeImage3170.zip #解压 unzip FreeImage3170.zip -d freeImage 2.对安装包进行编译 cd freeImagesudo make 类型转换错误解决&#xff1a; Source/LibRawLite/./internal/dcraw_common.cpp: 在…
阅读更多...
c语言freeimage库文件,FreeImage使用方法amp;FreeImage Tutorial

c语言freeimage库文件,FreeImage使用方法amp;FreeImage Tutorial

前言 四大图像库&#xff1a;OpenCV&#xff1a;功能十分的强大&#xff0c;而且支持目前先进的图像处理技术&#xff0c;体系十分完善&#xff0c;操作手册很详细&#xff0c;手册首先给大家补计算机视觉的知识&#xff0c;几乎涵盖了近10年内的主流算法&#xff1b; http://s…
阅读更多...
推荐文章

Copyright @ 2022~2023