WPF布局控件

最新推荐文章于 2024-08-14 17:04:43 发布
最新推荐文章于 2024-08-14 17:04:43 发布
阅读量1.2k 收藏 10
点赞数 22
分类专栏： WPF C# 文章标签： wpf
小海
本文链接：https://blog.csdn.net/qq_48148522/article/details/140025687
版权
WPF 同时被 2 个专栏收录
36 篇文章 2 订阅
订阅专栏
C#
16 篇文章 0 订阅
订阅专栏

目录

Grid

StackPanel

WrapPanel

DockPanel

UniformGrid

Canvas&InkCanvas

Canvas

InkCanvas

Border

Grid

属性

ShowGridLines：显示边线

ColumnDefinitions 列集合 表示有几列下面就写几个ColumnDefinition

Width 宽：如果写具体数字则表示具体的宽度

没有写具体的值的话 剩余宽度平均分配 会根据屏幕的大小自动分配

* 代表比例

auto 代表自动填充最大宽度

RowDefinitions 行集合 表示有几行下面就写几个RowDefinition

Height 高：如果写具体数字则表示具体的高度

没有写具体的值的话 剩余高度平均分配 会根据屏幕的大小自动分配

* 代表比列

auto 代表自动填充最大宽度

Grid.IsSharedSizeScope="True" 共享列宽

需要在最外层Grid打开这个设置，然后在下面需要共享列宽的列设置：SharedSizeGroup="A"

Group一样的共享。

在Grid中，其他的控件想要放几行几列 需要另外设置：

Grid.Column = "几列" Grid.Row="几行" 没有设置默认 0列 0行

合并单元格

Grid.ColumnSpan = "合并几行" Grid.RowSpan="合并几列"

这里不是指定哪一列，而是指定合并多少列

Grid使用技巧：

  1. Grid中可以嵌套Grid。
  2. 当Windwo下面只能有一个控件的时候Grid是最好的控件。
  3. 任何布局只要使用恰当，都可以用Grid布局出来。
<Grid Grid.IsSharedSizeScope="True">
    <Grid ShowGridLines="True" Visibility="Hidden">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid ShowGridLines="True" Grid.Row="2" Grid.Column="1" />

        <Button Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="2"  Grid.RowSpan="2"/>
    </Grid>

    <Grid Height="30" ShowGridLines="True" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="A" Width="100"/>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <GridSplitter HorizontalAlignment="Right" Width="5" Background="Red"/>
    </Grid>
    
    <Grid Height="200" ShowGridLines="True" VerticalAlignment="Bottom">
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="A"/>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
    </Grid>
</Grid>

StackPanel

默认 从下往往压榨的模式

属性

Orientation 改变压榨方向 如果内容有固定大小，就大小撑开，如果没有固定大小，就根据内容撑开

FlowDirection 读写习惯 左向右 或右向左

使用场景：图文并显、工具栏

可以用Grid代替

<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
    <Button Content="Button1" />
    <Button Content="Button2" />
    <Button Content="Button3" />
</StackPanel>

WrapPanel

唯一一个不可以被Grid替代的布局控件，水平方向排列，过程中当前子项出界了，进行换行。

属性

Orientation 调整排列方向 默认值为水平方向

如果是水平排列 最大高度为所在行的最大高度为定

如果是垂直排列 最大宽度为所在行的最大宽度为定

使用场景：电脑桌面式图标排列、浏览器搜索历史关键词排列信息

<WrapPanel Orientation="Horizontal">
    <Button Content="Button1" Width="100" Height="30" />
    <Button Content="Button1" Width="100" Height="30" />
    <Button Content="Button1" Width="100" Height="30" Margin="10" />
    <Button Content="Button1" Width="100" Height="30" />
    <Button Content="Button1" Width="100" Height="30" />
    <Button Content="Button1" Width="100" Height="40" />
    <Button Content="Button1" Width="100" Height="30" />
    <Button Content="Button1" Width="200" Height="30" />
</WrapPanel>

DockPanel

停靠控件

属性

LastChildFill 最后一个孩子 是否填充

DockPanel.Dock 附加给子项控件使用 设置Dock属性 上下左右 停靠在哪里

