WPF使用AvalonDock

已于 2024-08-30 16:00:04 修改
阅读量225 收藏
点赞数 1
文章标签： wpf c#
于 2024-08-06 12:57:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41375318/article/details/140952928
版权

WPF使用AvalonDock

报引用错误，则再重新生产解决方案一下

在这里插入图片描述
在这里插入图片描述

         xmlns:avalon="http://schemas.xceed.com/wpf/xaml/avalondock"

使用流程

  1. 定义avalon:DockingManager
  2. 设置主题avalon:DockingManager.Theme
  3. 设置布局avalon:LayoutRoot
  4. 设置总（父）容器avalon:LayoutPanel
  5. 设置子容器（设置水平或者垂直布局）
  6. 设置可停靠窗格类：Avalon:LayoutAnchorablePane
  7. 设置显示控件
<Window x:Class="WpfApp6.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:WpfApp6"
        xmlns:avalon="http://schemas.xceed.com/wpf/xaml/avalondock"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>


        <avalon:DockingManager x:Name="dockManager" Grid.Column="0">
             <!--设置主题-->
            <avalon:DockingManager.Theme>
                <avalon:MetroTheme></avalon:MetroTheme>
            </avalon:DockingManager.Theme>
             <!--设置布局-->
            <avalon:LayoutRoot x:Name="layOutRoot">
                <avalon:LayoutPanel x:Name="layOutPanel" Orientation="Horizontal">

                    <avalon:LayoutAnchorablePane x:Name="panelBottom">
                        <avalon:LayoutAnchorable Title="Bottom3"></avalon:LayoutAnchorable>
                    </avalon:LayoutAnchorablePane>


                    <avalon:LayoutAnchorablePane x:Name="panelBottom2">
                        <avalon:LayoutAnchorable Title="Bottom3"></avalon:LayoutAnchorable>
                    </avalon:LayoutAnchorablePane>


                </avalon:LayoutPanel>
            </avalon:LayoutRoot>
        </avalon:DockingManager>

        <Button Grid.Column="1" Click="Button_Click"></Button>
    </Grid>
</Window>


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Xceed.Wpf.AvalonDock;
using Xceed.Wpf.AvalonDock.Layout;
using Xceed.Wpf.AvalonDock.Layout.Serialization;
using Xceed.Wpf.Themes.MaterialDesign;

namespace WpfApp6
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {




            LayoutAnchorablePane layoutAnchorablePane = new LayoutAnchorablePane();


            LayoutAnchorable anchorable = new LayoutAnchorable
            {
                Title = "我的可停靠窗口",
                Content = new Button(),

            };


            layoutAnchorablePane.Children.Add(anchorable);
            layOutPanel.Children.Add(layoutAnchorablePane);



        }
    }
}

在这里插入图片描述
在这里插入图片描述

 anchorable.Float();     //调用Float方法，使窗体浮动显示

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Xceed.Wpf.AvalonDock;
using Xceed.Wpf.AvalonDock.Layout;
using Xceed.Wpf.AvalonDock.Layout.Serialization;
using Xceed.Wpf.Themes.MaterialDesign;

namespace WpfApp6
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {




            LayoutAnchorablePane layoutAnchorablePane = new LayoutAnchorablePane();


            LayoutAnchorable anchorable = new LayoutAnchorable
            {
                Title = "我的可停靠窗口",
                Content = new Button(),

            };


            layoutAnchorablePane.Children.Add(anchorable);
            layOutPanel.Children.Add(layoutAnchorablePane);

            anchorable.Float();

        }
    }
}

在这里插入图片描述

实例

