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:

<!-- 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:

<!-- 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

Common Patterns

RelativeSource Binding

Inline (avoid):

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

Property Element (preferred):

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

MultiBinding

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

Binding with Validation

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

TemplateBinding Alternative

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

Complex Example

Before (single line):

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

After (structured):

<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

<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