WPF进阶技巧和实战02-布局

系列文章链接

窗体

  • 无边框

窗体无边框（最大化及标题位置）WindowStyle="None"
窗体透明 AllowsTransparency="True"，必须设置窗体无边框，否则报错
SizeToContent属性，窗体大小可以根据内容自动调整，多语言版本时一般会使用

我习惯性的设置Window窗体的样式如下：

<Border Margin="5" Background="#EEE" CornerRadius="5" MouseLeftButtonDown="Border_MouseLeftButtonDown">
    <Border.Effect>
        <DropShadowEffect BlurRadius="10" Direction="0" Opacity="0.3" ShadowDepth="0" Color="Gray" />
    </Border.Effect>
    <Grid Margin="10" />
</Border>

这里有个知识点需要强调一下：

Border的属性Background="{x:Null}" 和Background="Transparent" 的区别，前者设置之后，会导致无法获取到Border的一些事件，所以一般都会使用后者，特殊场景除外。

  • 异形窗口

关键属性Clip：根据集合图形进行窗口剪切

<Window.Clip>
    <RectangleGeometry Rect="20,20,100,50" />
    <!--<EllipseGeometry RadiusX="80" RadiusY="40" Center="50,50"/>-->
</Window.Clip>

也可使用PathGeometry实现各种自定义形状的异形窗体创建

布局原则

  1. 不使用显示的方式设定元素的尺寸（常见的就是在多语言版本软件切换时）
  2. 不使用坐标定位置
  3. 布局容器的子元素共享可用空间
  4. 可嵌套容器

布局过程

布局过程包括两个阶段：测量（measure）阶段和排列（arrange）阶段。测量阶段，容器遍历所有子元素，并询问子元素他们期望的尺寸。排列阶段，容器在合适的位置放置子元素。

布局容器

  • Border：装饰控件，不是严格意义上的布局控件。同类型的还有Viewbox（对布局内的子控件进行等比缩放）
  • StackPanel：实现单行或者单列展示子控件
  • DockPanel：具有停靠功能，给子控件增加了附加属性（停靠方式，依次设置子控件布局）
  • WrapPanel：唯一一个不能被Grid替代的布局控件，先行后列/先列后行的形式进行布局（会换行）
  • Grid：布局应用最广的控件，可以设置行列网格也可以不设置，将子控件包裹起来形成一个整体，为子控件增加附加属性（用来设置行列位置）
  • UniformGrid：直接通过属性定义行列数量 Rows="4" Columns="3"，子元素按照行列自动填充。如果不设置行列属性，会按照n*n的形式进行自动布局行列
  • Canvas：在业务界面使用比较少，一般在做鼠标操作比较多的界面中或者自定义控件中比较常用，通过使用精确的坐标来放置元素。
  • InkCanvas：支持笔画输入等操作，不属于布局控件

所有布局容器都继承自Panel抽象类。3个公有属性

名称 说明
Backgroud 面板背景着色的画刷。如果想接收鼠标事件，就必须将该属性设置为非空值（如果既想接收鼠标事件，又不希望显示固定颜色的背景，那就设置透明即可）
Children 该属性是在面板中存储的条目集合（每个条目可以包含更多的子条目）
IsItemHost 如果面板用于显示与ItemsControl控件关联的项，该属性值就是true。在大多数情况下，设置不需要知道列表控件使用后台面板来管理它所包含的条目的布局。但是如果希望创建自定义列表，以不同方式放置子元素（按照平铺方式显示图像的ListBox控件），这个属性就很重要了。

如果需要创建自己的布局容器，就需要使用这几个公有属性，还需要重写继承自FrameworkElement类的两个方法：

protected override Size MeasureOverride(Size constraint)
protected override Size ArrangeOverride(Size arrangeSize)

来修改当前子元素面板处理测量阶段和排列阶段的方式。

扩展布局容器

  • TabPanel
  • ToolbarPanel、ToolbarOverflowPanel
  • VirtualizingStackPanel（能够改善性能，大数据量展示的时候。ListBox内部使用了，ItemsControl没有）

特殊容器

  • ScrollViewer-无法全部呈现时，使用滚动进行封装。

继承自ContextControl（内部职能放置一个对象），所以使用布局控件包裹整个展示内容。LineUp()-LineDown()

PageUp()-PageDown()

ScrollToEnd()-ScrollToHome()-ScrollToVerticalOffset()

ScrollToLeftEnd()-ScrollToRightEnd()-ScrollToHorizontalOffset()

  • HeaderedContentControl
  • GroupBox
  • TabItem
  • Expander
posted @ 2021-05-19 14:28  蜗牛的希望  阅读(471)  评论(0)  编辑  收藏  举报