WPF布局控件

news2024/12/23 18:15:52

目录

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1885110.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

智能井盖监测系统：守护城市安全的新防线

智能井盖监测系统：守护城市安全的新防线

​ ​​在快速发展的现代都市中&#xff0c;井盖作为连接地上与地下世界的“隐形门”&#xff0c;其安全状态直接关系到市民的生命财产安全。随着物联网、大数据及人工智能技术的飞速发展&#xff0c;智能井盖监测系统的出现为解决传统井盖管理难题提供了创新方案&#xff0…
阅读更多...
给小程序接入AI服务之后，我的睡后收入又增加了

给小程序接入AI服务之后，我的睡后收入又增加了

自从本人写了《[从零开始三天学会微信小程序开发]》教程以来&#xff0c;不断有人加我&#xff0c;一起交流微信小程序开发的事情&#xff0c;很让人开心。 也有一些人和我说&#xff0c;现在已经是AI时代了&#xff0c;怎么还用这种固定内容的模式呢&#xff1f;确实是的&…
阅读更多...
ROS2使用Python开发动作通信

ROS2使用Python开发动作通信

1.创建接口节点 cd chapt4_ws/ ros2 pkg create robot_control_interfaces --build-type ament_cmake --destination-directory src --maintainer-name "joe" --maintainer-email "1027038527qq.com" mkdir -p src/robot_control_interfaces/action touch…
阅读更多...
STM32自己从零开始实操08:电机电路原理图

STM32自己从零开始实操08:电机电路原理图

一、LC滤波电路 其实以下的滤波都可以叫低通滤波器。 1.1倒 “L” 型 LC 滤波电路 1.1.1定性分析 1.1.2仿真实验 电感&#xff1a;通低频阻高频的。仿真中高频信号通过电感&#xff0c;因为电感会阻止电流发生变化&#xff0c;故说阻止高频信号 电容&#xff1a;隔直通交。…
阅读更多...
MAS1102量产工具下载，MAS1102+N48R固件开卡软件分享

MAS1102量产工具下载，MAS1102+N48R固件开卡软件分享

最近买了一款某牌子的固态硬盘&#xff0c;拆开后发现采用的是联云MAS1102主控&#xff0c;闪存颗粒是N48R&#xff0c;如下图。 查了一下MAS1102主控&#xff0c;是联芸科技基于SATA3.2技术开发的DRAM-less SSD控制芯片&#xff0c;支持2.5寸/HalfSlim/M.2/mSATA版型&#xff…
阅读更多...
S7-1500PLC控制V90总线伺服报“编码器故障“

S7-1500PLC控制V90总线伺服报“编码器故障“

S7-1500PLC控制V90总线伺服报编码器故障&#xff0c;如下图所示&#xff1a; 1、编码器故障 2、编码器配置 3、自动选择编码器值
阅读更多...
深度解读 OkHttpClient2

深度解读 OkHttpClient2

介绍 OkHttpClient 是 OkHttp 库的核心类&#xff0c;它管理连接、线程池和配置选项。OkHttpClient 提供了强大的功能和灵活的配置选项&#xff0c;使得它成为 Android 和 Java 应用中广泛使用的 HTTP 客户端。 在本文中&#xff0c;我们将深入解读 OkHttpClient&#xff0c;…
阅读更多...
基于PHP安龙县农产品销售网站的设计与实现13137

基于PHP安龙县农产品销售网站的设计与实现13137

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3论文结构与章节安排 2 相关技术介绍 2.1 PHP描述 2.2 MySQL数据库 2.3 Think PHP框架 3网站分析 3.1 可行性分析 3.2 网站流程分析 3.2.1 数据新增流程 3.2.2 数据删除流程 3.3 网站功能分析 3.3.1 功能性分析…
阅读更多...
基于SpringBoot民宿管理系统设计和实现(源码+LW+调试文档+讲解等)

基于SpringBoot民宿管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…
阅读更多...
HSP_12章 Python面向对象编程oop_多态

HSP_12章 Python面向对象编程oop_多态

文章目录 P128 多态问题的引出P129 多态细节和使用1. 多态介绍&特别说明2. 多态的好处3. 特别说明: Python多态的特点4. 使用多态的机制来解决主人喂食物的问题 P128 多态问题的引出 先看一个问题 # 说明: 先试用传统的方式完成 class Food:name Nonedef __init__(self,…
阅读更多...
nginx: [warn] 20240 worker_connections exceed open file resource limit: 1024

