通过Fluent.Ribbon与Dirkster.AvalonDock设计界面

发布于 / VB / 0 条评论

本文介绍如何通过Fluent.Ribbon与Dirkster.AvalonDock来设计稍微现代化一点的界面。

看一下最后完成的效果:

操作示例:

有Ribbon风格的菜单栏,还有左右两栏的布局方式。

编程环境:Visual Studio 2022

编程语言:VB.net

这个采用的是WPF来设计界面,与语言无关,可以说是前后端分离的。但是,后面要做一个完整的程序的话,肯定是要涉及到具体的语言的,所以这里选择VB为后端语言。

1:添加Nuget包

总共两个:Fluent.Ribbon与Dirkster.AvalonDock,直接搜索安装即可。

Fluent.Ribbon:https://github.com/fluentribbon/Fluent.Ribbon

Dirkster.AvalonDock:https://github.com/Dirkster99/AvalonDock

添加完之后可以在引用里看到。

2:编辑代码

在Application.xaml里的

<Application.Resources>  </Application.Resources>

里面添加如下代码:

<ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" />

添加完之后Application.xaml的完整代码如下:

<Application x:Class="Application" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApp1" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" /> </Application.Resources> </Application>

将MainWindow.xaml的代码修改为下面的完整代码:

<Fluent:RibbonWindow x:Class="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:WpfApp1"
xmlns:Fluent="urn:fluent-ribbon"
xmlns:ad="https://github.com/Dirkster99/AvalonDock"
mc:Ignorable="d"
Title="huweiming" Height="600" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <!--最上面一排高度自动-->
            <RowDefinition ></RowDefinition>
            <!--中间高度-->
            <RowDefinition Height="25"></RowDefinition>
            <!--底部状态栏高度固定-->
        </Grid.RowDefinitions>
        <!--布局-->
        <ad:DockingManager x:Name= "dockingManager" Grid.Row= "1">
            <ad:DockingManager.Theme>
                <ad:Vs2013LightTheme/>
            </ad:DockingManager.Theme>
            <ad:LayoutRoot>
                <ad:LayoutPanel Orientation= "Horizontal">
                    <ad:LayoutAnchorablePane DockWidth= "200">
                        <ad:LayoutAnchorable Title= "项目" CanClose= "False" CanFloat= "False" CanHide= "False">
                            <!--项目窗口-->
                        </ad:LayoutAnchorable>
                    </ad:LayoutAnchorablePane>
                    <ad:LayoutPanel Orientation= "Vertical">
                        <ad:LayoutDocumentPane IsMaximized= "True">
                            <ad:LayoutDocument Title= "文档窗口" CanClose= "False">
                                <!--文档窗口-->
                            </ad:LayoutDocument>
                        </ad:LayoutDocumentPane>
                    </ad:LayoutPanel>
                </ad:LayoutPanel>
            </ad:LayoutRoot>
        </ad:DockingManager>
        <!--状态栏-->
        <Fluent:StatusBar HorizontalAlignment="Stretch" Grid.Row="2" VerticalAlignment="Bottom">
            <Fluent:StatusBarItem Title="状态1" Value="150" HorizontalAlignment="Left">
                <TextBlock Text="左边状态显示" />
            </Fluent:StatusBarItem>
            <Separator HorizontalAlignment="Left" />
            <Fluent:StatusBarItem Title="状态2" Value="15" ToolTip="当前文字的提示信息" Content="提示" HorizontalAlignment="Left" />
            <Separator HorizontalAlignment="Left" />
            <Fluent:StatusBarItem Title="状态3" HorizontalAlignment="Right" Content="右边状态显示"/>
        </Fluent:StatusBar>
        <Fluent:Ribbon Grid.Row="0">

            <!--弹出菜单-->
            <Fluent:Ribbon.Menu>
                <Fluent:ApplicationMenu Header="文件">
                    <Fluent:MenuItem Header="新创建" Icon="Resources/Images/New/New_64px.png">
                        <Fluent:MenuItem Header="项目" Icon="Resources/Images/New/New_64px.png" />
                        <Fluent:MenuItem Header="组件" Icon="Resources/Images/New/New_64px.png" />
                    </Fluent:MenuItem>
                    <Fluent:MenuItem Header="保存到..." Icon="Resources/Images/Save/Save_64px.png">
                        <Fluent:MenuItem Header="标准格式1" Description="这是一个关于当前功能的描述" ToolTip="提示信息" Icon="Resources/Images/Save/Save_64px.png" />
                        <Fluent:MenuItem Header="标准格式2" Description="这是一个关于当前功能的描述" ToolTip="提示信息" Icon="Resources/Images/Save/Save_64px.png" />
                    </Fluent:MenuItem>
                    <Fluent:MenuItem Header="退出" Icon="Resources/Images/Close/Close_64px.png" KeyTip="X" Click="Close_Click" />
                </Fluent:ApplicationMenu>
            </Fluent:Ribbon.Menu>
            <!--快速访问工具栏-->
            <Fluent:Ribbon.QuickAccessItems>
                <Fluent:QuickAccessMenuItem IsChecked="true">
                    <Fluent:Button Header="选取1" Icon="Resources/Images/Check/Check_16px.png" />
                </Fluent:QuickAccessMenuItem>
                <Fluent:QuickAccessMenuItem Header="下拉选择" IsChecked="False" >
                    <Fluent:CheckBox></Fluent:CheckBox>
                </Fluent:QuickAccessMenuItem>
                <Fluent:QuickAccessMenuItem IsChecked="True" Header="快速启动" Target="{Binding Source={x:Reference kuisu}}" />
            </Fluent:Ribbon.QuickAccessItems>
            <Fluent:Ribbon.ToolBarItems>
                <Fluent:Button Size="Middle" Icon="Resources/Images/Help/Help_16px.png" Header="帮助">
                    <Fluent:Button.ToolTip>
                        <Fluent:ScreenTip Title="帮助" Text="一个提示说明信息" Image="Resources/Images/Help/Help_128px.png" HelpTopic="http:\\www.huweiming.com" DisableReason="查看帮助" Width="190" IsRibbonAligned="True" />
                    </Fluent:Button.ToolTip>
                </Fluent:Button>
            </Fluent:Ribbon.ToolBarItems>

            <!--tab页面-->
            <Fluent:RibbonTabItem Header="项目" IsSelected="True">
                <Fluent:RibbonGroupBox KeyTip="FG" Header="项目创建" IsLauncherVisible="False" x:Name="groupLL">
                    <Fluent:DropDownButton Header="Pink" Icon="Resources/Images/New/New_16px.png" LargeIcon="Resources/Images/New/New_16px.png">
                        <Fluent:Gallery>
                            <Image Source="Resources/Images/New/New_16px.png" Stretch="None" />
                            <Image Source="Resources/Images/New/New_16px.png" Stretch="None" />
                            <Image Source="Resources/Images/New/New_16px.png" Stretch="None" />
                        </Fluent:Gallery>
                    </Fluent:DropDownButton>
                    <Fluent:Button Icon="Resources/Images/New/New_16px.png" Size="Small" Header="新建1"></Fluent:Button>
                    <Fluent:Button Icon="Resources/Images/New/New_32px.png" Size="Middle" Header="新建2"></Fluent:Button>
                    <Fluent:Button LargeIcon="Resources/Images/New/New_64px.png" Size="Large" Header="新建3"></Fluent:Button>
                </Fluent:RibbonGroupBox>
                <Fluent:RibbonGroupBox KeyTip="FG" Header="项目创建" IsLauncherVisible="False" x:Name="groupbb">
                    <Fluent:Button Icon="Resources/Images/New/New_16px.png" Size="Small" x:Name="kuisu" Header="新建1"></Fluent:Button>
                    <Fluent:Button Icon="Resources/Images/New/New_32px.png" Size="Middle" Header="新建2"></Fluent:Button>
                    <Fluent:Button LargeIcon="Resources/Images/New/New_64px.png" Size="Large" Header="新建3"></Fluent:Button>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>
            <Fluent:RibbonTabItem Header="工程" IsSelected="True">
                <Fluent:RibbonGroupBox KeyTip="FG" Header="项目创建" IsLauncherVisible="False" x:Name="groupaa">
                    <Fluent:Button Icon="Resources/Images/New/New_16px.png" Size="Small" Header="新建1"></Fluent:Button>
                    <Fluent:Button Icon="Resources/Images/New/New_32px.png" Size="Middle" Header="新建2"></Fluent:Button>
                    <Fluent:Button LargeIcon="Resources/Images/New/New_64px.png" Size="Large" Header="新建3"></Fluent:Button>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>
        </Fluent:Ribbon>
    </Grid>
</Fluent:RibbonWindow>

里面的涉及到的图片我全部放在\Resources\Images下,里面的文件如下:

里面只有弹出菜单的关闭按钮,绑定了一个关闭窗口,点击即可关闭程序。

也就是这一句:

Click=”Close_Click”

然后MainWindow.xaml.vb里面写了一个关闭窗口的方法:

Class MainWindow
    Private Sub Close_Click(sender As Object, e As RoutedEventArgs)
        Me.Close()
    End Sub
End Class

 

转载原创文章请注明,转载自: 胡伟明 » 通过Fluent.Ribbon与Dirkster.AvalonDock设计界面
暂无评论