1WPF---常用布局

眼里的星光lzw

已于 2023-12-21 18:07:34 修改

阅读量1k

点赞数

分类专栏： WPF 文章标签： wpf 学习 c#

于 2022-08-23 23:00:11 首次发布

本文链接：https://blog.csdn.net/qq_58563355/article/details/125247374

版权

WPF 专栏收录该内容

23 篇文章 16 订阅

订阅专栏

一.Day01-03

1.数据绑定

改动通知到界面

2.常用布局控件

1.Grid面板:功能最强大，布局最灵活的容器

基本属性：行定义：RowDefinitions->RowDefinition(Height：*/auto/数字) 列定义：ColumnDefinitions->ColumnDefinition(Width: */auto/数字) 尺寸共享：Grid.IsSharedSizeScope=“True” 配合行/列中的SharedSizeGroup属性 - 附加属性： Grid.Row/Grid.Column 如果是第0行或第0列，可以省略

2. StackPanel堆栈

最简单的布局容器之一，基本特性水平或垂直排队,从下往上,从右往左

主要属性配置： Orientation（布局的方向）

3.DockPanel停靠

通过设置Dock停靠进行布局

主要属性配置： - 基本属性：LastChildFill - 附加属性： DockPanel.Dock（Left/Top/Right/Bottom）

技巧:alt+箭头移动顺序

4.WrapPanel流式布局

唯一一个不能被Grid替代的布局控件，按行排列，尺寸不够时换行；按列排列，尺寸不够时折行

主要属性配置： Orientation

5.UniformGrid

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

主要属性配置：Rows、Columns，进行行数以及列数的指定

6.Canvas

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

主要属性配置： - 附加属性：Canvas.Left/Canvas.Top/Canvas.Right/Canvas.Bottom

Panel.ZIndex=””可以指定优先显示层级

7.InkCanvas

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

主要属性配置： - 基本属性： EditingModel、Strokes（获取所有笔迹）、DefaultDrawingAttributes（设置笔迹样式） GestureOnly 配合手势操作 - 附加属性： InkCanvas.Left/InkCanvas.Top/InkCanvas.Right/InkCanvas.Bottom

EditingModel:

None=0// 忽略鼠标和手写笔输入
Ink = 1// 允许用户绘制批注，默认模式。使用鼠标或者手写笔绘图时，会绘制笔画
GestureOnly = 2// 不远许用户绘制笔画批注，但会关注预先定义的特定姿势，由System.Windows.Ink.ApplicationGesture定义笔势
InkAndGesture = 3// 允许用户绘制壁画批注，也可以识别预先定义的姿势
Select = 4// 允许用户选择保存在Children集合中的元素，要选择一个元素用户必须单机该元素或者拖动套索选择该元素，一旦选择一个元素就可以移动该元素，改变其尺寸或将其删除
EraseByPoint = 5// 擦除鼠标选中的笔画
EraseByStroke = 6// 擦除选中的一笔，开始到结束都会擦除

8.Border

装饰控件：背景色/边框圆角子对象也只能一个

主要属性配置：BorderBrush\BroderThinkness\Background\CornerRadius

使用场景：绘制边线背景色、圆角(Rectangle) 使用非常频繁

WPF各布局源码地址:https://www.github.com/dotnet/wpf

3.WPF体系结构

DispatcherObject Dispatcher

DependencyObject

Visual-绘图对象

UIElement-布局、输入、焦点、事件；路由事件

FrameworkElement：对齐

Shape：Line、Path

Control：｛TextBlock：FrameworkElement｝支持控件模板 ContentCOntrol-》单一内容 ItemsControl-》集合子项（ListBox）

Panel-所有容器控件的基类-Grid、StackPanel

Border-装饰控件

4.自定义布局

using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;

namespace Zhaoxi.WPFStudy
{
    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 });
                // 控件测量->得到控件的期望尺寸DesiredSize
                item.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);
                }
                else
                    i++;
            }

            // 返回所有子控件所需要的Size，可能比容器大小要大：availableSize
            return 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; }
    }
}

实现效果