nginx: [warn] 20240 worker_connections exceed open file resource limit: 1024

nginx: [warn] 20240 worker_connections exceed open file resource limit: 1024 报错翻译过来就是&#xff1a; nginx&#xff1a;[警告] 20240 worker_connections超出打开文件资源限制&#xff1a;1024 解决方法&#xff1a; 1.查看当前文件打开数量的限制 ulimit -S…
阅读更多...
深入了解DDoS攻击及其防护措施

深入了解DDoS攻击及其防护措施

深入了解DDoS攻击及其防护措施 分布式拒绝服务&#xff08;Distributed Denial of Service&#xff0c;DDoS&#xff09;攻击是当今互联网环境中最具破坏性和普遍性的网络威胁之一。DDoS攻击不仅危及企业的运营&#xff0c;还可能损害其声誉&#xff0c;造成客户信任度的下降。…
阅读更多...
在CAM350中如何删除PCB走线的一部分？

在CAM350中如何删除PCB走线的一部分？

在CAM350中如何删除PCB一条走线的一部分&#xff1f; 在CAM350中如何删除走线&#xff1f; 操作方法如下&#xff1a; 1、因为这是一整条线&#xff0c;如果点击删除&#xff0c;整条线会被全部删除。可以在你想删除的位置增加一个节点。 选择菜单栏→edit 选择→add vertax 2…
阅读更多...
【最新综述】医学图像分割深度半监督学习(上）

【最新综述】医学图像分割深度半监督学习(上）

摘要&#xff1a; 最近&#xff0c;深度学习在各种计算机视觉任务中展现出了巨大的前景。然而&#xff0c;在许多实际应用中&#xff0c;没有大规模的标记数据集&#xff0c;这限制了深度学习的应用。为了解决这个问题&#xff0c;半监督学习引起了计算机视觉界的广泛关注&…
阅读更多...
Steam社区101错误代码/steam社区报错、打不开怎么办

Steam社区101错误代码/steam社区报错、打不开怎么办

Steam社区是很多游戏玩家经常逛的一个互动空间&#xff0c;玩家可以在Steam社区了解游戏的相关评价&#xff0c;也可以在Steam社区和五湖四海的游戏玩家一起讨论最近游戏的心得&#xff0c;分享游玩技巧&#xff0c;探讨游戏战术等等&#xff0c;结识不同地区的玩家。不过很多玩…
阅读更多...
WAIC | 斯梅尔数学与计算研究院邀您莅临WAIC 2024“数学与人工智能”论坛

WAIC | 斯梅尔数学与计算研究院邀您莅临WAIC 2024“数学与人工智能”论坛

当我们谈论起人工智能这一变革性力量时&#xff0c;就不得不提及数学。人工智能作为当今社会的热门话题&#xff0c;从AlphaGo到ChatGPT&#xff0c;从智能制造到数字文旅&#xff0c;它的发展和应用深刻地影响着行业和人们的生活。然而&#xff0c;人工智能的发展和基础离不开…
阅读更多...
跨平台营销的智能协同：Kompas.ai如何整合多渠道策略

跨平台营销的智能协同：Kompas.ai如何整合多渠道策略

引言 在数字化营销的今天&#xff0c;消费者的注意力分散在多个平台上。品牌要想有效地吸引和保持消费者的关注&#xff0c;就必须采取跨平台营销策略。Kompas.ai&#xff0c;作为一款智能营销工具&#xff0c;能够帮助品牌实现这一目标。 跨平台营销的重要性 跨平台营销能够…
阅读更多...
Redis哨兵和集群模式

Redis哨兵和集群模式

特性哨兵模式集群模式高可用性是是数据分片否是水平扩展否是配置复杂度低高管理复杂度低高多键操作支持是否&#xff08;有限制&#xff09; 哨兵模式 原理&#xff1a; Redis 哨兵模式是一种高可用性解决方案&#xff0c;它通过监控 Redis 主从架构&#xff0c;自动执行故障…
阅读更多...
Rust借助dotenv库读取环境变量

Rust借助dotenv库读取环境变量

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…
阅读更多...
信息收集---端口服务信息收集

信息收集---端口服务信息收集

1. 什么是端口 是设备与外界通讯交流的出口。端口可分为虚拟端口和物理端口&#xff0c;其中虚拟端口指计算机内部或交换机路由器内的端口&#xff0c;不可见。例如计算机中的80端口、21端口、23端口等。物理端口又称为接口&#xff0c;是可见端口&#xff0c;计算机背板的RJ45…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023