小弟我的XAML编码规范 _Web前端

我的XAML编码规范

作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs

去年，我们建立了自己的C#编码规范，我说服同事遵循我写的编码规范。或许我是一个偏执狂吧，如果我看到有人不遵守我写的编码规范，而是去修改它，我可能通宵都睡不着。

借助Visual Studio的优秀插件ReSharper，可以很轻松地按照规则对代码进行格式化。你只需按下Ctrl-E / Ctrl-C，就可以对代码文档进行格式化。ReSharper是Visual Studio必备的工具。(图1)

自Windows Phone平台发布的两年以来，我一直使用XAML语言设计用户界面。查看C#的编码习惯是很容易的，但是对于XAML，就很困难了。

下面是Windows存储网格应用项目的例子：

<ListView.GroupStyle>
    <GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <Grid Margin="7,7,0,0">
                    <Button
                        AutomationProperties.Name="Group Title"
                        Click="Header_Click"
                        Style="{StaticResource TextPrimaryButtonStyle}">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                            <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                        </StackPanel>
                    </Button>
                </Grid>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
    </GroupStyle>
</ListView.GroupStyle>

首先，没有空行。其次，按钮的属性在不同的行。而对于TextBlock元素，属性却在同一行，且没有任何顺序。

在过了很长一段时间后，我编写了自己的XAML编码规范。其中一个原因是，我不喜欢使用"属性"窗口，因为它很难有一个全面的属性设置，而不是设置为默认。(图2)

我的编码规范可简述为以下5点：

1 元素之间放入空行。

不要担心空行太多，它会使代码更易读。

<Grid Height="250"
      VerticalAlignment="Top">

    <Image Source="{Binding FeatureArticle1.Thumbnail}"
           Style="{StaticResource ImageThumbnailStyle}" />

    <StackPanel Style="{StaticResource StackPanelSummaryStyle}">

    <TextBlock FontSize="22"
               Style="{StaticResource TextBlockAuthorStyle}"
               Text="{Binding FeatureArticle1.Author}" />

    <TextBlock FontSize="26"
               Height="70"
               Style="{StaticResource TextBlockSummaryStyle}"
               Text="{Binding FeatureArticle1.Title}" />

    </StackPanel>

</Grid>

但是只有Grid.ColumnDefinition和Grid.RowDefinitions例外，因为它们只有一行属性。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="200" />
    <ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
    <RowDefinition Height="200" />
    <RowDefinition Height="140" />
</Grid.RowDefinitions>

2 每个属性放一行。

<TextBlock FontWeight="Bold"
           Foreground="White"
           HorizontalAlignment="Right"
           Margin="0,0,12,0"
           Text="{Binding ArticlesCountText}"
           TextWrapping="Wrap" />

3 属性按字母表排序。

<Image Source="/Assets/Shares/NeutralImage.png"
       Height="125"
       HorizontalAlignment="Center"
       Width="125"
       Stretch="UniformToFill"
       VerticalAlignment="Center" />

有人说，高度Height和宽度Width应该放在一起，但作者还是喜欢按字母表顺序对属性排序。作者认为这更容易检查是否有属性设置漏了。

4 把附加属性放在起始位置并以字母表顺序放置。

<Button Grid.Column="1"
        Grid.Row="2"
        Command="{Binding ShowWriterCommand}"
        CommandParameter="{Binding WriterAshley}"
        Style="{StaticResource HubTileButtonStyle}" />

5 样式的定义可以不用那么严格。

当使用Expression Blend创建样式时，作者倾向于留下更大的空间，减少限制。这样的话，会节省很多时间。

<Style x:Key="GridFeatureStyle"
        TargetType="Grid">
    <Setter Property="Height"
            Value="194" />
    <Setter Property="VerticalAlignment"
            Value="Top" />
    <Setter Property="Width"
            Value="194" />
</Style>

结论

这可能并非完美的解决方案，但如果你遵循它的话，这是一个良好的开端，特别是在团队协作的时候。