WPF AvalonDock拖拽布局学习整理

WPF AvalonDock拖拽布局学习整理AvalonDock提供了一个系统,允许开发人员使用类似于许多流行的集成开发环境(IDE)中的窗口对接系统来创建可自定义的布局。AvalonDock遵循MVVM设计。Model由Xceed.Wpf.AvalonDock.Layout命名空间中包含的类表示。此命名空间中的类是布局模型中的布局元素(例如LayoutAnchorable/LayoutDocument,LayoutAnchorab…

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

AvalonDock提供了一个系统,允许开发人员使用类似于许多流行的集成开发环境(IDE)中的窗口对接系统来创建可自定义的布局。

AvalonDock遵循MVVM设计。ModelXceed.Wpf.AvalonDock.Layout命名空间中包含的类表示。此命名空间中的类是布局模型中的布局元素(例如LayoutAnchorable / LayoutDocumentLayoutAnchorablePane / LayoutDocumentPaneLayoutAnchorablePaneGroup / LayoutDocumentPaneGroup等),它们直接在DockingManager中的XAML中使用,以描述布局的组成方式。

https://github.com/xceedsoftware/wpftoolkit/wiki/AvalonDock_avalondock.jpg

以下示例显示如何在DockingManager中设置各种布局元素。

<local:DemoView x:Class=”LiveExplorer.Samples.AvalonDock.Views.AvalonDockView”

                 xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

                 xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

                 xmlns:local=”clr-namespace:LiveExplorer”

                 xmlns:xctk=”http://schemas.xceed.com/wpf/xaml/toolkit”

                 xmlns:xcad=”http://schemas.xceed.com/wpf/xaml/avalondock”

                 xmlns:s=”clr-namespace:System;assembly=mscorlib”>

   <Grid>

      <Grid.RowDefinitions>

         <RowDefinition Height=”Auto” />

         <RowDefinition Height=”*” />

      </Grid.RowDefinitions>

 

      <StackPanel Orientation=”Horizontal” Margin=”0,0,0,10″>

         <TextBlock Text=”Theme:” Margin=”0,0,10,0″ VerticalAlignment=”Center”/>

         <ComboBox x:Name=”_themeCombo” SelectedIndex=”0″ Width=”200″>

            <ComboBoxItem Content=”Generic” />

            <ComboBoxItem Content=”Aero”>

               <ComboBoxItem.Tag>

                  <xcad:AeroTheme />

               </ComboBoxItem.Tag>

            </ComboBoxItem>

            <ComboBoxItem Content=”VS2010″>

               <ComboBoxItem.Tag>

                  <xcad:VS2010Theme />

               </ComboBoxItem.Tag>

            </ComboBoxItem>

            <ComboBoxItem Content=”Metro”>

               <ComboBoxItem.Tag>

                  <xcad:MetroTheme />

               </ComboBoxItem.Tag>

            </ComboBoxItem>

         </ComboBox>

      </StackPanel>

 

      <xcad:DockingManager Grid.Row=”1″ MaxHeight=”425″

                           AllowMixedOrientation=”True”

                           BorderBrush=”Black”

                           BorderThickness=”1″

                           Theme=”{Binding ElementName=_themeCombo, Path=SelectedItem.Tag}”>

         <xcad:DockingManager.DocumentHeaderTemplate>

            <DataTemplate>

               <StackPanel Orientation=”Horizontal”>

                  <Image Source=”{Binding IconSource}” Margin=”0,0,4,0″/>

                  <TextBlock Text=”{Binding Title}” />

               </StackPanel>

            </DataTemplate>

         </xcad:DockingManager.DocumentHeaderTemplate>

         <xcad:LayoutRoot x:Name=”_layoutRoot”>

            <xcad:LayoutPanel Orientation=”Horizontal”>

               <xcad:LayoutAnchorablePane DockWidth=”200″>

                  <xcad:LayoutAnchorable ContentId=”properties” Title=”Properties” CanHide=”False” CanClose=”False”

                                            AutoHideWidth=”240″

                                         IconSource=”../Images/property-blue.png”>

                     <xctk:PropertyGrid NameColumnWidth=”110″

                        SelectedObject=”{Binding ElementName=_layoutRoot, Path=LastFocusedDocument.Content}”/>

                  </xcad:LayoutAnchorable>

               </xcad:LayoutAnchorablePane>

               <xcad:LayoutDocumentPaneGroup >

                  <xcad:LayoutDocumentPane>

                     <xcad:LayoutDocument ContentId=”document1″ Title=”Document 1″ IconSource=”../Images/document.png” >

                           <Button Content=”Document 1 Content” HorizontalAlignment=”Center” VerticalAlignment=”Center”/>

                     </xcad:LayoutDocument>

                     <xcad:LayoutDocument ContentId=”document2″ Title=”Document 2″ IconSource=”../Images/document.png”>

                        <TextBox Text=”Document 2 Content” AcceptsReturn=”True”/>

                     </xcad:LayoutDocument>

                  </xcad:LayoutDocumentPane>

               </xcad:LayoutDocumentPaneGroup >

               <xcad:LayoutAnchorablePaneGroup DockWidth=”125″>

                  <xcad:LayoutAnchorablePane>

                     <xcad:LayoutAnchorable ContentId=”alarms” Title=”Alarms” IconSource=”../Images/alarm-clock-blue.png” >

                        <ListBox>

                           <s:String>Alarm 1</s:String>

                           <s:String>Alarm 2</s:String>

                           <s:String>Alarm 3</s:String>

                        </ListBox>

                     </xcad:LayoutAnchorable>

                     <xcad:LayoutAnchorable ContentId=”journal” Title=”Journal” >

                        <RichTextBox>

                           <FlowDocument>

                              <Paragraph FontSize=”14″ FontFamily=”Segoe”>

                                 This is the content of the Journal Pane.

                                 <LineBreak/>

                                 A

                                 <Bold>RichTextBox</Bold> has been added here

                              </Paragraph>

                           </FlowDocument>

                        </RichTextBox>

                     </xcad:LayoutAnchorable>

                  </xcad:LayoutAnchorablePane>

               </xcad:LayoutAnchorablePaneGroup>

            </xcad:LayoutPanel>

 

            <xcad:LayoutRoot.LeftSide>

               <xcad:LayoutAnchorSide>

                  <xcad:LayoutAnchorGroup>

                     <xcad:LayoutAnchorable Title=”Agenda” ContentId=”agenda” IconSource=”../Images/address-book-open.png”>

                        <TextBlock Text=”Agenda Content” Margin=”10″ FontSize=”18″ FontWeight=”Black” TextWrapping=”Wrap”/>

                     </xcad:LayoutAnchorable>

                     <xcad:LayoutAnchorable Title=”Contacts” ContentId=”contacts” IconSource=”../Images/address-book–pencil.png” >

                        <TextBlock Text=”Contacts Content” Margin=”10″ FontSize=”18″ FontWeight=”Black” TextWrapping=”Wrap”/>

                     </xcad:LayoutAnchorable>

                  </xcad:LayoutAnchorGroup>

               </xcad:LayoutAnchorSide>

            </xcad:LayoutRoot.LeftSide>

         </xcad:LayoutRoot>

      </xcad:DockingManager>

   </Grid>

</local:DemoView>

该视图由Xceed.Wpf.AvalonDock.Controls命名空间中包含的类表示这些类是一组可显示用户控件的可调节控件。视图控件的名称通常以“Control”结尾,并对应于布局模型类(例如,LayoutAnchorableControl是与LayoutAnchorable对应的视图控件,它是模型元素)。

DockingManager包含在Xceed.Wpf.AvalonDock命名空间中,它使用各种类(例如LayoutItem及其派生类)来执行ViewModel的角色,准备视图使用的模型。

只有一个逻辑树,以DockingManager为根。即使控件放在不同的窗口(即自动隐藏窗口或浮动窗口)中,它也始终属于DockingManager下面的同一逻辑树。

DockingManager

DockingManager类是AvalonDock的核心控制。其Layout属性包含由Xceed.Wpf.AvalonDock.Layout命名空间中的类表示的布局组合。该类安排它包含的窗格,并处理自动隐藏窗口和浮动窗口(窗格又直接或间接包含两种类型的内容元素,即LayoutAnchorableLayoutDocument元素)。DockingManager类还处理保存和恢复布局。

在其他属性中,该类提供了几个模板属性(例如,AnchorableTitleTemplate / DocumentTitleTemplateAnchorableHeaderTemplate / DocumentHeaderTemplate等),允许设计人员和开发人员为布局中包含的元素指定模板。

布局模型类

布局元素类在DockingManagerLayout属性中保存的布局模型中使用。AvalonDock中包含基本内容的类是LayoutAnchorableLayoutDocument ; 这两个类都派生自LayoutContent类,它确定元素是否可以关闭,浮动(被拖动并转换为浮动窗口)等。

可锚定通常是应用程序控件的容器,可以从其容器窗格(LayoutAnchorablePane)拖出并重新定位到另一个窗格中。Anchobles总是包含在窗格中,可以是LayoutAnchorablePaneLayoutDocumentPane而文档(类LayoutDocument)只能包含在LayoutDocumentPane中。Anchobles也可以拖动到父DockingManager的边框,这使它们出现在所有其他anchorables或文档的上方,下方,左侧或右侧(自动隐藏窗口除外;请参阅下面的LayoutAnchorSide / LayoutAnchorGroup部分)详情)。Anchorables也可以保持浮动状态(LayoutAnchorableFloatingWindow)。与文档不同,anchorables可以自动隐藏,其内容会折叠到停靠管理器的一侧,并且仅由选项卡表示(请参阅LayoutAnchorSideLayoutAnchorGroup)。

