(四)WPF - 布局

news/2024/4/15 13:58:12

一、布局过程

WPF 布局包括两个阶段:一个测量阶段和排列阶段

  • 在测量阶段,容器遍历所有子元素,并询问子元素它们所期望的尺寸。
  • 在排列阶段,容器在合适的位置放置子元素。(每个元素都被其父元素告知它自己的尺寸是多少以设定尺寸和位置)

这两个阶段让父和子元素能够协商需要多少空间。

3个尺寸被协商:
1)可用尺寸: 用于测量阶段的初始约束。(父元素愿意给子元素的最大空间)
2)期望尺寸: 子控件向想要的尺寸,
3)实际尺寸: 父元素分配给子元素的最终尺寸。

Measure、MeasureCore、Arrange 和 ArrangeCore 实现了布局的两个阶段。

Visibility 来控制子对象如何参与进布局:

Visible(显示): 它们将被显示出来并将占用布局控件中的某个空间。
Hidden(隐藏): 不显示,但占用布局控件中的空间。
Collapsed(折叠): 既不显示也占用布局控件中的空间。

注意:布局容器不能提供任何滚动支持。

1)槽(Slot)模型

Margin、Padding、HorizontalAlignment、VerticalAlignment

2)FlowDirection

FlowDirection 是 FrameworkElement (以及其他一些类)的属性,它可以改变元素的内部流的方向。

作用: 用来处理面板子元素的布局问题,但它也可以应用于 那些内容在子控件中对齐的情况。

有两种值:
LeftToRight(FrameworkElement 的默认值):从左向右
RightToLeft:从右向左

3)变换

ReaderTransform 和 LayoutTransform
2D变换类,改变元素的尺寸和位置。
LayoutTransform,它在对元素布局以前被应用。
RenderTransform(继承自 UIElement),它在布局结束后被应用(但在元素被渲染前)。

点击跳转到 文章“WPF 动态变换

两者变换应用区别:

请添加图片描述

LayoutTransform 没有原点的概念,因为被变换元素的定位是由父面板规则完全控制的。
RenderTransformOrigin 可以被设置为一个 System.Windows.Point ,默认值是 (0,0)。

RenderTransform 5个常见的原点:

请添加图片描述

RotateTransform

根据3个浮点类型属性的值来旋转元素:

  • Angle:旋转角度,单位为度数。
  • CenterX:旋转的水平中心。
  • CenterY:旋转的垂直中心。

注意:CenterX 和 CenterY 只有当 RotateTransform 被应用为一个 RenderTransform 时才有用,因为如果被应用为 LayoutTransforms 这个位置仍然由父面板决定。

二、布局容器

请添加图片描述

Panel 类的共有属性

名称说明
Background该属性是用于为面板背景着色的画刷。如果想接收鼠标事件,就必须将该属性设置为非空值。
Children该属性是在面板中存储的条目集合。这是第一级条目——换句话说,这些条目自身也可以包含更多的条目
IsItemsHost该属性是一个布尔值,如果面板用于显示与ItemsControl控件关联的项(例如,TreeView 控件中的节点或列表框中的列表项),该属性值为 true。在大多数情况下,甚至不需要知道列表控件使用后台面板来管理它所包含的条目的布局。但如果希望创建自定义的列表,以不同方式放置子元素(例如,以平埔方式显示图像的 ListBox 控件),该细节就变得很重要了。
StackPanel在水平或垂直的堆栈中放置元素。这个布局容器通常于更大、更复杂窗口中的一些小区域
WrapPanel在一系列可换行的行中放置元素。在水平方向上,WrapPanel 面板从左向右放置条目,然后在随后的行中放置元素。在垂直方向上,WrapPanel 面板在自上而下的列中放置元素,并使用附加的列放置剩余的条目
DockPanel根据容器的整个边界调整元素
Grid根据不可见的表格在行和列中排列元素,这是最灵活,最常用的容器之一
UniformGrid在不可见但是强制所有单元格具有相同尺寸的表中放置元素,这个布局容器不常用
Canvas使用固定坐标绝对定位元素。这个布局容器与传统 Windows 窗体应用程序最相似,但没有提供锚定或停靠功能。因此,对于尺寸可变的窗口,该布局容器不是合适的选择。

其他面板:

名称说明
TabPanel在TabPanel 面板中包含多个选项卡
ToolbarPanel工具栏中的多个按钮
ToolbarOverflowPanelToolbar 控件的溢出菜单中的多个命令
VirtualizingStackPanel数据绑定列表控件使用该面板以大幅度降低开销
InkCanvas该控件支持处理平板电脑(TabletPC)上的手写笔(stylus)输入(例如,根据选择的模式,InkCanvas 控件支持使用指针绘制范围,以选择屏幕上的元素。也可通过普通计算机和鼠标使用 InkCanvas 控件)

三、WrapPanel 和 DockPanel 面板

1、WrapPanel 面板

