一、目的：分享如何使用XAML Styler以及在不同的開發環境中使用一致

????????XAML Styler 是一個 Visual Studio 擴展，用于自動格式化和整理 XAML 文件。它可以幫助開發者保持一致的代碼風格，提高代碼的可讀性和可維護性。以下是如何在 Visual Studio 中安裝和使用 XAML Styler 的詳細步驟。?

二、安裝 XAML Styler

1.?? ?打開 Visual Studio。
2.?? ?導航到 擴展 > 管理擴展。
3.?? ?在擴展管理器中，搜索 XAML Styler。
4.?? ?點擊 下載 并安裝 XAML Styler 擴展。
5.?? ?重啟 Visual Studio 以完成安裝。

三、配置 XAML Styler

1.?? ?打開 XAML Styler 設置:
??? ?在 Visual Studio 中，導航到 工具 > 選項。
??? ?在選項窗口中，找到 XAML Styler。
2.?? ?配置 XAML Styler:
??? ?在 XAML Styler 設置中，您可以根據需要配置各種選項，如屬性排序規則、縮進設置、換行規則等。

四、創建 settings.xamlstyler 配置文件（可選）

如果您希望在項目中使用自定義的 XAML Styler 配置并且在不同的開發環境中使用一致，可以創建一個 settings.xamlstyler 文件

1.?? ?創建 settings.xamlstyler 文件:

??? ?在項目的根目錄中創建一個名為 settings.xamlstyler 的文件。

?

2.?? ?添加配置:

??? ?在 settings.xamlstyler 文件中添加所需的配置。

例如：

{"AttributesTolerance": 1,"KeepFirstAttributeOnSameLine": true,"MaxAttributeCharactersPerLine": 0,"MaxAttributesPerLine": 1,"NewlineExemptionElements": "RadialGradientBrush, GradientStop, LinearGradientBrush, ScaleTransform, SkewTransform, RotateTransform, TranslateTransform, Trigger, Condition, Setter","SeparateByGroups": false,"AttributeIndentation": 0,"AttributeIndentationStyle": 1,"RemoveDesignTimeReferences": false,"EnableAttributeReordering": true,"AttributeOrderingRuleGroups": ["x:Class","xmlns, xmlns:x","xmlns:*","x:Key, Key, x:Name, Name, x:Uid, Uid, Title","Grid.Row, Grid.RowSpan, Grid.Column, Grid.ColumnSpan, Canvas.Left, Canvas.Top, Canvas.Right, Canvas.Bottom","Width, Height, MinWidth, MinHeight, MaxWidth, MaxHeight","Margin, Padding, HorizontalAlignment, VerticalAlignment, HorizontalContentAlignment, VerticalContentAlignment, Panel.ZIndex","*:*, *","PageSource, PageIndex, Offset, Color, TargetName, Property, Value, StartPoint, EndPoint","mc:Ignorable, d:IsDataSource, d:LayoutOverrides, d:IsStaticText","Storyboard.*, From, To, Duration"],"FirstLineAttributes": "","OrderAttributesByName": true,"PutEndingBracketOnNewLine": false,"RemoveEndingTagOfEmptyElement": true,"SpaceBeforeClosingSlash": true,"RootElementLineBreakRule": 0,"ReorderVSM": 1,"ReorderGridChildren": false,"ReorderCanvasChildren": false,"ReorderSetters": 0,"FormatMarkupExtension": true,"NoNewLineMarkupExtensions": "x:Bind, Binding","ThicknessSeparator": 2,"ThicknessAttributes": "Margin, Padding, BorderThickness, ThumbnailClipMargin","FormatOnSave": true,"CommentPadding": 2,"IndentSize": 4
}

3.?? ?配置 XAML Styler 使用 settings.xamlstyler:

??? ?在 XAML Styler 設置中，找到 Search to drivers root，將該值設置成true（此時就會到根目錄去找settings.xamlstyler配置）。
?? ? 或者選擇 External configuration file，并指定 settings.xamlstyler 文件的路徑（本人沒有測試是否可用）。

五、使用 XAML Styler 格式化 XAML 文件

1.?? ?手動格式化:

??? ?打開一個 XAML 文件。
??? ?右鍵點擊文件內容，選擇 Format Xaml或使用快捷鍵應用格式化。

2.?? ?自動格式化:

??? ?如果在 settings.xamlstyler 文件中啟用了 FormatOnSave 選項，保存 XAML 文件時將自動應用格式化。

六、示例

以下是一個示例 XAML 文件，展示了如何使用 XAML Styler 格式化：
原始 XAML 文件

