当前位置：首页 > news >正文

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

news 来源：原创 2025/5/24 10:23:47

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