笔记：如何使用XAML Styler以及在不同的开发环境中使用一致

一、目的：分享如何使用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>