文档(LayoutDocument类)只能在LayoutDocumentPane中托管。这与LayoutAnchorable的行为形成对比,LayoutAnchorable可以在LayoutDocumentPaneLayoutAnchorablePane中托管。此外,与anchorables不同,文档无法锚定到DockingManager边框,也无法自动隐藏:它们只能放置在LayoutDocumentPane中或浮动在LayoutDocumentFloatingWindow中。

LayoutAnchorableFloatingWindowLayoutDocumentFloatingWindow当最终用户通过拖动DockingManager一个锚固被自动创建。也可以使用Float方法以编程方式创建浮动窗口。

LayoutContent派生元素(LayoutAnchorableLayoutDocument)通常按Tab键控件排列。LayoutAnchorablePane可以设置为自动隐藏,可以作为浮动窗口拖过DockingManagerLayoutAnchorablePane也可以锚定到父DockingManager的边框(有关详细信息,请参阅LayoutAnchorSide)。

LayoutAnchorablePane不同,LayoutDocumentPane不能设置为自动隐藏或作为浮动窗口拖动DockingManager(尽管可以浮动单个LayoutDocument元素)。LayoutDocumentPane也无法锚定到父DockingManager的边框。

LayoutPanel也可以包含窗格基元件(即,LayoutAnchorablePaneGroupLayoutDocumentPaneGroup),哪个组子窗格在一起并允许确定各种特征,例如停靠组占据的初始宽度/高度,从它们拖动的内容创建的浮动窗口的初始宽度/高度,以及窗格中的窗格的方向。组(与LayoutPanel的方向无关)。LayoutAnchorablePaneGroup表示布局模型中的一个元素,它可以包含和排列多个LayoutAnchorablePane元素,而这些元素又包含LayoutAnchorable元素。LayoutDocumentPaneGroup表示布局模型中的一个元素,它可以包含和组织多个LayoutDocumentPane元素,这些元素又包含LayoutDocument元素。窗格组类主要用于确定它们包含的窗格的方向。

