.NET6: 開發基于WPF的摩登三維工業軟體

本文将介紹WPF下兩個輕量級的Ribbon和Dock界面架構，以及搭配AnyCAD Rapid SDK實作一個三維的應用架構。

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的三維應用程式。雖然目前看起來像簡陋的毛胚房，還不夠摩登，您稍加裝修即可完成一座漂亮的樣闆間~