使用流程

  1. 定义avalon:DockingManager
  2. 设置主题avalon:DockingManager.Theme
  3. 设置布局avalon:LayoutRoot
  4. 设置总（父）容器avalon:LayoutPanel
  5. 设置子容器（设置水平或者垂直布局）
  6. 设置可停靠窗格类：Avalon:LayoutAnchorablePane
  7. 设置显示控件
    <!--主界面-->
    <Avalon:DockingManager 
        x:Name="dockingManager" 
        Grid.Row="1" 
        Background="#35383A" 
        AllowMixedOrientation="True">
        <!--设置主题-->
        <Avalon:DockingManager.Theme>
            <Avalon:MetroTheme/>
        </Avalon:DockingManager.Theme>

        <!--表头的样式-->
        <Avalon:DockingManager.AnchorableTitleTemplate>
            <DataTemplate>
                <Border Background="#212121">
                    <Label  Content="{Binding Title}" Foreground="White" VerticalAlignment="Center" FontSize="13" Height="24"/>
                </Border>
            </DataTemplate>
        </Avalon:DockingManager.AnchorableTitleTemplate>

        <Avalon:LayoutRoot>
            <!--主容器-->
            <Avalon:LayoutPanel>
                <!--容器水平布局-->
                <Avalon:LayoutPanel Orientation="Horizontal">
                    <!--工具栏-->
                    <Avalon:LayoutAnchorablePane x:Name="LayAnch1">
                        <Avalon:LayoutAnchorable Title="工具栏" ContentId="1"  CanClose="False" CanHide="False" CanAutoHide="False">
                            <!--工具栏-->
                            <StyleFrm:Toolbar/>
                        </Avalon:LayoutAnchorable>
                    </Avalon:LayoutAnchorablePane>

                    <Avalon:LayoutPanel>
                        <!--流程栏-->
                        <Avalon:LayoutAnchorablePane x:Name="LayAnch2">
                            <Avalon:LayoutAnchorable Title="流程栏" ContentId="2"   CanClose="False" CanHide="False" CanAutoHide="False">
                                <!--流程栏-->
                                <StyleFrm:Processbar/>
                            </Avalon:LayoutAnchorable>
                        </Avalon:LayoutAnchorablePane>
                    </Avalon:LayoutPanel>

                </Avalon:LayoutPanel>
                
                <!--容器垂直布局-->
                <Avalon:LayoutPanel Orientation="Vertical">
                    <!--图像显示-->
                    <Avalon:LayoutAnchorablePane>
                        <Avalon:LayoutAnchorable Title="图像显示" ContentId="123"  CanClose="False" CanHide="False" CanAutoHide="False">
                            <Grid Name="Border_Hwindow"/>
                        </Avalon:LayoutAnchorable>
                    </Avalon:LayoutAnchorablePane>

                    <Avalon:LayoutPanel Orientation="Horizontal" x:Name="LayAnch3">
                        <!--LOG日志-->
                        <Avalon:LayoutAnchorablePane>
                            <Avalon:LayoutAnchorable Title="LOG日志" ContentId="123"  CanClose="False" CanHide="False" CanAutoHide="False">
                                <!--LOG日志-->
                                <StyleFrm:LogTool/>
                            </Avalon:LayoutAnchorable>
                        </Avalon:LayoutAnchorablePane>
                        <!--设备状态-->
                        <Avalon:LayoutAnchorablePane>
                            <Avalon:LayoutAnchorable Title="设备状态" ContentId="123"  CanClose="False" CanHide="False" CanAutoHide="False">
                                <!--设备状态-->
                                <StyleFrm:DeviceConnect/>
                            </Avalon:LayoutAnchorable>
                        </Avalon:LayoutAnchorablePane>
                    </Avalon:LayoutPanel>
                </Avalon:LayoutPanel>

            </Avalon:LayoutPanel>
        </Avalon:LayoutRoot>

    </Avalon:DockingManager>

实例2：左侧显示选项卡

