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

本文通過簡潔的示例實作了暗黑風格的程式界面，為Ribbon增加Icon圖檔，并通過WPF的指令路由機制實作了按鈕消息處理方法。最後，通過AnyCAD的模組化API建立複雜的形狀：愛心巧克力。本文所有代碼：...

在​​《.NET6: 開發基于WPF的摩登三維工業軟體 (1)》​​我們建立了一個"毛坯"界面，距離摩登還差一段距離。本文将對上一階段的成果進行深化，實作當下流行的暗黑風格UI。

1 設定暗黑主題

利用MergedDictionaries配置，在已有的通用風格基礎上添加Dark.Blue主題。代碼如下：

App.xaml

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" />
                <ResourceDictionary Source="pack://application:,,,/Fluent;component/Themes/Themes/Dark.Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>      

運作一下：

主題已經變成了暗黑模式。

2 給Button增加圖示

2.1 引入圖檔

在項目目錄下增加Resources目錄，把circle.png複制到Resources目錄下。

在項目浏覽器中把圖檔添加到項目，選擇Resources目錄，右鍵菜單：

選擇Resources/circle.png

2.2 設定圖檔屬性

選擇圖檔，在屬性面闆中設定：

• 複制到輸出目錄： 始終複制
• 生成操作：内容

按照上述步驟加入其他的圖檔。

2.3 Ribbon Button中使用圖檔

為Fluent:Button設定Icon屬性，引用圖檔資源

<!--Tabs-->
            <Fluent:RibbonTabItem Header="模組化">
                <Fluent:RibbonGroupBox Header="基本體" IsLauncherVisible="False">
                    <Fluent:Button Header="直線" Icon="/Resources/line.png" Size="Large"/>
                    <Fluent:Button Header="圓弧" Icon="/Resources/arc3pts.png" Size="Large"/>
                    <Fluent:Button Header="圓形" Icon="/Resources/circle.png" Size="Large"/>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>
            <Fluent:RibbonTabItem Header="設定">
            </Fluent:RibbonTabItem>      

運作一下：

3 增加Button響應消息

3.1 增加路由指令

定義RoutedCommand用于響應Button的點選事件。

MainWindow.xaml.cs

public partial class MainWindow 
    {
        // 定義路由指令
        public static readonly RoutedCommand ExecuteCommand = new RoutedCommand("Rapid", typeof(MainWindow));
        public MainWindow()
        {
            InitializeComponent();
            // 綁定響應函數
            CommandBindings.Add(new CommandBinding(ExecuteCommand, OnExecuteCommand));
        }

        private void RibbonWindow_Loaded(object sender, RoutedEventArgs e)
        {

        }
        // 處理點選指令
        private void OnExecuteCommand(object sender, ExecutedRoutedEventArgs e)
        {

        }
    }      

3.2 XAML裡綁定Button綁定事件

• Command: 綁定的指令
• CommandParameter: 指令參數

MainWindow.xaml

<Fluent:Button Header="直線" Icon="/Resources/line.png" Size="Large" Command="{x:Static local:MainWindow.ExecuteCommand}" 
                                   CommandParameter="line"/>
                    <Fluent:Button Header="圓弧" Icon="/Resources/arc3pts.png" Size="Large" Command="{x:Static local:MainWindow.ExecuteCommand}" 
                                   CommandParameter="arc"/>
                    <Fluent:Button Header="圓形" Icon="/Resources/circle.png" Size="Large" Command="{x:Static local:MainWindow.ExecuteCommand}" 
                                   CommandParameter="circle"/>      

3.3 指令處理函數

MainWindow.xaml.cs

​​

​csharp // 處理點選指令 private void OnExecuteCommand(object sender, ExecutedRoutedEventArgs e) { switch (e.Parameter.ToString()) { case "line": { var shape = SketchBuilder.MakeLine(new GPnt(0, 0, 0), new GPnt(10, 10, 0)); mView3d.ShowShape(shape, ColorTable.AliceBlue); } break; case "arc": { var shape = SketchBuilder.MakeArcOfCircle(new GPnt(0, 0, 0), new GPnt(10, 10, 0), new GPnt(5,15,0)); mView3d.ShowShape(shape, ColorTable.AliceBlue); } break; case "circle": { var shape = SketchBuilder.MakeCircle(new GPnt(0, 0, 0), 5, GP.DZ()); mView3d.ShowShape(shape, ColorTable.AliceBlue); } break; } } ​

​

運作一下，挨個Button點一遍：

4 綜合模組化

愛心巧克力

一種實作方法：

• 由線生成愛心平面輪廓
• 輪廓填充成面
• 面拉伸成體
• 對體倒角

{
        var arc1 = SketchBuilder.MakeArcOfCircle(new GPnt(0, 2, 0), new GPnt(10, 0, 0), new GPnt(5, 5, 0));
        var arc2 = SketchBuilder.MakeArcOfCircle(new GPnt(0, 2, 0), new GPnt(-10, 0, 0), new GPnt(-5, 5, 0));
        var bottomPt = new GPnt(0, -12, 0);
        var line1 = SketchBuilder.MakeLine(new GPnt(-10, 0, 0), bottomPt);
        var line2 = SketchBuilder.MakeLine(bottomPt, new GPnt(10, 0, 0));

        var shapeList = new TopoShapeList();
        shapeList.Add(arc1);
        shapeList.Add(arc2);
        shapeList.Add(line1);
        shapeList.Add(line2);

        var wire = SketchBuilder.MakeWire(shapeList);
        var face = SketchBuilder.MakePlanarFace(wire);
        var shape = FeatureTool.Extrude(face, 5, GP.DZ());

        shape = FeatureTool.Fillet(shape, 1);

        mView3d.ShowShape(shape, ColorTable.PaleVioletRed);
    }      

5 總結

本文通過簡潔的示例實作了暗黑風格的程式界面，為Ribbon增加Icon圖檔，并通過WPF的指令路由機制實作了按鈕消息處理方法。最後，通過AnyCAD的模組化API建立複雜的形狀：愛心巧克力。本文所有代碼：​​Valentine's Day​​

最後，祝天下所有的程式員情人節快樂！

var mesh = FontManager.Instance().CreateMesh("情人節快樂！");
    var material = MeshPhongMaterial.Create("love-material");
    material.SetColor(ColorTable.OrangeRed);
    var shape = new PrimitiveSceneNode(mesh, material);
    mView3d.ShowSceneNode(shape);