WrapPanel 面板在可能的空间中,以一次一行或一列的方式布置控件。
如果在 WrapPanel 中放入超过其容器宽度的内容时,这些控件被换行显示以形成换行效果.

<WrapPanel Margin="3"><Button VerticalAlignment="Top">Top Button</Button>
<Button MinHeight="60">Tall Button</Button>
<Button VerticalAlignment="Bottom">Bottom Button</Button>
<Button >Stretched Button</Button>
<Button VerticalAlignment="Center">Centered Button</Button></WrapPanel>

请添加图片描述

2、DockPanel 面板

DockPanel 提供停靠支持,该容器中的子元素可以使用Dock属性来设置要停靠的容器边缘。
LastChildFill属性为true,该设置告诉 DockPanel 面板使最后一个元素占满剩余的所有空间。

<DockPanel LastChildFill="True"><Button DockPanel.Dock="Top">Top Button</Button>
<Button DockPanel.Dock="Buttom" H>Buttom Button</Button>
<Button DockPanel.Dock="Left" >Left Button</Button>
<Button DockPanel.Dock="Right">Right Button</Button>
<Button>Remaining Space</Button></DockPanel>

请添加图片描述

在顶部停靠多个元素

<DockPanel LastChildFill="True"><Button DockPanel.Dock="Top">A Stretched Top Button</Button>
<Button DockPanel.Dock="Top" HorizontalAlignment="Center">A Centered Top Button</Button>
<Button DockPanel.Dock="Top" HorizontalAlignment="Left">A Left-Aligned Top Button</Button>
<Button DockPanel.Dock="Buttom">Buttom Button</Button>
<Button DockPanel.Dock="Left">Left Button</Button>
<Button DockPanel.Dock="Right">Right Button</Button>
<Button>Remaining Space</Button></DockPanel>

请添加图片描述


http://www.ppmy.cn/news/535948.html

相关文章

surface pro7 问题集锦

Surface pro 7遇到的问题集锦 问题一&#xff1a;想入手surface pro7但是256G的比128G的要贵一千大洋&#xff0c;怎么办呢&#xff1f;预算有限&#xff0c;查到可以插TF卡拓容&#xff0c;于是就全网开始搜选卡攻略。终于找到你&#xff5e; 上链接&#xff1a;https://post…

hwc2 surfaceflinger启动流程分析

先还是大体的来看下流程图&#xff0c;这个比hwc1复杂了好多&#xff0c;不是太好理解&#xff1a; 1.SurfaceFlinger.init "Starting with vr flinger active is not currently supported.");mRealHwc new HWComposer(false);mHwc mRealHwc;mHwc->setEventHa…

Platinum Maestro运动控制器 —— PVT模式笔记

