WPF UI 界面布局 魔术棒 文字笔记识别 技能提升 布局功能扩展与自定义 继承Panel的对象,测量与排列 系列七

应用开发第一步

功能分类:页面上的功能区域划分。。。。需求分析 业务逻辑 数据流 功能模块 UI/UX 编码 测试 发布 功能开发与布局

不用显式的方式设定元素的尺寸 不使用屏幕坐标来指定位置

Grid

功能最强大,布局最灵活的容器

主要属性配置:ColumnDefinitions(ColumnDefinition)、RowDefinitions(RowDefinition)

ShowGridLines、IsSharedSizeScope(SharedSizeGroup)

给子项控件使用:Grid.Row Grid.Column

使用场景:广泛,不知道用什么布局,就用Grid,意外(WrapPanel)

StackPanel

最简单的布局容器之一

主要属性配置:Orientation-调整排列方向、FlowDirection

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

可以Grid代替

WrapPanel

唯一一个不能被Grid替代的布局控件,水平方向排列,过程中当前子项出界了,进行折行

主要属性配置:Orientation-调整排列方向

使用场景:桌面式图标排列、搜索历史关键词排列

DockPanel

通过设置Dock停靠进行布局

主要属性配置:LastChildFill、DockPanel.Dock

使用场景:应用的主窗口布局(标题栏、状态栏、工具栏、菜单栏)

UniformGrid

另一种行列风格布局,自动生成统一一致的行列

主要属性配置:Columns、Rows 指定的是当前区域均分多少行和列,不存在指定行高和列宽

使用场景:9宫格的功能区域、图表

Canvas

通过精确坐标定位放置子元素

主要属性配置:Canvas.Left、Top、Right、Bottom

使用场景:组态、组件封装(仪表)

InkCanvas

支持任意笔画输入的画布组件

主要属性配置:

使用场景:

画笔

橡皮擦

魔术棒

其他 文字笔记识别

WPF UI InkCanvas 导师演示画板 演示 笔记 画笔 识别-CSDN博客

Border

最基础的装饰控件

主要属性配置:

使用场景:

技能提升 布局功能扩展与自定义

功能需求: 继承Panel的对象,测量与排列

后端

cs 复制代码
protected override Size MeasureOverride(Size availableSize)
{
    double total_y = 0;
    foreach (UIElement item in this.InternalChildren)
    {
        item.Measure(availableSize);
        total_y += item.DesiredSize.Height;
    }
    return new Size(availableSize.Width, total_y);
}


protected override Size ArrangeOverride(Size finalSize)
{
    double offset_y = 0;
    foreach (UIElement item in this.InternalChildren)
    {
        item.Arrange(new Rect(0, offset_y, finalSize.Width, item.DesiredSize.Height));
        offset_y += item.DesiredSize.Height;
    }
    return base.ArrangeOverride(finalSize);
}

扩展

cs 复制代码
public int ColumnSpace { get; set; } = 0;
public int RowSpace { get; set; } = 0;

protected override Size MeasureOverride(Size availableSize)
{
    //var perHeight = availableSize.Height / Math.Ceiling(this.InternalChildren.Count * 0.1 / 3);
    var perWidth = (availableSize.Width - ColumnSpace * 2) / 3;

    double total_y = 0;
    foreach (UIElement item in this.InternalChildren)
    {
        item.Measure(new Size(perWidth, availableSize.Height));
        total_y = item.DesiredSize.Height;
    }
    return new Size(availableSize.Width, total_y);
}


protected override Size ArrangeOverride(Size finalSize)
{
    double offset_y = 0;
    double offset_x = 0;
    var perWidth = (finalSize.Width - ColumnSpace * 2) / 3;

    for (int i = 1; i < this.InternalChildren.Count + 1; i++)
    {
        UIElement item = this.InternalChildren[i - 1];

        item.Arrange(new Rect(offset_x, offset_y, perWidth, item.DesiredSize.Height));

        if (i % 3 == 0)
        {
            offset_x = 0;
            offset_y += item.DesiredSize.Height + RowSpace;
        }
        else
            offset_x += perWidth + ColumnSpace;

    }
    return base.ArrangeOverride(finalSize);
}

C# WPF 3D 数据孪生 系列六-CSDN博客

WPF 3D绘图 点云 系列五-CSDN博客

WPF UI 3D 多轴 机械臂 stl 模型UI交互-CSDN博客

WPF UI 3D 基本概念 点线三角面 相机对象 材质对象与贴图 3D地球 光源 变形处理 动作交互 辅助交互插件 系列三-CSDN博客

相关推荐
界面开发小八哥36 分钟前
界面控件DevExpress WPF v25.1预览 - 支持Windows 11系统强调色
windows·wpf·界面控件·devexpress·ui开发·.net 9
军训猫猫头3 小时前
89.WPF 中实现便捷的数字输入框:DecimalUpDown 控件的使用 WPF例子 C#例子.
开发语言·c#·wpf
火星思想3 小时前
都2025年了,还在问构建工具是干嘛的?
前端·前端框架·设计
Pasregret4 小时前
缓存与数据库一致性深度解析与解决方案
数据库·缓存·wpf
cooldream20095 小时前
深入理解MVP架构:让UI层与业务逻辑完美分离的设计模式
ui·设计模式·架构·系统架构师
拖孩5 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
sky_smile_Allen10 小时前
[Unity]-[UI]-[Prefab] 关于Unity UGUI 的布局及组件讲解
ui·unity·游戏引擎
Python_金钱豹11 小时前
Text2SQL零代码实战!RAGFlow 实现自然语言转 SQL 的终极指南
前端·数据库·sql·安全·ui·langchain·机器人
Quz1 天前
使用Qt Quick Controls创建自定义日历组件
qt·ui·交互
Java林间2 天前
Zookeeper是什么?基于zookeeper实现分布式锁
分布式·zookeeper·wpf