LayoutRoot表示布局模型的根。DockingManagerLayout属性设置为此类的实例。

LayoutRoot类的RootPanel属性设置为LayoutPanel类的实例。

LayoutPanel可以直接包含子窗格(即LayoutAnchorablePaneLayoutDocumentPane)。窗格又包含实际内容(即LayoutAnchorableLayoutDocument元素,两者都派生自LayoutContent)。LayoutPanel还可以包含窗格组实例(即LayoutAnchorablePaneGroupLayoutDocumentPaneGroup),它将子窗格组合在一起并允许确定各种特征,例如停靠组占用的初始宽度/高度,浮动的初始宽度/高度从根据它们拖动的内容创建的窗口,以及组中窗格的方向(与LayoutPanel的方向无关)。

LayoutRoot类提供四个“Side”属性(例如,LeftSide),它们与LayoutAnchorSideLayoutAnchorGroup类一起使用,以沿着包含DockingManager的边框设置自动隐藏LayoutAnchorable元素。这些元素最初折叠到它们所锚定的一侧,仅显示一个选项卡,“pin”字形指向左侧。如果单击自动隐藏可固定的图钉字符使得销钉朝下,则可锚定不再保持可见。只能自动隐藏LayoutAnchorable元素。

LayoutAnchorGroup表示一个或多个LayoutAnchorable元素的自动隐藏组,可以将其锚定到DockingManager的四个边之一。要使用LayoutAnchorGroup,请向其添加LayoutAnchorable元素,并将生成的LayoutAnchorGroup添加到LayoutAnchorSide的实例。然后将生成的LayoutAnchorSide分配给DockingManagerLayout属性中保存的LayoutRoot对象的“Side”属性(例如,LeftSideTopSide)。