<Window x:Class="H.Test.Halcon.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:ha="http://schemas.mvtec.com/halcondotnet" xmlns:local="clr-namespace:H.Test.Halcon" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:s="clr-namespace:SkiaSharp.Drawing2D.Shape.Shape;assembly=SkiaSharp.Drawing2D.Shape" Title="MainWindow" Width="800" Height="450" mc:Ignorable="d"><Window.DataContext><local:MainViewModel /></Window.DataContext><DockPanel><DockPanel DockPanel.Dock="Top" LastChildFill="False"><Button Command="{Binding LoadCommand}" Content="Load" /><Button Command="{Binding CreateCommand}" Content="Create Model" /><Button Command="{Binding ApplyCommand}" Content="Apply" /><Button Command="{Binding ApplyModelCommand}" Content="Apply Model" /><Button Command="{Binding FindShapeCommand}" Content="Find Shape" /></DockPanel><TabControl><TabItem Header="Image"><Image Source="{Binding ImageSource}" /></TabItem><TabItem Header="ViewStateShapeView"><Grid><ViewStateShapeView><ViewStateShapeView.Shape><s:ImageBluePrintShape ImageSource="{GetAssetsSKBitmapMarkupExtension 1.jpg}" /></ViewStateShapeView.Shape><ViewStateShapeView.InputShapes></ViewStateShapeView.InputShapes></ViewStateShapeView></Grid></TabItem><TabItem Header="ViewStateShapeView"><Grid><ViewStateShapeView Shape="{Binding Shape}" Shapes="{Binding Shapes}" /></Grid></TabItem></TabControl></DockPanel>
</Window>

?格式化后的 XAML 文件

<Window x:Class="H.Test.Halcon.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:ha="http://schemas.mvtec.com/halcondotnet"xmlns:local="clr-namespace:H.Test.Halcon"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:s="clr-namespace:SkiaSharp.Drawing2D.Shape.Shape;assembly=SkiaSharp.Drawing2D.Shape"Title="MainWindow"Width="800"Height="450"mc:Ignorable="d"><Window.DataContext><local:MainViewModel /></Window.DataContext><DockPanel><DockPanel DockPanel.Dock="Top"LastChildFill="False"><Button Command="{Binding LoadCommand}"Content="Load" /><Button Command="{Binding CreateCommand}"Content="Create Model" /><Button Command="{Binding ApplyCommand}"Content="Apply" /><Button Command="{Binding ApplyModelCommand}"Content="Apply Model" /><Button Command="{Binding FindShapeCommand}"Content="Find Shape" /></DockPanel><TabControl><TabItem Header="Image"><Image Source="{Binding ImageSource}" /></TabItem><TabItem Header="ViewStateShapeView"><Grid><ViewStateShapeView><ViewStateShapeView.Shape><s:ImageBluePrintShape ImageSource="{GetAssetsSKBitmapMarkupExtension 1.jpg}" /></ViewStateShapeView.Shape><ViewStateShapeView.InputShapes></ViewStateShapeView.InputShapes></ViewStateShapeView></Grid></TabItem><TabItem Header="ViewStateShapeView"><Grid><ViewStateShapeView Shape="{Binding Shape}"Shapes="{Binding Shapes}" /></Grid></TabItem></TabControl></DockPanel>
</Window>

七、總結

????????通過上述步驟，您可以在 Visual Studio 中安裝和使用 XAML Styler，自動格式化和整理 XAML 文件。這樣可以確保所有 XAML 文件遵循一致的格式化規則，提高代碼的可讀性和可維護性。

????????如果想在多平臺共用配置可以參考四部分的配置。

需要了解的知識點?

XAML概述 - WPF .NET | Microsoft Learn

XAML 語法詳述 - WPF .NET Framework | Microsoft Learn?

XAML - WPF .NET Framework | Microsoft Learn?

標記擴展和 XAML - WPF .NET Framework | Microsoft Learn?

XAML 及自定義類 - WPF .NET Framework | Microsoft Learn?

XAML 命名空間 （x：） 語言功能 - XAML | Microsoft Learn?

XAML 擴展 - WPF .NET Framework | Microsoft Learn?

基元素概述 - WPF .NET Framework | Microsoft Learn?

System.Windows.Controls 命名空間 | Microsoft Learn

控件庫 - WPF .NET Framework | Microsoft Learn

WPF 介紹 | Microsoft Learn

Windows Presentation Foundation 簡介 - WPF .NET | Microsoft Learn

使用 Visual Studio 創建新應用教程 - WPF .NET | Microsoft Learn

了解更多

適用于 .NET 8 的 WPF 的新增功能 - WPF .NET | Microsoft Learn

適用于 .NET 7 的 WPF 的新增功能 - WPF .NET | Microsoft Learn

System.Windows.Controls 命名空間 | Microsoft Learn

Reference Source

Sysinternals - Sysinternals | Microsoft Learn

Windows app development documentation - Windows apps | Microsoft Learn

歡迎使用 Expression Blend | Microsoft Learn

https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/?view=netdesktop-7.0&WT.mc_id=MVP_380318

https://github.com/HeBianGu

HeBianGu的個人空間-HeBianGu個人主頁-嗶哩嗶哩視頻