Статьи

Соглашение о кодировании XAML

Ноябрь 22, 2018

За последний год я создал свои собственные соглашения о кодировании для C #. Мне также всегда удается убедить моих коллег следовать моим правилам кодирования, если у них их еще нет. Я очень увлекаюсь соблюдением правил кодирования; если я вижу, как кто-то изменяет один из моих файлов и не следует моим правилам, у меня могут возникнуть проблемы со сном ночью (хорошо, не так много, но …).

С помощью замечательного дополнения Visual Studio ReSharper легко форматировать код с помощью правил. Вам нужно всего лишь нажать Ctrl-E / Ctrl-C, чтобы отформатировать документ. ReSharper — обязательный инструмент для Visual Studio.

В течение последних двух лет, с момента выпуска платформы Windows Phone, я использовал язык XAML для программирования своих пользовательских интерфейсов. Найти соглашения по кодированию для C # довольно легко, но для XAML это было немного сложнее. Моим первым шагом было проверить стандартные проекты Microsoft, но я пришел к выводу, что даже они немного беспорядочные даже на сегодняшний день.

Вот пример проекта приложения WIndows 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, которым я хотел бы поделиться. Одна из причин, по которой я разработал свое собственное соглашение о кодировании 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" />

Некоторые утверждают, что Высота и Ширина должны быть рядом или на соседней строке, но я все же предпочитаю алфавитный порядок, потому что намного легче читать, когда вы знаете, в каком порядке находятся ваши определения. Кроме того, если есть элемент со многими атрибутами намного проще проверить, отсутствует ли атрибут.

4- Поместите прикрепленные свойства в начале и в алфавитном порядке.

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

Grid.Column / Grid.Row являются классическими примерами.

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>

Вывод

Возможно, это не идеальное решение для вас, но если у вас его нет, мое соглашение будет хорошим началом, особенно если вы делитесь кодом с коллегами.

Мой девиз о соглашении о кодировании следующий: лучше иметь соглашение о кодировании, чем не иметь его!

Удачного кодирования!

36
Share: