WPF随笔(十)–使用AvalonDock实现可停靠式布局「建议收藏」

WPF随笔(十)–使用AvalonDock实现可停靠式布局「建议收藏」许多软件都使用了可停靠式布局,可以方便的打开、关闭、收起、展开、移动选项卡。今天就来说明如何使用AvalonDock实现这种可停靠式布局。…

大家好,又见面了,我是你们的朋友全栈君。

我们每天使用的许多软件都使用了可停靠式布局,可以方便的打开、关闭、收起、展开、移动选项卡。今天就来说明如何使用AvalonDock实现这种可停靠式布局。


AvalonDock安装

最新版本的AvalonDock类库包含在程序包Extended.Wpf.Toolkit中,属于Xceed旗下的一款产品。使用Nuget管理器搜索安装,最新版本是3.4.0。
在这里插入图片描述
除了AvalonDock,Extended.Wpf.Toolkit套件中还包含了Xceed.Wpf.DataGrid和Xceed.Wpf.Toolkit,有兴趣的 也可以了解下。

代码示例

        <avalon:DockingManager>
<avalon:DockingManager.Theme>
<avalon:MetroTheme></avalon:MetroTheme>
</avalon:DockingManager.Theme>
<avalon:LayoutRoot>
<avalon:LayoutPanel Orientation="Horizontal">
<avalon:LayoutAnchorablePaneGroup DockMinWidth="240" FloatingWidth="240">
<avalon:LayoutAnchorablePane x:Name="panelLeft">
<avalon:LayoutAnchorable Title="Left1"></avalon:LayoutAnchorable>
<avalon:LayoutAnchorable Title="Left2"></avalon:LayoutAnchorable>
</avalon:LayoutAnchorablePane>
</avalon:LayoutAnchorablePaneGroup>
<avalon:LayoutPanel Orientation="Vertical">
<avalon:LayoutDocumentPaneGroup>
<avalon:LayoutDocumentPane x:Name="panelTop">
<avalon:LayoutDocument Title="Top1"></avalon:LayoutDocument>
<avalon:LayoutDocument Title="Top2"></avalon:LayoutDocument>
</avalon:LayoutDocumentPane>
</avalon:LayoutDocumentPaneGroup>
<avalon:LayoutAnchorablePaneGroup DockMinHeight="180" FloatingHeight="180">
<avalon:LayoutAnchorablePane x:Name="panelBottom">
<avalon:LayoutAnchorable Title="Bottom1"></avalon:LayoutAnchorable>
<avalon:LayoutAnchorable Title="Bottom2"></avalon:LayoutAnchorable>
<avalon:LayoutAnchorable Title="Bottom3"></avalon:LayoutAnchorable>
</avalon:LayoutAnchorablePane>
</avalon:LayoutAnchorablePaneGroup>
</avalon:LayoutPanel>
<avalon:LayoutAnchorablePaneGroup DockMinWidth="270" FloatingWidth="270">
<avalon:LayoutAnchorablePane x:Name="panelRight" DockWidth="240" FloatingWidth="240">
<avalon:LayoutAnchorable Title="Right1"></avalon:LayoutAnchorable>
<avalon:LayoutAnchorable Title="Right2"></avalon:LayoutAnchorable>
</avalon:LayoutAnchorablePane>
</avalon:LayoutAnchorablePaneGroup>
</avalon:LayoutPanel>
</avalon:LayoutRoot>
</avalon:DockingManager>

首先写段代码来看效果如何,结果就如同下图所示,可以自由的拖动、改变或停靠选项卡。
在这里插入图片描述

层级结构

结合上面的示例和官方文档的说明,使用AvalonDock时的页面元素结构大体如下:
在这里插入图片描述
各个类的说明如下:

