WPF布局控件

目录

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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【面试题】IPS（入侵防御系统）和IDS（入侵检测系统）的区别

【面试题】IPS（入侵防御系统）和IDS（入侵检测系统）的区别

IPS&#xff08;入侵防御系统&#xff09;和IDS&#xff08;入侵检测系统&#xff09;在网络安全领域扮演着不同的角色&#xff0c;它们之间的主要区别可以归纳如下&#xff1a; 功能差异&#xff1a; IPS&#xff1a;这是一种主动防护设备&#xff0c;不仅具备检测攻击的能力&…
阅读更多...
UNet进行病理图像分割

UNet进行病理图像分割

数据集链接&#xff1a;https://pan.baidu.com/s/1IBe_P0AyHgZC39NqzOxZhA?pwdnztc 提取码&#xff1a;nztc UNet模型 import torch import torch.nn as nnclass conv_block(nn.Module):def __init__(self, ch_in, ch_out):super(conv_block, self).__init__()self.conv nn…
阅读更多...
JVM原理（十）：JVM虚拟机调优分析与实战

JVM原理（十）：JVM虚拟机调优分析与实战

1. 大内存硬件上的程序部署策略 这是笔者很久之前处理过的一个案例&#xff0c;但今天仍然具有代表性。一个15万PV/日左右的在线文档类型网站最近更换了硬件系统&#xff0c;服务器的硬件为四路志强处理器、16GB物理内存&#xff0c;操作系统为64位CentOS5.4&#xff0c;Resin…
阅读更多...
Android Studio 解决AAPT: error: file failed to compile

Android Studio 解决AAPT: error: file failed to compile

1.找到项目下的build.gradle 2.在android语块中添加下面代码 aaptOptions.cruncherEnabled false aaptOptions.useNewCruncher false 12
阅读更多...
Linux中的库

Linux中的库

什么是库&#xff1f; 库是一组预先编译好的方法/函数的集合&#xff0c;其他程序想要使用源文件中的函数时&#xff0c;只需在编译可执行程序时&#xff0c;链接上该源文件生成的库文件即可。 库分为两类&#xff1a;静态库和动态库 在Linux系统中&#xff0c;以.a为后缀的…
阅读更多...
力扣热100 哈希

力扣热100 哈希

哈希 1. 两数之和49.字母异位词分组128.最长连续序列 1. 两数之和 题目&#xff1a;给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。你可以假设每种输入只会对应一个答案。…
阅读更多...
【NOI-题解】1326. 需要安排几位师傅加工零件1228. 排队打水问题1229. 拦截导弹的系统数量求解

【NOI-题解】1326. 需要安排几位师傅加工零件1228. 排队打水问题1229. 拦截导弹的系统数量求解

文章目录 一、前言二、问题问题&#xff1a;1326. 需要安排几位师傅加工零件问题&#xff1a;1228. 排队打水问题问题&#xff1a;1229. 拦截导弹的系统数量求解 三、感谢 一、前言 本章节主要对贪心问题进行讲解&#xff0c;包括《1326. 需要安排几位师傅加工零件》《1228. 排…
阅读更多...
每天五分钟深度学习：解决for循环效率慢的关键在于向量化

每天五分钟深度学习：解决for循环效率慢的关键在于向量化

本文重点 上一节课程中，我们学习了多样本的线性回归模型，但是我们的伪代码实现中使用了大量的for循环，这样代码的问题是效率很低。为了克服这一瓶颈，向量化技术应运而生，成为提升程序执行效率、加速数据处理速度的重要手段。 向量化技术概述 向量化（Vectorization）是…
阅读更多...
目标检测算法讲解：从传统方法到深度学习，全面解析检测技术的演进与应用！

目标检测算法讲解：从传统方法到深度学习，全面解析检测技术的演进与应用！

在计算机视觉领域&#xff0c;目标检测是一个基本且关键的任务&#xff0c;它不仅涉及图像中对象的识别&#xff0c;还包括确定这些对象的具体位置。这一任务通常通过算法来实现&#xff0c;这些算法能够识别出图像中的一个或多个目标&#xff0c;并给出每个目标的类别和位置。…
阅读更多...
Kafka-服务端-网络层-源码流程

Kafka-服务端-网络层-源码流程

整体架构如下所示&#xff1a; responseQueue不在RequestChannel中&#xff0c;在Processor中&#xff0c;每个Processor内部有一个responseQueue 客户端发送的请求被Acceptor转发给Processor处理处理器将请求放到RequestChannel的requestQueue中KafkaRequestHandler取出reque…
阅读更多...
Python：Python简介

Python：Python简介