注意：先写显示哪个子项的，先占有位置，第二个只能在空余位置中设置

使用场景：应用的主窗口布局（标题栏 状态栏 工具栏 菜单栏）

<DockPanel LastChildFill="False">
    <Button Content="Button1" Width="100" DockPanel.Dock="Bottom"/>
    <Button Content="Button3" DockPanel.Dock="Top"/>
    <Button Content="Button2" DockPanel.Dock="Left"/>
    <Button Content="Button4" Width="200" />
</DockPanel>

UniformGrid

均分 1*1 2*2 3*3 均分 等比分

属性

Columns 一共最多多少列 不存在指定列宽

Rows 一共最多多少行 不存在指定列高

如果只设置列 则内容行均分

如果只设置行 则内容列均分

如果行列都设置 则内容超出界面显示区域 但是也绘制

使用场景：9宫格的功能区域、图表（柱状图）

<UniformGrid Columns="3" Rows="3" Visibility="Collapsed">
    <Button Content="Button1"/>
    <Button Content="Button2"/>
    <Button Content="Button3"/>
    <Button Content="Button4"/>
    <Button Content="Button5"/>
    <Button Content="Button6"/>
    <Button Content="Button7"/>
    <Button Content="Button8"/>
    <Button Content="Button9"/>
</UniformGrid>

<UniformGrid Rows="1">
    <StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
        <Border Height="150" Width="10" Background="Gray" VerticalAlignment="Bottom"/>
        <Border Height="100" Width="10" Background="Orange" VerticalAlignment="Bottom"/>
    </StackPanel>
    <Border Height="150" Width="10" Background="Orange" VerticalAlignment="Bottom"/>
    <Border Height="120" Width="10" Background="Orange" VerticalAlignment="Bottom"/>
    <Border Height="100" Width="10" Background="Orange" VerticalAlignment="Bottom"/>
    <Border Height="100" Width="10" Background="Orange" VerticalAlignment="Bottom"/>
    <Border Height="200" Width="10" Background="Orange" VerticalAlignment="Bottom"/>
    <Border Height="100" Width="10" Background="Orange" VerticalAlignment="Bottom"/>
    <Border Height="100" Width="10" Background="Orange" VerticalAlignment="Bottom"/>
</UniformGrid>

Canvas&InkCanvas

Canvas

默认子控件坐标对齐左上角

属性

Canvas.Left 左边多少距离

Canvas.Top 上方多少距离

Canvas.Right 右边多少距离

Canvas.Bottom 下方多少距离

可以用Margin代替

如果上下左右都设置 优先级 左>右 上>下

使用场景：组态、组件分装（仪表指针）

<Canvas>
    <Button Content="Button1" Canvas.Left="100" Canvas.Top="20"/>
    <Button Content="Button2" Canvas.Right="120" Canvas.Bottom="20"/>
    <Button Content="Button2" Margin="10"/>
</Canvas>

InkCanvas

笔迹 -- 可以当画板 获取笔迹

属性

EditingMode 编辑的模式

Ink 笔迹 画布 默认Ink

EraseByPoint 根据点删除

EraseByStroke 整条线删除

Select 选中 可以编辑

DefaultDrawingAttributes 设置线的颜色和宽度和高度

使用场景：画板、签字、电子黑板

<InkCanvas EditingMode="Ink" Name="inkCanvas">
    <InkCanvas.DefaultDrawingAttributes>
        <DrawingAttributes Color="Red" Width="2" Height="2"/>
    </InkCanvas.DefaultDrawingAttributes>
    <Button Content="Button1" InkCanvas.Left="100" InkCanvas.Top="20" Click="Button_Click"/>
    <Button Content="Button2" InkCanvas.Right="120" InkCanvas.Bottom="20" Click="Button_Click_1"/>
    <Button Content="Button3" InkCanvas.Right="150" InkCanvas.Bottom="200" Click="Button_Click_2"/>
</InkCanvas>

Ink模式：

Select模式：

保存笔迹的做法：

