.NET6: 開發基於WPF的摩登三維工業軟件

MS Office和VisualStudio一直引領着桌面應用的時尚潮流，大型的工業軟件一般都會緊跟潮流，搭配着Ribbon和DockPanel風格的界面。本文將介紹WPF下兩個輕量級的Ribbon和Dock界面框架，以及搭配AnyCAD Rapid SDK實現一個三維的應用框架。

1 增加Ribbon界面

1.1 下載Fluent.Ribbon

nuget上搜索ribbon，找到Fluent.Ribbon，添加到項目中

1.2 設置資源路徑

App.xaml

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

1.3 設置主窗口

1.3.1 修改主窗口的基類

MainWindow.xaml.cs

    public partial class MainWindow 
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

1.3.2 引用Fluent.Ribbon控件

MainWindow.xaml

<Fluent:RibbonWindow  x:Class="RapidUI.MainWindow"
        xmlns:Fluent="urn:fluent-ribbon" 
        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:RapidUI"
        mc:Ignorable="d"
        Title="AnyCAX 2022" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <!--Ribbon-->
            <RowDefinition Height="Auto"></RowDefinition>
            <!--工作窗口-->
            <RowDefinition></RowDefinition>
            <!--StatusBar-->
            <RowDefinition Height="25"></RowDefinition>
        </Grid.RowDefinitions>
        <!--Ribbon-->
        <!--工作窗口-->
        <!--StatusBar-->
    </Grid>
</Fluent:RibbonWindow>    

1.4 添加Ribbon

1.4.1 添加RibbonBar

MainWindow.xaml

        <!--Ribbon-->
        <Fluent:Ribbon Grid.Row="0">
            <!--Tabs-->
            <Fluent:RibbonTabItem Header="建模">
                <Fluent:RibbonGroupBox Header="基本體" IsLauncherVisible="False">
                    <Fluent:Button Header="球"/>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>
        </Fluent:Ribbon>
        <!--工作窗口-->

1.4.2 添加RibbonStatusBar

        <!--StatusBar-->
        <Fluent:StatusBar Grid.Row="2">
            <Fluent:StatusBarItem Title="Ready"
                          Value="150"
                          HorizontalAlignment="Left">
                <TextBlock Text=" 准備就緒" />
            </Fluent:StatusBarItem>

            <Separator HorizontalAlignment="Left" />

            <Fluent:StatusBarItem Title="WebSite"
                          HorizontalAlignment="Right"
                          Value="www.anycad.cn " />
        </Fluent:StatusBar>

運行一下：

2 增加浮動控件

2.1 安裝Dirkster.AvalonDock

2.2 修改XAML

MainWindow.xaml

<Fluent:RibbonWindow
...
xmlns:ad="https://github.com/Dirkster99/AvalonDock"  
...

2.3 增加Dock控件

MainWindow.xaml

        <!--工作窗口-->
        <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>
        <!--StatusBar-->

運行一下：

3 增加三維控件

3.1 下載AnyCAD Rapid SDK

3.2 初始化AnyCAD控件

增加Startup和Exit消息處理
App.xaml

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

App.xaml

    public partial class App : Application
    {
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            AnyCAD.Foundation.GlobalInstance.Initialize();
        }

        private void Application_Exit(object sender, ExitEventArgs e)
        {
            AnyCAD.Foundation.GlobalInstance.Destroy();
        }
    }

3.3 增加AnyCAD控件引用

MainWindow.xaml

增加assembly引用：

xmlns:anycad="clr-namespace:AnyCAD.WPF;assembly=AnyCAD.WPF.NET6"

增加控件實例：

                                <!--三維窗口-->
                                <anycad:RenderControl Name="mView3d"/>

運行一下：

4 總結

通過整合Fluent.Ribbon、Dirkster.AvalonDock和AnyCAD Rapid .NET控件，我們可以快速搭建一個具有現代UI的三維應用程序。雖然目前看起來像簡陋的毛胚房，還不夠摩登，您稍加裝修即可完成一座漂亮的樣板間~

本文的完整代碼可在gitee上下載：
https://gitee.com/anycad/rapid.net.starter/tree/master/Wpf.Ribbon