using-xaml-property-element-syntax
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
| Condition | Use Property Element Syntax |
|---|---|
| Line > 100 characters | Yes |
| Nested RelativeSource | Yes |
| MultiBinding | Yes |
| Multiple BindingValidationRules | Yes |
| Simple binding | No (keep inline) |
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
- One attribute per line when using Property Element
- Indent nested elements consistently (4 spaces or 1 tab)
- Align closing tags with opening tags
- 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
More from christian289/dotnet-with-claudecode
converting-html-css-to-wpf-xaml
Converts HTML/CSS to WPF CustomControl XAML with correct patterns and common pitfall solutions. Use when transforming web designs to WPF, converting CSS animations to Storyboards, implementing CSS border-radius clipping, CSS pseudo-elements (::before/::after), or CSS transforms in XAML.
56publishing-wpf-apps
Guides WPF application publishing and installer options. Use when user mentions publish, deploy, release, packaging, or installer to help choose deployment method and installer technology.
14using-avalonia-collectionview
Provides CollectionView alternatives for AvaloniaUI using DataGridCollectionView and ReactiveUI. Use when filtering, sorting, or grouping collections in AvaloniaUI applications.
9designing-avalonia-customcontrol-architecture
Defines the basic solution structure for AvaloniaUI Desktop Applications using CustomControl. Use when creating new AvaloniaUI projects or designing stand-alone control styles with ControlTheme.
9managing-styles-resourcedictionary
Manages WPF Style definitions and ResourceDictionary patterns including BasedOn inheritance and resource merging. Use when building theme systems, organizing resources, or choosing between StaticResource and DynamicResource.
8configuring-avalonia-dependency-injection
Configures GenericHost and Dependency Injection in AvaloniaUI applications. Use when setting up DI container, registering services, or implementing IoC patterns in AvaloniaUI projects.
7