XAML Styler
Published in
7 min readFeb 2, 2020
XAML 코딩을 하다 보면 팀원간에 attrubute 순서나 attribute 줄바꿈 스타일이 달라서 가독성이 떨어지는 경우가 발생합니다. 이때 말이나 글로 coding guideline을 맞추다 보면 어느 순간 분위기가 싸~ 합니다. 이렇게 되기 전에 Tool을 사용하는 것이 깔끔합니다.
Installation
XAML Styler extension 은 아래 링크에서 다운로드 받을 수 있습니다.
다운로드 받은 XamlStyler.Package.vsix 파일을 더블클릭하면 설치가 진행됩니다.
설치가 완료되면 Visual Studio 2019를 실행합니다. XAML 소스 코드에서 마우스 오른쪽 버튼을 클릭하면 “Format XAML” 메뉴가 보입니다.
실행해보면 기본 옵션값에 따라 XAML 소스 코드의 줄바꿈이 변경되는 것을 볼 수 있습니다.
Configuration
Visual Studio 2019의 메뉴 > Tools > Options > XAML Styler 를 찾아보면 옵션을 원하는 대로 변경할 수 있습니다.
또는 스타일 옵션을 파일로 만들어서 팀원간에 공유할 수도 있습니다. 파일명은 Settings.XamlStyler 이며 .sln 파일과 같은 경로에 저장합니다.
제가 사용하는 Settings.XamlStyler 규칙은 아래와 같습니다. Bold 폰트로 표시된 부분이 기본값에서 변경된 옵션입니다. 스타일 옵션에 대한 상세한 설명은 XamlStyle Wiki 페이지를 확인해보시길 바랍니다.
{
"IndentSize":2,
"AttributesTolerance": 2,
"KeepFirstAttributeOnSameLine": true,
"MaxAttributeCharatersPerLine": 0,
"MaxAttributesPerLine": 4,
"NewlineExemptionElements": "RadialGradientBrush, GradientStop, LinearGradientBrush, ScaleTransfom, SkewTransform, RotateTransform, TranslateTransform, Trigger, Condition, Setter, dxg:GridColumn, dxgcore:GridColumn, dxg:TreeListColumn",
"SeparateByGroups": true,
"EnableAttributeReordering": true,
"AttributeOrderingRuleGroups": [
"x:Class*",
"xmlns, xmlns:x",
"xmlns:mc, xmlns:d",
"xmlns:dx*",
"xmlns:nv*",
"xmlns:*",
"x:Key, Key, x:Name, Name, x:Uid, Uid, Title, Tag",
"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",
"Style, Background, Foreground, Fill, BorderBrush, BorderThickness, Stroke, StrokeThickness, Opacity",
"FontFamily, FontSize, LineHeight, FontWeight, FontStyle, FontStretch",
"*:*, *",
"PageSource, PageIndex, Offset, Color, TargetName, Property, Value, StartPoint, EndPoint",
"mc:Ignorable, d:*"
],
"FirstLineAttributes" : "x:Name, x:Uid, x:Key",
"OrderAttributesByName": true,
"PutEndingBracketOnNewLine": false,
"RemoveEndingTagOfEmptyElement": true,
"SpaceBeforeClosingSlash": true,
"RootElementLineBreakRule": 1,
"ReorderVSM": 2,
"ReorderGridChildren": false,
"ReorderCanvasChildren": false,
"ReorderSetters": 0,
"FormatMarkupExtension": true,
"NoNewLineMarkupExtensions": "x:Bind, Binding",
"ThicknessSeparator": 2,
"ThicknessAttributes": "Margin, Padding, BorderThickness, ThumbnailClipMargin",
"FormatOnSave": true,
"CommentPadding": 1
}아래 그림은 위의 규칙을 적용한 결과입니다.
끝 :)