private void Button_Click_4(object sender, RoutedEventArgs e)
{
    // 笔迹保存
    using FileStream fileStream = new FileStream("test.sk",FileMode.OpenOrCreate,FileAccess.ReadWrite);
    this.inkCanvas.Strokes.Save(fileStream,true);
}
private void Button_Click_5(object sender, RoutedEventArgs e)
{
    // 清除
    this.inkCanvas.Strokes.Clear();
}
private void Button_Click_6(object sender, RoutedEventArgs e)
{
    // 加载
    using FileStream fileStream = new FileStream("test.sk", FileMode.Open, FileAccess.Read);
    this.inkCanvas.Strokes.Add(new System.Windows.Ink.StrokeCollection(fileStream));
}

手写识别案例：

Ink ink = new Ink();
private void Button_Click(object sender, RoutedEventArgs e)
{
    // 识别库
    using RecognizerContext recognizerContext = new RecognizerContext();

    recognizerContext.Strokes = ink.CreateStrokes();
    recognizerContext.Strokes.Add(CombineStrokr());

    RecognitionResult result = recognizerContext.Recognize(out RecognitionStatus status);
    RecognitionAlternates als = result.GetAlternatesFromSelection();

    List<string> strs = new List<string>();
    for (int i = 0; i < als.Count; i++)
    {
        strs.Add(als[i].ToString());
    }
}

// Strokr 合并
private Stroke CombineStrokr()
{
    List<System.Drawing.Point> points = new List<System.Drawing.Point>();
    foreach (var item in this.inkCanvas.Strokes)
    {
        // 将 StylusPoints 转换为 System.Drawing.Point 
        points.AddRange(item.StylusPoints.Select(p => new System.Drawing.Point((int)p.X, (int)p.Y)).ToList());
    }

    return ink.CreateStroke(points.ToArray());
}
<!--手写文字识别Demo-->
<InkCanvas Name="inkCanvas" />

<Button Content="识别" Click="Button_Click" VerticalAlignment="Bottom"/>

需要引用以下dll库： 可以在本合集置顶博客看我的代码路径，可以下载使用即可。

演示如下：

手写个A：

识别出来的为：

看代码反馈，也很难不看出，是NoError，证明识别成功。然后再strs中进行解析匹配像的值。

可以看出，识别效果还是很准确的，第一个就是想要的值。
微软官网也有Ink识别笔画和形状的案例：https://learn.microsoft.com/zh-cn/windows/apps/design/input/convert-ink-to-text

Border

装饰控件

Border内部只能放一个对象

使用场景：

需要背景的时候，或者需要特殊样式的时候

<Border CornerRadius="20" 
        Width="200" 
        Height="80"
        Background="Orange" 
        BorderBrush="Red" 
        BorderThickness="2">
    <Border.Clip>
        <RectangleGeometry RadiusX="20" RadiusY="20" Rect="2 2 196 76" />
    </Border.Clip>
    <Grid Background="Gray" />
</Border>

