Back to Skills

using-xaml-property-element-syntax

verified

Converts long inline XAML bindings to Property Element Syntax for better readability. Use when XAML binding expressions become too long or complex.

View on GitHub

Marketplace

dotnet-claude-plugins

christian289/dotnet-with-claudecode

Plugin

wpf-dev-pack

development

Repository

christian289/dotnet-with-claudecode
5stars

wpf-dev-pack/skills/using-xaml-property-element-syntax/SKILL.md

Last Verified

January 23, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/christian289/dotnet-with-claudecode/blob/main/wpf-dev-pack/skills/using-xaml-property-element-syntax/SKILL.md -a claude-code --skill using-xaml-property-element-syntax

Installation paths:

Claude
.claude/skills/using-xaml-property-element-syntax/
Powered by add-skill CLI

Instructions

# 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

| 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):**
```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

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
3840 chars