我的XAML编码规范

时间：2023-01-10 20:21:12

我的XAML编码规范

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

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


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

我的XAML编码规范

自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)

我的XAML编码规范

我的编码规范可简述为以下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>

结论


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

标签：

相关文章