一、Python简介 1.Python的诞生 诞生&#xff1a;1989年圣诞节期间&#xff0c;Guido van Rossum为了打发圣诞节假期的无聊&#xff0c;便开始了Python语言的编写。 命名&#xff1a;Python第一个发行版本是在1991年&#xff0c;起名为Python是源自于Guido喜欢的一档电视节目…
阅读更多...
英伟达经济学：云服务商在GPU上每花1美元 就能赚7美元

英伟达经济学：云服务商在GPU上每花1美元 就能赚7美元

NVIDIA超大规模和 HPC 业务副总裁兼总经理 Ian Buck 近日在美国银行证券 2024 年全球技术大会上表示&#xff0c;客户正在投资数十亿美元购买新的NVIDIA硬件&#xff0c;以跟上更新的 AI 大模型的需求&#xff0c;从而提高收入和生产力。 Buck表示&#xff0c;竞相建设大型数据…
阅读更多...
在 PostgreSQL 中强制执行连接顺序#postgresql认证

在 PostgreSQL 中强制执行连接顺序#postgresql认证

让我们首先创建一些表&#xff1a; PgSQL plan# SELECT CREATE TABLE x || id || (id int) FROM generate_series(1, 5) AS id;?column? --------------------------CREATE TABLE x1 (id int)CREATE TABLE x2 (id int)CREATE TABLE x3 (id int)CREATE TABLE…
阅读更多...
Centos7网络配置(设置固定ip)

Centos7网络配置(设置固定ip)

文章目录 1进入虚拟机设置选中【网络适配器】选择【NAT模式】2 进入windows【控制面板\网络和 Internet\网络和共享中心\更改适配器设置】设置网络状态。3 设置VM的【虚拟网络编辑器】4 设置系统网卡5 设置虚拟机固定IP 刚安装完系统&#xff0c;有的人尤其没有勾选自动网络配置…
阅读更多...
解锁机器学习算法面试挑战课程

解锁机器学习算法面试挑战课程

在这个课程中&#xff0c;我们将从基础知识出发&#xff0c;系统学习机器学习与算法的核心概念和实践技巧。通过大量案例分析和LeetCode算法题解&#xff0c;帮助您深入理解各种面试问题&#xff0c;并掌握解题技巧和面试技巧。无论是百面挑战还是LeetCode算法题&#xff0c;都…
阅读更多...
VUE3解决跨域问题

VUE3解决跨域问题

本文基于vue3 vite element-plus pnpm 报错&#xff1a;**** has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 原因&#xff1a;前端不能直接访问其他IP&#xff0c;需要用vite.config.ts &#xff0…
阅读更多...
仿美团饿了么程序,外卖人9.0商业版外卖订餐源码（PC+微信）

仿美团饿了么程序,外卖人9.0商业版外卖订餐源码（PC+微信）

仿美团饿了么程序,外卖人9.0外卖订餐源码,PC微信WAP短信宝,多城市多色版 非常不错的独立版外卖跑腿网站源码&#xff0c;喜欢的可以下载调试看看吧&#xff01;&#xff01; 仿美团饿了么程序,外卖人9.0外卖订餐源码
阅读更多...
鸿蒙开发Ability Kit（程序访问控制）：【向用户申请单次授权】

鸿蒙开发Ability Kit（程序访问控制）：【向用户申请单次授权】

申请使用受限权限 受限开放的权限通常是不允许三方应用申请的。当应用在申请权限来访问必要的资源时&#xff0c;发现部分权限的等级比应用APL等级高&#xff0c;开发者可以选择通过ACL方式来解决等级不匹配的问题&#xff0c;从而使用受限权限。 举例说明&#xff0c;如果应…
阅读更多...
【面试干货】Static关键字的用法详解

【面试干货】Static关键字的用法详解

【面试干货】Static关键字的用法详解 1、Static修饰内部类2、Static修饰方法3、Static修饰变量4、Static修饰代码块5、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java编程语言中&#xff0c;static是一个关键字&#xff0c;它可…
阅读更多...
【多模态LLM】以ViT进行视觉表征的多模态模型1（BLIP-2、InstructBLIP）

【多模态LLM】以ViT进行视觉表征的多模态模型1（BLIP-2、InstructBLIP）

note CLIP和BLIP的区别&#xff1a; CLIP&#xff1a;通过对比学习联合训练&#xff0c;预测图像和文本之间的匹配关系。即使用双塔结构&#xff0c;分别对图像和文本编码&#xff0c;然后通过计算cos进行图文匹配。BLIP&#xff1a;包括两个单模态编码器&#xff08;图像编码…
阅读更多...
最新文章

Copyright @ 2022~2023