<Window x:Class="WpfApp17.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:WpfApp17"
        mc:Ignorable="d"
          xmlns:avalon="http://schemas.xceed.com/wpf/xaml/avalondock"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>


        <avalon:DockingManager>
            <avalon:DockingManager.Theme>
                <avalon:MetroTheme></avalon:MetroTheme>
            </avalon:DockingManager.Theme>
            
            <avalon:LayoutRoot>

                    <avalon:LayoutRoot.LeftSide>
                        <avalon:LayoutAnchorSide>
                            <avalon:LayoutAnchorGroup>
                                <avalon:LayoutAnchorable Title="Messages" ContentId="layoutAnchorableMessgae" IsActive="True">
                                    <TextBox x:Name="textBoxMessage"/>
                                </avalon:LayoutAnchorable>
                                <avalon:LayoutAnchorable Title="Log" ContentId="layoutAnchorableLog"/>
                            </avalon:LayoutAnchorGroup>

                        </avalon:LayoutAnchorSide>
                    </avalon:LayoutRoot.LeftSide>

            </avalon:LayoutRoot>
        </avalon:DockingManager>

      
    </Grid>

</Window>

在这里插入图片描述

补充介绍

  1. DockingManager : 停靠管理器类，是AvalonDock中的核心控件之一，负责管理浮动窗体、布局存储、恢复，样式主题等。在XAML中，是AvaDock元素的根节点
  2. LayoutRoot : 布局根节点类，DockingManager中的内容控件完全占满DockingManager中的空间。LayoutRoot包含四个属性，LeftSide，RightSide,TopSide,BottomSide,分别用于展示DockingManager中左右上下四个位置的内容
  3. LayoutPanel：布局面板类，LayoutRoot中的内容控件，完全占满LayoutRoot中的空间，在LayoutPanel中，可以有多个LayoutGroup,可以设定Orientation 属性，控件布局组的浮动方向
  4. LayoutDocumentPane:文档窗格类
  5. LayoutAnchorablePaneGroup：可停靠窗格组类，是可停靠窗格LayoutAnchorablePane的容器。通过设置Orientation 属性，用于管理多个可停靠窗格的浮动方向。
  6. LayoutDocumentPaneGroup：文档窗格组类，是文档窗格LayoutDocumentPane的容器。通过设置Orientation 属性，用于管理多个文档窗格的浮动方向。
  7. LayoutAnchorable:可停靠内容类，一般放置在LayoutAnchorablePane中，其内容可以是用户自定义控件类型，比如，在UserControl中设置好WPF基础控件布局,然后将整个UserControl放置在LayoutAnchorable中，这样，整个UserControl内容就可以随着可停靠控件一起浮动或者停靠。
  8. LayoutDocument：文档类，与LayoutAnchorable功能类似，区别在于LayoutDoucument会随着LayoutDocumentPane一起占满窗体剩余空间。

参考文献

https://www.cnblogs.com/happyyftk/p/6904466.html

