WPF实现选项卡效果(1)——使用AvalonDock

WPF实现选项卡效果(1)——使用AvalonDock简介  公司最近一个项目,软件采用WPF开发,需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果。搜寻诸多资料后,发现很多同仁推荐AvalonDock这款开源控件。在其官方地址下载源码和Demo后,对其进行了初步的研究,初步实现了预期效果。  完整系列  ●第一部分  ●第二部分  ●第三部分  在Git中下载工程源码AvalonDocking的结构树  在下载的Dem

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

简介

  公司最近一个项目,软件采用WPF开发,需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果。搜寻诸多资料后,发现很多同仁推荐AvalonDock这款开源控件。在其官方地址下载源码和Demo后,对其进行了初步的研究,初步实现了预期效果。
  完整系列
  ● 第一部分
  ● 第二部分
  ● 第三部分
  在Git中下载工程源码

AvalonDocking的结构树

  在下载的Demo中,我们可以发现AvalonDock的可视化结构树如下:

<avalon:DockingManager x:Name="dockingManager">
            <avalon:LayoutRoot>
                <avalon:LayoutPanel Orientation="Horizontal">
                    <avalon:LayoutDocumentPane DockWidth="300">
                        <avalon:LayoutAnchorable Title="Sample Tool Pane">
                            <TextBox />
                        </avalon:LayoutAnchorable>
                    </avalon:LayoutDocumentPane>
                </avalon:LayoutPanel>
            </avalon:LayoutRoot>
        </avalon:DockingManager>
Created with Raphaël 2.1.0 AvalonDock 可视化结构树 DockingManager DockingManager LayoutRoot LayoutRoot LayoutPanel LayoutPanel LayoutDocumentPane LayoutDocumentPane LayoutAnchorable LayoutAnchorable Content Content 承载 承载 承载 承载 我们需要的内容

我们来做一个Demo

Step 1-创建WPF项目

  在Visual Studio中新建一个WPF项目,然后打开MainWindow.xaml文件,修改其代码如下:  

<Window x:Class="AvalonProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:avalon="http://schemas.xceed.com/wpf/xaml/avalondock" Title="MainWindow" Height="600" Width="800">
    <Grid>
        <avalon:DockingManager x:Name="dockingManager">
            <avalon:LayoutRoot>
                <avalon:LayoutPanel Orientation="Horizontal">
                    <avalon:LayoutDocumentPane DockWidth="300">
                        <avalon:LayoutAnchorable Title="Sample Tool Pane">
                            <TextBox />
                        </avalon:LayoutAnchorable>
                    </avalon:LayoutDocumentPane>
                </avalon:LayoutPanel>
                <avalon:LayoutRoot.LeftSide>
                    <avalon:LayoutAnchorSide>
                        <avalon:LayoutAnchorGroup>
                            <avalon:LayoutAnchorable Title="Autohidden Content">
                                <TextBox />
                            </avalon:LayoutAnchorable>
                        </avalon:LayoutAnchorGroup>
                    </avalon:LayoutAnchorSide>
                </avalon:LayoutRoot.LeftSide>
            </avalon:LayoutRoot>
        </avalon:DockingManager>
    </Grid>
</Window>

Step 2-添加AvalonDock引用

  在刚刚建好的项目中,添加Xceed.Wpf.AvalonDock引用。
  我们回顾上面的xaml代码,其中有一句代码:

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

  这一句就是xaml代码对AvalonDock命名控件的引用,只有添加这一句才能在xaml代码中对AvalonDock的控件进行使用。

Step 3-运行程序

  运行程序,我们发现效果如下:
  这里写图片描述
  这里写图片描述

总结

  在上面的代码中,我们没有书写任何C#代码,利用AvalonDock初步实现了我们需要的选项卡效果。

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

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/162148.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Python缩进规则_python任意代码都可以缩进

    Python缩进规则_python任意代码都可以缩进具有相同缩进的代码被视为代码块。缩进在Python中具有严格的习惯写法:4个空格,不要使用Tabif语句后接表达式,然后用:表示代码块的开始。

    2022年10月13日
    0
  • pytest运行_怎么清理ios文件app的缓存

    pytest运行_怎么清理ios文件app的缓存前言pytest运行完用例之后会生成一个.pytest_cache的缓存文件夹,用于记录用例的ids和上一次失败的用例。方便我们在运行用例的时候加上–lf和–ff参数,快速运行上一

    2022年7月30日
    2
  • java typereference_Java泛型 | Jackson TypeReference获取泛型类型信息「建议收藏」

    java typereference_Java泛型 | Jackson TypeReference获取泛型类型信息「建议收藏」前言Jackson是一个比较流行的Json序列化和反序列化框架。本文以Jackson为例介绍TypeReference实现涉及泛型的反序列化,及TypeReference的实现原理。对于获取泛型类型信息的场景,TypeReference是一个可以参考的通用解决方案。实例JacksonObjectMapper的readValue可以将Json字符串反序列化为Java对象。如下例中将[{“id”:n…

    2022年6月17日
    72
  • Linux下安装RabbitMQ

    Linux下安装RabbitMQ一、RabbitMQ介绍RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客户端,如:Python、Ruby、.NET、Java、JMS、C、PHP、ActionScript、XMPP、STOMP等,支持AJAX。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。AMQP,即AdvancedMessageQ…

    2022年10月22日
    0
  • Pycharm调试_pycharm 远程调试

    Pycharm调试_pycharm 远程调试动机一些bug由于本地环境和线上环境的不一致可能导致本地无法复现本地依赖和线上依赖版本不一致也可以导致一些问题有时一些bug跟数据相关,本地数据无法和线上数据一致有些三方平台会验证服务器的合法性或者异步回调结果,如微信支付,这时候本地无法测试如上所诉,要是有一个很方便调试远程服务器的方法,岂不美哉。通过PyCharm我们可以很方便地实现远程调试,下面详细介绍下PyCharm这个牛叉的功能。添加远程…

    2025年7月1日
    1
  • java 四舍五入保留小数

    java 四舍五入保留小数//方式一:doublef=3.1516;BigDecimalb=newBigDecimal(f);doublef1=b.setScale(2,BigDecimal.ROUND_HALF_UP).doubleValue(); //方式二:newjava.text.DecimalFormat(“#.00”).format(3.1415926);

    2022年5月22日
    40

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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