当前位置:网站首页 / WPF4.5系列 / 正文

[AY] AvalonDock研究学习笔记

时间:2018年06月14日 | 作者 : aaronyang | 分类 : WPF4.5系列 | 浏览: 411次 | 评论 0

====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========

AvalonDock 2.0开源地址:https://archive.codeplex.com/?p=avalondock

image.png

AY发现对外免费的,就到此版本为止了,后面貌似3.X版本了,收费的。先研究看看吧,这个控件自己写还是挺费事的。

因为开源了,所以还是可以看看研究下代码


下载下来源码后发现

image.png



小心翼翼地开始吧

新建wpf4.5.2项目,打开nuget,搜索avalon

注意这个版本是收费的。免费45天,项目地址:http://www.xceed.com/Extended_WPF_Toolkit_Intro.html

我不用这个版本。

image.png

下面这个

image.png

我也没用起来,老是报告文件找不到。

我安装这个了

image.png

安装完成后,核心的两个

image.png

默认xaml修改

<Window x:Class="AyAvaDockDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AyAvaDockDemo"
        mc:Ignorable="d" WindowStartupLocation="CenterScreen"
                xmlns:avalonDock="http://schemas.xceed.com/wpf/xaml/avalondock"
        xmlns:vs2="clr-namespace:AvalonDock.Themes.VS2013;assembly=AvalonDock.Themes.VS2013"
        Title="Ay AvaDock" Height="800" Width="1200">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="6*"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>

        <Menu Grid.Row="0">
            <MenuItem Header="文件">
                <MenuItem Header="Exit"></MenuItem>
            </MenuItem>
            <MenuItem Header="布局">
                <MenuItem Header="保存布局" ></MenuItem>
                <MenuItem Header="还原布局"></MenuItem>
            </MenuItem>
        </Menu>
        <avalonDock:DockingManager Grid.Row="1" x:Name="DManager">
            <avalonDock:DockingManager.Theme>
                <vs2:Vs2013DarkTheme/>
            </avalonDock:DockingManager.Theme>

            <avalonDock:LayoutRoot>
            </avalonDock:LayoutRoot>
        </avalonDock:DockingManager>
    </Grid>
</Window>


DockingManager

AvalonDock中的核心控件,它将包含的窗格排序,处理飞出的窗格,还有浮动的窗口。在上面这个图中,DockingManager 对象包含了所有空间(WPF控件),从顶部的工具栏到底部的状态栏都算。同时。DockingManager 也可以处理保存和恢复布局

这里作为最外层容器了,我们需要指定个Theme,这里直接用vs2013的Theme


LayoutRoot

布局根节点类,DockingManager中的内容控件完全占满DockingManager中的空间。LayoutRoot包含四个属性,LeftSide,RightSide,TopSide,BottomSide,分别用于展示DockingManager中左右上下四个位置的内容,但初始状态为隐藏状态。另外两个属性FloatingWindows,Hidden分别为浮动窗体集合和隐藏窗体集合。当一个窗格浮动时,AvalonDock会将其从其所在组中删除,然后放置到FloatingWindows集合中。当一个窗格关闭时,会将其放置在Hidden集合中


LayoutPanel

管理在一个方向上的子窗口(通过Orientation属性来选择方向),并且在它们之间添加了一个大小调节控件,在一个Orientation属性是Horizontal(水平)的LayoutPanel 上,排列了三个窗格。

一个LayoutAnchorablePane在左,一个LayoutDocumentPane在中间。一个LayoutDockablePane在右边

布局面板类,LayoutRoot中的内容控件,完全占满LayoutRoot中的空间,在LayoutPanel中,可以有多个LayoutGroup,可以设定Orientation 属性,控件布局组的浮动方向。实际的窗格都位于LayoutPanel节点下


LayoutAnchorablePane

可停靠窗格类,浮动窗格是可停靠控件LayoutAnchorable的容器。一个窗格中,可以有多个可停靠控件。浮动窗格中的可停靠控件只能是LayoutAnchorable.窗格大小设定后,不能自动改变


LayoutDocumentPane

文档窗格类,与LayoutAnchorablePane类似,也是可停靠控件的容器,文档窗格类中可以放置可停靠控件LayoutAnchorable,也可以放置文档控件LayoutDocument,LayoutDocunemtPane会自动占满窗体的窗体布局中的剩余空间。


LayoutAnchorablePaneGroup

可停靠窗格组类,是可停靠窗格LayoutAnchorablePane的容器。通过设置Orientation 属性,用于管理多个可停靠窗格的浮动方向


LayoutDocumentPaneGroup

文档窗格组类,是文档窗格LayoutDocumentPane的容器。通过设置Orientation 属性,用于管理多个文档窗格的浮动方向。


LayoutAnchorable

(LayoutAnchorablePane或是LayoutDocumentPane,可以被从他的容器窗格里拖走。然后重新放置在一个存在的窗格里),或者是放置在父DockingManager的边缘,或者是放置在一个浮动窗口里LayoutAnchorableFloatingWindow