LayoutAnchorSide表示DockingManager“side”。若要使用LayoutAnchorSide,请将LayoutAnchorable元素添加到LayoutAnchorGroup,并将生成的LayoutAnchorGroup添加到LayoutAnchorSide的实例。然后将生成的LayoutAnchorSide分配给DockingManagerLayout属性中保存的LayoutRoot对象的“Side”属性(例如,LeftSideTopSide)。

注意:您可以在此处找到API的完整文档。见活资源管理器,用于演示这个类的功能和其他源代码的应用在这里

 

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

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

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

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

(0)
blank

相关推荐

  • log4cpp 详解及使用操作「建议收藏」

    log4cpp 详解及使用操作「建议收藏」Log4cpp是一个开源的C++类库,它提供了在C++程序中使用日志和跟踪调试的功能。使用log4cpp,可以很便利地将日志或者跟踪调试信息写入字符流、内存字符串队列、文件、回滚文件、调试器、Windows日志、本地syslog和远程syslog服务器中。1、Log4cpp简介  Log4cpp是个基于LGPL的开源项目,移植自Java的日志处理跟踪项目log4j,并保持了API上的一致。…

  • pycharm pip版本不对_python没有pip

    pycharm pip版本不对_python没有pip我在pycharm的Terminal中,更新pip的时候,出现了以下错误:原因:可能与最近的Windows10更新有关。我的版本如下:在cmd中输入msinfo32,回车,可以看到版本信息。解决办法:直接运行cmd,输入python-mpipinstall-Upip,就可正常升级pip了。PS:查到的另外一个解决办法是安装win_unicode_consol…

    2022年10月26日
  • 阅读书源最新2020在线导入_【授人以渔】你想要阅读的,这里都有。「建议收藏」

    阅读书源最新2020在线导入_【授人以渔】你想要阅读的,这里都有。「建议收藏」今天给大家分享两个阅读软件,安卓、ios都有。通过订阅大佬们制作的书源(小说网站),80%你想看的小说,都能找到。(只要网络上有人分享上传了)﹀﹀﹀一、阅读(安卓)1、下载链接:https://www.coolapk.com/apk/io.legado.app.release2、食用方法:方法一(网络导入):  复制源URL,打开阅读”订阅”->点击右上角设置->选择”…

  • SQL语句大全大全(经典珍藏版)

    SQL语句大全大全(经典珍藏版)SQL语句大全–语句功能–数据操作SELECT–从数据库表中检索数据行和列INSERT–向数据库表添加新数据行DELETE–从数据库表中删除数据行UPDATE–更新数据库表中的数据-数据定义CREATETABLE–创建一个数据库表DROPTABLE–从数据库中删除表ALTERTABLE–修改数据库表结构CREATEVIEW

  • 中国程序员和外国程序员哪个厉害_中国十大程序员

    中国程序员和外国程序员哪个厉害_中国十大程序员作者:金戈大王别被标题误导,我可没有说中国程序员不如外国程序员。听说世界一流程序员都上一个论坛,叫stackoverflow,那天闲来无事,索性上去看看。不得了,发现一个热门问题stackoverflow中的一个提问乖乖,这哥们难道没学过编程,返回值跟声明不一样他都看不出来?看来stackoverflow的程序员水平不过如此啊,哈哈哈哈。一阵

    2022年10月11日
  • 在centos中安装mysql_linux下pycharm使用

    在centos中安装mysql_linux下pycharm使用在centos中安装pycharm#全部过程如下:1.pycharm官网下载软件(linux版),我下载的是专业版forlinuxhttp://www.jetbrains.com/pycharm/download/#section=linux文件名为:pycharm-professional-2018.3.4.tar2.centos是阿里云的服务器,如果是虚拟机也是一样操作,然后…

发表回复

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

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