小海聊工控上位机
关注
  • 22
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【愚公系列】2023年10月 WPF+上位机+工业互联 002-WPF布局控件
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
C# WPF布局控件LayoutControl介绍
DotnetNb的博客
03-11 865
LayoutControl是一个项目容器，将这些项目安排在一行或一列中。可以将LayoutGroup容器作为子容器添加到LayoutControl。LayoutGroup容器允许您将其项目并排（垂直或水平）或作为选项卡进行排列。LayoutGroup可以包含其他LayoutGroup对象作为子对象，以不同的方向排列它们的项目。这允许创建非线性布局：使用LayoutControl的最大好处是，它会自动维护子控件的一致布局。即使调整窗口大小、添加或删除控件，或者更改控件的字体设置，控件也不会重叠。
WPF 布局控件
Love_HBB的专栏
09-01 1569
WPF基础，界面布局控件汇总
WPF布局控件之StackPanel
就这样吧
02-27 1235
WPF布局控件之StackPanel
介绍WPF常用布局控件
qq_37875849的博客
06-07 541
StackPanel 自身可以嵌套使用，嵌套在其他布局控件中，和其他布局控件结合使用。定义一个区域，从中可以按相对位置水平或垂直排列各个子元素，支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。EditingMode：None（初始化）、Ink（画笔）、GestureOnly（响应墨迹）、Select（选择）、EraseByPoint（橡皮）、EraseByStroke（清除线段）将子元素排列成水平或垂直的一行，如果超出将换行或者换列进行显示，子元素超出部分，会被截取被隐藏。
WPF 布局控件 Grid表格
cjh16606260986的博客
06-17 445
Grid表格布局控件，在WPF项目的界面布局中非常常用。主要是以行列进行元素控制的。
WPF基础控件
代码改变世界
06-05 1618
在这篇博客中，我们将探讨 WPF 中一些常用的控件，包括 TextBlock、Label、ListBox、DataGrid、ListView、ToggleButton 等。我们将介绍每个控件的作用、常用属性和事件，并提供示例代码来演示它们的用法。无论您是初学者还是有经验的 WPF 开发者，本文都将为您提供有价值的信息，帮助您更好地理解和使用这些控件。
WPF布局控件之Grid布局
qq_36819973的博客
11-10 3777
Grid控件常用于界面表格网格的布局，Grid和其他各个Panel比较起来，功能最多也最为复杂。同时此面板可承载任意元素，包括控件，图形，甚至文字。各种元素依据屏幕坐标确定位置。
WPF布局控件之WrapPanel布局
qq_36819973的博客
11-03 906
。WrapPanel 位置子控件基于方向、水平方向 (默认) 从左到右的位置控件和从上到下垂直方向位置控件，一旦达到最大宽度或高度，控件会自动基于方向创建行或列。
wpf 布局控件 StackPanel DockPanel WrapPanel UniformGrid Canvas I
07-04
wpf 布局控件demo Grid StackPanel DockPanel WrapPanel UniformGrid Canvas InkCanvas Border
WPF 布局控件的用法
06-16
在Windows Presentation Foundation (WPF) 中，布局控件是构建用户界面的重要组成部分，它们负责管理子元素的位置和大小。WPF 提供了多种布局控件，以满足不同类型的UI设计需求。本文将深入探讨其中的一些关键布局...
wpf布局控件的使用
06-22
在Windows Presentation Foundation (WPF) 中，布局控件是构建用户界面的核心元素，它们负责管理子元素的位置和大小。本文将深入探讨WPF中的几种主要布局控件：Grid、StackPanel、WrapPanel以及Canvas，帮助你更好地...
WPF布局、控件、事件、绑定、MVVM基础入门
03-26
**WPF布局** Windows Presentation Foundation (WPF) 是微软推出的一种强大的用户界面框架，用于构建桌面应用程序。在WPF中，布局系统是构建用户界面的基础，它负责自动管理控件的位置和大小，以适应不同的屏幕尺寸...
WPF控件和布局
01-09
布局控件（如Grid、StackPanel、Canvas等）在WPF中至关重要，它们决定了其他控件的排列方式和大小。Grid是最常用的布局控件，通过行和列定义空间，并可以灵活调整控件的位置和尺寸。 **7. 示例代码** ```xml ...
WPF Border 妙用，切图
最新发布
u013400314的博客
08-14 227
【代码】WPF Border 妙用。
WPF窗体动态效果
zhaotianff的专栏
08-14 1026
WPF实现窗体动态效果，类似网页上的动态背景效果。
WPF APP生命周期和全局异常捕获
代码改变世界
08-13 233
WPF APP生命周期和全局异常捕获
WPF 数据模板DataTemplate、控件模板ControlTemplate、Style、ItemsPreseter
u013400314的博客
08-12 377
DataTemplate常用的地方有3处，分别是：ContentControl的ContentTemplate属性，相当于给ContentControl的内容穿衣服。ItemsControl的 ItemTemplate属性，相当于给ItemsControl的数据条目穿衣服。GridViewColumn的CellTemplate属性，相当于给GridViewColumn单元格里的数据穿衣服。
WPF控件与布局详解：数据驱动UI的概念
1. 布局控件（如Grid, StackPanel, DockPanel等）：用于组织和排列其他控件，其基础是Panel类。 2. 内容控件（如ContentControl）：只能包含一个子控件或布局。 3. 带标题的内容控件（如HeaderedContentControl）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值