XAML 编码规范

在过去的一年中,我建立了自己的C#编码规范。 我也总是设法说服我的同事按照我的编码规范去写代码,如果他们还没给自己订过。 我是一个有编码规范强迫症的人,如果我看到有人修改我的某个文件,却没按照我的编码规范来做,我可能会在晚上睡不着(好吧,不算多,但...)。

在伟大的Visual Studio插件  ReSharper 的帮助下, 代码格式化变得极其容易。 你只需要简单的轻点 Ctrl+E/Ctrl+C 就可以格式化一个文档。ReSharper 一旦拥有,别无所求。

在过去的两年里, 自从Windows Phone平台发布以来,我一直在使用XAML语言来构建我的用户界面。 我发现C#的编码规范非常简单,但是XAML却有点挑战性。 我首先查看了默认的微软项目,可是我意识到即使对今天而言,他们也有点乱七八糟的。

下面是一个 WInd ows Store Grid 的工程文件:
<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编码规范,我想和大家分享。我制定它的原因之一是,我不喜欢使用“属性”窗口,因为它在默认状态很难显示所有的属性。

image

我的编码规范有以下五点:

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" />
有的人争辩Width和Height应该并排或者在相邻的线上,但是我仍然更喜欢按字母顺序排列,因为当你知道定义的顺序的时候,它更容易读懂。如果一个元素具有许多属性时,它更加容易检查某个属性是否漏掉。

4- 把关联的属性放在最前面并按字母顺序排列.

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

Grid.Column / Grid.Row属性就是典型的例子.

5- Style的定义不必非常严格.

在使用Expression Blend创建Style时,如果内容很多,我倾向于不做修改. 提高效率才是王道. 但是如果style内容不多, 我就不会放置空行,并把属性按字母顺序排列,如下:

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

结论

对你来说这并不一定是最佳解决方案,但如果你要和同事分享代码,我的这个规范是一个很好的开始。

关于编码规范我的座右铭是:有比没有好。

编码快乐!