您好，欢迎来到尚车旅游网。
科技 教育 生活 旅游 时尚 美容 美食 健康 体育 游戏 汽车 家电
搜索
您的当前位置：首页WPF使用AvalonDock

WPF使用AvalonDock

来源：尚车旅游网

WPF使用AvalonDock

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

使用流程

<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一起占满窗体剩余空间。

参考文献

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

Copyright © 2019- sceh.cn 版权所有

违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务