文章目录 0. 文章说明1. PVT说明2.PVT 插值模式2.1 三次多项式插值(eCUBIC_POLYNOM)2.2 五次多项式插值(eQUINTIC_ON_CUBIC)2.3 七次样条多项式(eSEPTIC_ON_CUBIC)2.4 正弦插值2.4.1 三角正弦插值(eCYCLOID_VELOCITY_MODIFIED1)2.4.2 梯形正弦插值(eCYCLOID_VELOCITY_MODIFIED2…

SurfaceFlinger模块

SurfaceFlinger是一个系统服务&#xff0c;作用就是接受不同layer的buffer数据进行合成&#xff0c;然后发送到显示设备进行显示。 SurfaceFlinger进程是什么时候起来的&#xff1f; 在之前的Android低版本手机上&#xff0c;SurfaceFlinger进程是在init.rc中启动的&#xff0…

androidP Surface到SurfaceFlinger -->创建Surface (一)

创建Surface 前言ViewRootImpl创建Surface 前言 我们前面已经分析过Activity启动如何去连接到SurfaceFlinger了&#xff0c;接下来就看Activity的Surface的创建到SurfaceFlinger的过程。ViewRootImpl创建Surface 在调用了WindowManagerGlobal的addView方法之后会首先去创建一个…

Ansys Speos | 基于 Workbench 和 Speos 的准直全反射透镜优化设计案例

概述 基于Ansys Speos软件&#xff0c;可以准确建立光学系统模型并进行成像效果仿真。在使用Speos进行光学系统设计过程中&#xff0c;当完成初始光学系统建模后&#xff0c;还需要进一步结合仿真结果&#xff0c;调整出满足设计要求的系统参数&#xff0c;如果采用手动调整参…

Android系统Surface机制的SurfaceFlinger服务的启动过程分析

在前面一篇文章中&#xff0c;我们简要介绍了Android系统Surface机制中的SurfaceFlinger服务。SurfaceFlinger服务是在System进程中启动的&#xff0c;并且负责统一管理设备的帧缓冲区。SurfaceFlinger服务在启动的过程中&#xff0c;会创建两个线程&#xff0c;其中一个线程用…

Python三目运算符(三元运算符)用法详解

我们从一个具体的例子切入本节内容。假设现在有两个数字&#xff0c;我们希望获得其中较大的一个&#xff0c;那么可以使用 if else 语句&#xff0c;例如&#xff1a; if a>b:max a; else:max b; 但是 Python 提供了一种更加简洁的写法&#xff0c;如下所示&#xff1a…

中国棒球青训基地建设·棒球1号位

随着中国棒球事业的发展&#xff0c;建设一批现代化的棒球青训基地已经成为了中国棒球发展的必然趋势。下面是有关中国棒球青训基地建设的课题报告&#xff1a; 一、基地选址和规划 中国棒球青训基地的选址应该优先考虑地理位置、气候条件、基础设施和交通便利等因素。基地应该…

OpenGL模型控制(旋转、平移)

1.效果图 2.平移 首先做一个鼠标双击事件&#xff0c;表示平移模型对象&#xff0c;当然&#xff0c;我们需要遍历当前哪个模型对象被选中&#xff0c;才能进行该对象的平移操作。 void AXBOpemglWidget::mouseDoubleClickEvent(QMouseEvent *event) {Q_UNUSED(event);if(m_m…

06- c语言指针 (C语言)

一 指针的引入 1、一般把内存中的一个字节称为一个内存单元。 2、为了正确地访问这些内存单元&#xff0c;必须为每个内存单元编上号。根据一个内存单元的编号即可准确地找到该内存单元。内存单元的编号也叫做地址&#xff0c;通常也把这个地址称为指针。 3、如果在程序中定义…

kubernetes入门案例

kubernetes入门案例 本文我们通过一个 Java Web 应用例子来介绍 kubernetes 的使用&#xff0c;可以让新手快速上手和实践。 此 Java Web 应用的结构比较简单&#xff0c;是一个运行在 Tomcat 里的 Web App&#xff0c;JSP 页面通过 JDBC 直接访问 MySQL 数据库并展示数据。…

975-操作系统内存管理课件(2)

基本分页存储管理 基本地址变换结构 具有快表的地址变换结构 两级页表

输入一个三位整数,输出由其个位、十位、百位反序而成的三位整数(例如:579反序为975)。

/*------------------------------------------------------- 程序功能&#xff1a;输入一个三位整数&#xff0c;输出由其个位、十位、百位反序而成的三位整数&#xff08;例如&#xff1a;579反序为975&#xff09;。 -----------------------------------------------------…

975: 统计利用先序遍历创建的二叉树的度为2的结点个数

题目描述 利用先序递归遍历算法创建二叉树并计算该二叉树度为2结点的个数。先序递归遍历建立二叉树的方法为&#xff1a;按照先序递归遍历的思想将对二叉树结点的抽象访问具体化为根据接收的数据决定是否产生该结点从而实现创建该二叉树的二叉链表存储结构。约定二叉树结点数据…

975. 只有2个按键的键盘

/* 初始时在记事本上只有一个字符 ‘A’。你可以在此记事本上每一步可以进行两种操作&#xff1a; Copy All: 你可以复制记事本上所有的字符&#xff08;不允许部分复制&#xff09;Paste: 你可以粘贴上一次复制的字符。给出一个数字 n。你需要在记事本上得到恰好 n 个 A&#…

南阳理工---题目975关于521

关于521 时间限制&#xff1a; 1000 ms | 内存限制&#xff1a; 65535 KB 难度&#xff1a; 2 描述 Acm队的流年对数学的研究不是很透彻&#xff0c;但是固执的他还是想一头扎进去。 浏览网页的流年忽然看到了网上有人用玫瑰花瓣拼成了521三个数字&#xff0c;顿时觉得好浪漫…

Leetcode_二分 975.奇偶跳

975.奇偶跳 //二分搜索 O(nlogn) O(n) int oddEvenJumps(vector<int>& A) {const int nA.size();vector<vector<int> > dp(n,vector<int>(2));dp[n-1][0]dp[n-1][1]1;map<int,int> mp; //<value,index> BSTmp[A[n-1]]n-1;int ans…

2018年排名Top 100的Java类库——在分析了277,975份源码之后得出的结论

最近&#xff0c;OveOps公布了The Top 100 Java Libraries in 2018 - Based on 277,975 Source Files&#xff0c;Hollis查看了这份榜单&#xff0c;做了翻译和补充&#xff0c;向你展示2018年的风云Java类库&#xff0c;希望可以给正在使用Java的你一些帮助和启示。不能说榜单…

【简单题string】A. Aramic script(Codeforces Problem-975A)

A. Aramic script codeforces题目链接Problem-975A 题意&#xff1a; 输入n个字符串&#xff0c;对每个字符串去重后&#xff0c;就是一个根对象&#xff0c;输出有多少根对象。比如样例一&#xff0c;a,aa,aaa,ab,abb&#xff0c;去重后的是字符串是a,a,a,ab,ab。所以只有a,a…
最新文章