可停靠内容类,一般放置在LayoutAnchorablePane中,其内容可以是用户自定义控件类型,比如,在UserControl中设置好WPF基础控件布局,然后将整个UserControl放置在LayoutAnchorable中,这样,整个UserControl内容就可以随着可停靠控件一起浮动或者停靠


LayoutDocument

(仅能被放置到LayoutDocumentPane里。或者浮动在一个LayoutDocumentFloatingWindow窗口),

文档类,与LayoutAnchorable功能类似,区别在于LayoutDoucument会随着LayoutDocumentPane一起占满窗体剩余空间



LayoutDockablePane

这个布局元素包含一个LayoutAnchorable对象的集合。通过它用来管理像TabControl这样的控件,例如

LayoutDockablePanes是在左边的 (工具和项目) 和在右边的 (类视图和属性视图)的容器,一个LayoutDockablePane可以自动隐藏,就像(错误)和(操作列表) and(输出)。并且LayoutDockablePane可以被拖动到DockingManager上,成为一个浮动窗口或者附着到它的父控件DockingManager的边缘上


LayoutDocumentPane 通常包含文档(DocumentContent类型)的一种容器

但是其实也可以包含像上面提到的工具视图和类视图这样的DockableContents。在一个文档里。LayoutDocumentPane 被放置在ResizingPanel(水平方向)里。

ResizingPanel则是上提到的在两个DockablePane中间的区域。注意。文档窗格是不能被移动的


LayoutFloatingWindow

(LayoutAnchorableFloatingWindow和LayoutDocumentFloatingWindow继承自它)


LayoutPane

一个基类,LayoutDockablePane和LayoutDocumentPane继承它,为他们提供了一些共有的属性和方法


LayoutContent 

是LayoutAnchorable 和LayoutAnchorable类的父类。提供了共有的属性和方法



介绍了这么多内容,目的只是为了让大家对AvalonDock中的类有个简单的了解。

其实AvalonDock中的类有着明显的层次结构,其实就是容器的嵌套。DockingManager作为顶层容器,然后包含一个LayoutRoot对象,

LayoutRoot中又包含一个LayoutPanel对象。

LayoutPanel中便是LayoutAnchroablePane对象和LayouDocumentPane对象的集合。

同时,可以对LayoutAnchroablePane对象和LayoutDocumentPane对象进行分组,每个组可以单独设定组内的浮动方向。

LayoutAnchorablePane又是LayoutAnchorable的容器,LayoutDocumanePane又是LayoutDocument的容器。

一层一层进行嵌套,在最后的LayoutAnchorable中或者LayoutDocument中,我们放入我们真正的控件对象,

这样,就可以对他们进行分类摆放布局。



保存与还原布局

        private void MenuItem_Click(object sender, RoutedEventArgs e)
        {
            var serializer = new XmlLayoutSerializer(DManager);
            using (var stream = new StreamWriter("lay.txt"))
                serializer.Serialize(stream);
        }

        private void MenuItem_Click_1(object sender, RoutedEventArgs e)
        {
            //还原
            var serializer = new XmlLayoutSerializer(DManager);
            using (var stream = new StreamReader("lay.txt"))
                serializer.Deserialize(stream);

        }


恢复布局时,有一点需要注意,需要为LayoutAnchrobale对象和LayoutDocument对象设置ContentId属性,否则,DockingManager会忽略内容的恢复


LayoutRoot左侧

<avalon:LayoutRoot.LeftSide>

       <avalon:LayoutAnchorSide>

                <avalon:LayoutAnchorGroup x:Name="LeftGroup">

                                

                  </avalon:LayoutAnchorGroup>

       </avalon:LayoutAnchorSide>

</avalon:LayoutRoot.LeftSide>

后台动态加

   try
            {
                LayoutAnchorable anchorable = new LayoutAnchorable();
                anchorable.Title = "Left";
                LeftGroup.Children.Add(anchorable);
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message, "[MainWindow][miLeft_Click_1]");
            }

添加一个 LayoutAnchorable

前台

<avalon:DockingManager x:Name="DockManager">
                <avalon:DockingManager.Theme>
                    <avalon:ExpressionDarkTheme/>
                </avalon:DockingManager.Theme>
                
                <avalon:LayoutRoot x:Name="Root">
                    <avalon:LayoutPanel x:Name="Panel" >
                        <avalon:LayoutAnchorablePaneGroup x:Name="LeftAnchorableGroup" DockWidth="300">
                            <avalon:LayoutAnchorablePane x:Name="LeftPane">
                                <avalon:LayoutAnchorable x:Name="Solution" Title="解决方案" ContentId="Solution"/>
                            </avalon:LayoutAnchorablePane>
                        </avalon:LayoutAnchorablePaneGroup>
                        
                        <avalon:LayoutAnchorablePane>
                            <avalon:LayoutAnchorable ></avalon:LayoutAnchorable>
                        </avalon:LayoutAnchorablePane>
                        <avalon:LayoutDocumentPane>
                            <avalon:LayoutDocument></avalon:LayoutDocument>
                        </avalon:LayoutDocumentPane>
                        
                        <avalon:LayoutDocumentPaneGroup x:Name="DocumentGroup">
                            <avalon:LayoutDocumentPane x:Name="DocumentPane">
                                <avalon:LayoutDocument Title="document" ContentId="document">
                                    
                                </avalon:LayoutDocument>
                            </avalon:LayoutDocumentPane>
                        </avalon:LayoutDocumentPaneGroup>
                        
                        <avalon:LayoutAnchorablePaneGroup x:Name="RightAnchorableGroup" Orientation="Vertical" DockWidth="300">
                            <avalon:LayoutAnchorablePane x:Name="RightPane" >
                                <avalon:LayoutAnchorable Title="属性" ContentId="Property"/>
                            </avalon:LayoutAnchorablePane>
                        </avalon:LayoutAnchorablePaneGroup>
                        
                        
                    </avalon:LayoutPanel>
    </avalon:LayoutRoot>
 </avalon:DockingManager>

