AgentSkillsCN

using-xaml-property-element-syntax

将过长的内联 XAML 绑定转换为 Property Element 语法,以提升代码可读性。当 XAML 绑定表达式变得过于冗长或复杂时使用。

SKILL.md
--- frontmatter
name: using-xaml-property-element-syntax
description: Converts long inline XAML bindings to Property Element Syntax for better readability. Use when XAML binding expressions become too long or complex.

Using XAML Property Element Syntax

Convert long inline bindings to structured Property Element Syntax for improved readability.

Problem

Inline binding expressions can become horizontally extended and difficult to read:

xml
<!-- Hard to read: 120+ characters in one line -->
<CheckBox IsChecked="{Binding Path=DataContext.IsAllChecked, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType=DataGrid, Mode=FindAncestor}}"/>

Solution

Split into Property Element Syntax:

xml
<!-- Readable: Structured and maintainable -->
<CheckBox>
    <CheckBox.IsChecked>
        <Binding Path="DataContext.IsAllChecked"
                 UpdateSourceTrigger="PropertyChanged">
            <Binding.RelativeSource>
                <RelativeSource AncestorType="{x:Type DataGrid}"
                                Mode="FindAncestor"/>
            </Binding.RelativeSource>
        </Binding>
    </CheckBox.IsChecked>
</CheckBox>

When to Use

ConditionUse Property Element Syntax
Line > 100 charactersYes
Nested RelativeSourceYes
MultiBindingYes
Multiple BindingValidationRulesYes
Simple bindingNo (keep inline)

Common Patterns

RelativeSource Binding

Inline (avoid):

xml
<TextBlock Text="{Binding DataContext.Title, RelativeSource={RelativeSource AncestorType=Window}}"/>

Property Element (preferred):

xml
<TextBlock>
    <TextBlock.Text>
        <Binding Path="DataContext.Title">
            <Binding.RelativeSource>
                <RelativeSource AncestorType="{x:Type Window}"/>
            </Binding.RelativeSource>
        </Binding>
    </TextBlock.Text>
</TextBlock>

MultiBinding

xml
<TextBlock>
    <TextBlock.Text>
        <MultiBinding Converter="{local:FullNameConverter}">
            <Binding Path="FirstName"/>
            <Binding Path="LastName"/>
        </MultiBinding>
    </TextBlock.Text>
</TextBlock>

Binding with Validation

xml
<TextBox>
    <TextBox.Text>
        <Binding Path="Email"
                 UpdateSourceTrigger="PropertyChanged"
                 ValidatesOnDataErrors="True"
                 NotifyOnValidationError="True">
            <Binding.ValidationRules>
                <local:EmailValidationRule/>
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>
</TextBox>

TemplateBinding Alternative

xml
<!-- When TemplateBinding doesn't work -->
<Border>
    <Border.Background>
        <Binding Path="Background"
                 RelativeSource="{RelativeSource TemplatedParent}"/>
    </Border.Background>
</Border>

Complex Example

Before (single line):

xml
<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding Value, StringFormat={}{0:N2}, Converter={StaticResource NullToEmptyConverter}, ConverterParameter=Default, FallbackValue=N/A}"/>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

After (structured):

xml
<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <TextBlock>
            <TextBlock.Text>
                <Binding Path="Value"
                         StringFormat="{}{0:N2}"
                         Converter="{StaticResource NullToEmptyConverter}"
                         ConverterParameter="Default"
                         FallbackValue="N/A"/>
            </TextBlock.Text>
        </TextBlock>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

Style Property Element

xml
<Button Content="Submit">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="DarkBlue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Formatting Guidelines

  1. One attribute per line when using Property Element
  2. Indent nested elements consistently (4 spaces or 1 tab)
  3. Align closing tags with opening tags
  4. Group related properties together

Checklist

  • Line exceeds 100 characters → Use Property Element
  • Contains nested markup extension → Use Property Element
  • Simple {Binding PropertyName} → Keep inline
  • Has multiple Binding properties → Consider Property Element
  • Contains ValidationRules → Use Property Element