*Major*
关注
Xceed.Wpf.AvalonDock dll下载
10-22
AvalonDock
WPF实现选项卡效果（1）——使用AvalonDock
热门推荐
诗人江湖老的专栏
05-25 3万+
简介　　公司最近一个项目，软件采用WPF开发，需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果。搜寻诸多资料后，发现很多同仁推荐AvalonDock这款开源控件。在其官方地址下载源码和Demo后，对其进行了初步的研究，初步实现了预期效果。 　　完整系列 　　● 第一部分 　　● 第二部分 　　● 第三部分 　　在Git中下载工程源码AvalonDocking的结构树　　在下载的Dem
探索AvalonDock：打造高效WPF布局的利器
最新发布
gitblog_00989的博客
08-09 827
探索AvalonDock：打造高效WPF布局的利器 AvalonDockOur own development branch of the well known WPF document docking library项目地址:https://gitcode.com/gh_mirrors/ava/AvalonDock 项目介绍 AvalonDock 是一个强大的 WPF 文档和工具窗口布局容器，...
WPF AvalonDock 常用功能使用
weixin_48611710的博客
03-31 2576
WPF 基于Prism框架 AvalonDock基本使用
WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容
诗人江湖老的专栏
05-25 2万+
简介　　在前面一篇文章里面，我们实现了AvalonDock选项卡的动态添加，但是对于选项卡里面的内容，我们并没有实现任何有用的功能。 　　这篇文章里面，我们将实现对选项卡里面的内容和功能实现自定义。将自定义Page作为选项卡内容Page定义　　Page页面的Xaml代码如下：<Page x:Class="AvalonProject.TestPage" xmlns="http://sch
WPF实现选项卡效果（2）——动态添加AvalonDock选项卡
诗人江湖老的专栏
05-25 2万+
简介　　在前面一篇文章里面，我们使用AvalonDock实现了类似于VS的选项卡（或者浏览器的选项卡）效果。但是我们是通过xaml代码实现。 　　现在我们尝试通过C#代码实现选项卡的动态添加。修改Xaml代码　　在前面一篇文章的Xaml代码里面，添加如下代码：　　 <Grid.RowDefinitions> <RowDefinition Height="25"></RowD
WPF随笔（十）--使用AvalonDock实现可停靠式布局
lordwish的专栏
01-22 1万+
许多软件都使用了可停靠式布局，可以方便的打开、关闭、收起、展开、移动选项卡。今天就来说明如何使用AvalonDock实现这种可停靠式布局。 ...
WPF 第三方控件学习使用——可停靠布局控件（AvalonDock）
YouyoMei的博客
12-04 6742
需求 近期在做公司上位机产品规划与实验，参考了Blender软件的布局风格，希望能用WPF也做一个类似布局的上位机。于是开始寻找资源，很快就发现了AvalonDock。 AvalonDock简介 AvalonDock是Xceed公司 Wpf.Toolkit 中的一款收费产品，其中还包括很多其他控件的收集整理，感兴趣的自行研究。 但是万能的Nuget里面有许多免费的版本，并且GitHub...
推荐：AvalonDock - 强大的WPF文档和工具窗口布局解决方案
gitblog_00038的博客
05-14 470
推荐：AvalonDock - 强大的WPF文档和工具窗口布局解决方案 AvalonDockOur own development branch of the well known WPF document docking library项目地址:https://gitcode.com/gh_mirrors/ava/AvalonDock AvalonDock 是一个功能强大的WPF框架，用于实现...
wpf-AvalonDock基础-安装和更换主题
陆沙的博客
01-28 5982
最近对wpf的多窗口排列问题深感头疼，算尺寸、位置太麻烦了（也可能是我菜鸡的缘故），最后决定用AvalonDock，排列很漂亮。 本篇主要是安装和更换主题，后续会更一篇项目中常用的技巧。 再吐槽一下，AvalonDock的中文资料同质化太严重！！！很多需要自己测试了才能用好（我的环境是win10+vs2019） ...
使用AvalonDock制作WPF多标签浏览器
03-17
在本文中，我们将深入探讨如何使用AvalonDock这一开源项目来创建一款具有WPF（Windows Presentation Foundation）多标签浏览器的界面。AvalonDock是一个强大的控件库，它为开发者提供了一种简单且灵活的方式来实现...
avalondock使用
07-05
AvalonDock是一款强大的开源控件库，专为Windows Presentation Foundation (WPF) 平台设计，用于实现灵活且自定义化的窗口布局功能。在WPF应用开发中，AvalonDock提供了类似Visual Studio的文档和工具窗口管理，使得...
Avalondock布局控件源码2.0
08-29
在使用AvalonDock 2.0时，开发者需要注意适配WPF编程模式，理解其布局系统和事件处理，以便充分利用其提供的功能。同时，为了获得最佳效果，可能需要对WPF的布局管理、依赖属性和数据绑定等概念有深入的了解。通过...
使用WPF实现流程图的创建
03-19
9. **图形库**：除了基本的WPF图形元素，还可以利用第三方库，如`AvalonDock`, `Infragistics`或`Syncfusion`等，它们提供了更丰富的图形和图表组件，可以简化流程图的开发过程。 10. **序列化和反序列化**：为了...
AvalonDock使用（1）-基本用法
BitoLink的博客
04-08 4135
AvalonDock的基本用法介绍AvalonDock库中的基本类DockingManager：停靠管理器类LayoutRoot : 布局根节点类LayoutPanel：布局面板类LayoutAnchorablePane：可停靠窗格类LayoutAnchorable:可停靠内容类LayoutDocumentPane:文档窗格类LayoutDocument：文档类LayoutAnchorablePaneGroup：可停靠窗格组类LayoutDocumentPaneGroup：文档窗格组类小结具体的用法1. 通
WPFAvalonDock基本用法
yuhai738639的博客
08-28 5439
本文简单介绍AvalonDock2.0基本用法，下载AvalonDock 2.0dll及主题http://avalondock.codeplex.com/ AvalonDock基本类介绍 DockingManager:停靠管理类，xaml中AvalonDock的根节点 LayoutRoot:布局根节点，有四个属性LeftSide,RightSide,TopSide,ButtomSide展示四
使用AvalonDock制作WPF多标签浏览器（一）
weixin_30784141的博客
03-15 139
AvalonDock是CodePlex上的一个开源项目，利用它可以很容易的做出类似于VS的UI效果。下图是AvalonDock源码中自带的一个Demo：我们可以用这款第三方控件为基础来制作多标签浏览器。下面是最终效果图：甚至可以把其中一个标签拖出主窗体成为一个独立的窗口：是不是很像VS2010中新的TextEditor啊，呵呵。但是观察一下常用的浏览器，比如IE：Chrome：FireFox：它...
wpf - AvalonDock study
06-25 176
AvalonDock is a opensouced Dock Manager libraries under CodePlex project. The current version of AvalonDock is on the version 2.0; and the ...
WPF 实现AvalonDock的效果
05-23
AvalonDock是一个流行的开源WPF控件库，它提供了多个窗口管理和布局工具，可以让您轻松地创建像Visual Studio一样的界面。以下是实现AvalonDock效果的一些步骤： 1. 下载和安装AvalonDock NuGet包。在Visual Studio中，右键单击项目，选择“管理NuGet程序包”，搜索“AvalonDock”并安装。 2. 在XAML中添加AvalonDock命名空间，例如： ``` xmlns:ad="http://avalondock.codeplex.com" ``` 3. 添加一个 DockingManager 控件，作为主窗口的容器。例如： ``` <ad:DockingManager x:Name="dockManager"> </ad:DockingManager> ``` 4. 添加一个 DocumentPane 控件，作为文档窗口的容器。例如： ``` <ad:DockingManager x:Name="dockManager"> <ad:DocumentPane x:Name="documentPane"> </ad:DocumentPane> </ad:DockingManager> ``` 5. 在代码中创建新的DocumentContent对象，并添加到DocumentPane中。例如： ``` var newDocument = new DocumentContent(); newDocument.Title = "New Document"; documentPane.Children.Add(newDocument); ``` 6. 可以使用其他控件，如ToolWindow，来创建工具窗口。例如： ``` <ad:DockingManager x:Name="dockManager"> <ad:DocumentPane x:Name="documentPane"> </ad:DocumentPane> <ad:ToolWindow x:Name="toolWindow"> <Button Content="Tool Window Button"/> </ad:ToolWindow> </ad:DockingManager> ``` 7. 在代码中设置DocumentContent和ToolWindow的属性，如标题和内容。例如： ``` newDocument.Title = "New Document"; newDocument.Content = new TextBox(); toolWindow.Title = "Tool Window"; toolWindow.Content = new Button() { Content = "Tool Window Button" }; ``` 8. 可以使用布局配置文件来保存和加载AvalonDock布局。例如： ``` var layoutSerializer = new XmlLayoutSerializer(dockManager); layoutSerializer.Serialize("layout.xml"); layoutSerializer.Deserialize("layout.xml"); ``` 以上是实现AvalonDock效果的基本步骤，您可以根据自己的需要进行更改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值