后台,增加水平

  LayoutAnchorablePane pane = new LayoutAnchorablePane();
                LayoutAnchorable anchorable = new LayoutAnchorable();
                anchorable.Title="水平方向";
                pane.Children.Add(anchorable);
                LeftAnchorableGroup.Children.Add(pane);

增加垂直

 try
            {
                LayoutAnchorablePane pane = new LayoutAnchorablePane();
                LayoutAnchorable anchorable = new LayoutAnchorable();
                anchorable.Title = "竖直方向";
                pane.Children.Add(anchorable);
                RightAnchorableGroup.Children.Add(pane);
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message, "[MainWindow][miAnchorVerticalPane_Click_1]");
            }

增加DocumentPane

try
            {
                LayoutDocumentPane documentPane = new LayoutDocumentPane();
                LayoutDocument document = new LayoutDocument();
                document.Title = "document";
                document.Content = new RichTextBox();
                documentPane.Children.Add(document);
                DocumentGroup.Children.Add(documentPane);
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message, "[MainWindow][miDocumentPane_Click_1]");
            }

浮动窗体显示

 LayoutAnchorable anchorable = new LayoutAnchorable();
            anchorable.Title = "查询";
            anchorable.FloatingWidth = 300;
            anchorable.FloatingHeight = 300;
            anchorable.FloatingTop = 200;
            anchorable.FloatingLeft = 300;

            Button button = new Button();
            button.Content = "查询";
            button.Width = 80;
            button.Height = 40;

            anchorable.Content = button;
            LeftPane.Children.Add(anchorable);
            anchorable.Float();     //调用Float方法,使窗体浮动显示

把隐藏的窗体 显示

 try
            {
                if (Root.Hidden != null)
                {
                    while (Root.Hidden.Count > 0)
                    {
                        Root.Hidden[0].Show();//调用show方法,恢复窗体显示。
                    }
                }
            }
            catch(Exception ex)
            {
                MessageBox.Show(ex.Message, "[MainWindow][miRestoreHideWnd_Click_1]");
            }

窗体操作

           LayoutAnchorable anchorable = new LayoutAnchorable();
            anchorable.Title = "工具";
            Button btn = new Button();
            btn.Content = "this is a test button";
            anchorable.Content = btn;
            btn.Height = 30;
            btn.Width = 150;
            anchorable.IsActive = true;
            RightPane.Children.Add(anchorable);

添加个文档并激活

LayoutDocument document = new LayoutDocument();
            document.Title = "doc";
            document.Content = new RichTextBox();
            document.IsActive = true;
            DocumentPane.Children.Add(document);

添加并显示窗体

     LayoutAnchorable anchorable = new LayoutAnchorable();

            anchorable.Title = "输出";

            anchorable.Content = new RichTextBox();

            anchorable.AddToLayout(DockManager, AnchorableShowStrategy.Bottom);

切换到自动隐藏

 if (Solution != null)
            {
                Solution.ToggleAutoHide();
            }


LayoutAnchorablePane的DockWidth和DockHeight属性可以被用来设置窗格的初始宽度和高度

RightSide/LeftSide/TopSide/BottonSide是LayoutAnchorGroup对象的集合属性,他们表示了停靠管理器的四个边



====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========



使用期间发现的问题, LayoutDocument动态增加的文档,是保存和恢复不了的。

自动隐藏的非 固定位置的Anchorable是不允许拖出来的,没有固定选项卡的功能。



推荐您阅读更多有关于“”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没成立公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF

声明:AYUI个人与商用免费,源码可购买。部分DEMO不免费

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

兼容XP到win10,vs2015/2017,最新AYUI:7.6.2.8

一次购买,永久免费更新,bug反馈及时修复,普通话回答你的问题,3个月的技术支持

AYUI7.6.X 企业服务详情:680元

AYUI7.6.X 官方风格详情:4000元

AYUI7.6.X 医疗+官方风格详情5000元

本AYUI知识版权最终归杨洋(AY)所有

本AYUI最终销售权归杨洋(AY)所有

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表