名称 说明
DockingManager 停靠管理器,核心控件,负责管理浮动窗体、布局存储、恢复,样式主题等。在XAML中,是AvaDock元素的根节点。
LayoutRoot : 布局根节点,会完全占满DockingManager中的空间。包含四个属性,LeftSide,RightSide,TopSide,BottomSide,分别用于展示DockingManager中左右上下四个位置的内容,但初始状态为隐藏状态。另外两个属性FloatingWindows,Hidden分别为浮动窗体集合和隐藏窗体集合。当一个窗格浮动时,AvalonDock会将其从其所在组中删除,然后放置到FloatingWindows集合中。当一个窗格关闭时,会将其放置在Hidden集合中。
LayoutPanel 布局面板,LayoutRoot中的内容控件,完全占满LayoutRoot中的空间,可嵌套 ,可以设定Orientation 属性,控件布局组的浮动方向。实际的窗格都位于LayoutPanel节点下。
LayoutAnchorablePaneGroup 可停靠窗格组,是可停靠窗格LayoutAnchorablePane的容器。通过设置Orientation 属性,用于管理多个可停靠窗格的浮动方向。
LayoutAnchorablePane 可停靠窗格,浮动窗格是可停靠控件LayoutAnchorable的容器。一个窗格中,可以有多个可停靠控件。浮动窗格中的可停靠控件只能是LayoutAnchorable.窗格大小设定后,不能自动改变。
LayoutAnchorable 可停靠内容,一般放置在LayoutAnchorablePane中,其内容可以是用户自定义控件类型,比如,在UserControl中设置好WPF基础控件布局,然后将整个UserControl放置在LayoutAnchorable中,这样,整个UserControl内容就可以随着可停靠控件一起浮动或者停靠
LayoutDocumentPaneGroup 文档窗格组,是文档窗格LayoutDocumentPane的容器。通过设置Orientation 属性,用于管理多个文档窗格的浮动方向。
LayoutDocumentPane 文档窗格,与LayoutAnchorablePane类似,也是可停靠控件的容器,文档窗格类中可以放置可停靠控件LayoutAnchorable,也可以放置文档控件LayoutDocument,LayoutDocunemtPane会自动占满窗体的窗体布局中的剩余空间。
LayoutDocument 文档,与LayoutAnchorable功能类似,区别在于LayoutDoucument会随着LayoutDocumentPane一起占满窗体剩余空间。

其中DockingManager仅能包含一个LayoutRoot,而LayoutRoot仅能包含一个LayoutPanel,但LayoutPanel内能包含多个LayoutPanel并能多层嵌套。
此外LayoutAnchorablePaneGroup和LayoutDocumentPaneGroup也可以多层嵌套。
LayoutAnchorable和LayoutDocument内包含的就是实际内容了,可以是WPF控件或自定义控件。

了解了AvalonDock中各个元素的意义及用途,就能更加快速的规划自己的布局了。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/162115.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • C语言格式输出

    C语言格式输出格式说明由“%”和格式字符组成,如:%d%f等。它的作用是将输出的数据转换成指定的格式输出。格式说明总是由“%”字符开始的。格式字符有:d、o、x、u、c、s、f、e、g等。1、%d整形输出,%ld长整形输出。2、%o以八进制数形式输出整数。3、%x以十六进制形式输出整数,或输出字符串的地址。4、%u以十进制数输出unsigned型整数(无符号数)。注意:%d与%u有无符号数值范围。5、%c用来输出一个字符。6、%s用来输出一个字符串。7、%f用来输出实数,以小数形式输出,默认情况下保留小数

  • Idea激活码永久有效Idea2017.2.7激活码教程-持续更新,一步到位

    Idea激活码永久有效Idea2017.2.7激活码教程-持续更新,一步到位Idea激活码永久有效2017.2.7激活码教程-Windows版永久激活-持续更新,Idea激活码2017.2.7成功激活

  • navicat 2021激活码【在线破解激活】

    navicat 2021激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Zookeeper分布式锁代码实现[通俗易懂]

    目录原生API操作ZKWatch机制分布式锁思路Zookeeper分布式锁的代码实现zkclientCurator原生API操作ZK什么叫原生API操作ZK呢?实际上,利用zookeeper.jar这样的就是基于原生的API方式操作ZK,因为这个原生API使用起来并不是让人很舒服,于是出现了zkclient这种方式,以至到后来基于Curator框架,让人使用ZK…

  • IplImage中的widthStep大小计算及原理[通俗易懂]

    IplImage中的widthStep大小计算及原理[通俗易懂]一直以为IplImage结构体中的widthStep元素大小等于width*nChannels,大错特错!查看OpenCV2.1的源码,在src/cxcore/cxarray.cpp文件中,找到cvInitImageHeader函数,函数中对widthStep大小赋值如下:image->widthStep=(((image->width*image->nChannels*

  • 随机梯度下降法概述与实例分析_梯度下降法推导

    随机梯度下降法概述与实例分析_梯度下降法推导机器学习算法中回归算法有很多,例如神经网络回归算法、蚁群回归算法,支持向量机回归算法等,其中也包括本篇文章要讲述的梯度下降算法,本篇文章将主要讲解其基本原理以及基于SparkMLlib进行实例示范,不足之处请多多指教。梯度下降算法包含多种不同的算法,有批量梯度算法,随机梯度算法,折中梯度算法等等。对于随机梯度下降算法而言,它通过不停的判断和选择当前目标下最优的路径,从而能够在最短路径…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号