Elements and Attributes in XAML

Analogy categoryAnalogies

In XAML, an element name identifies a class to instantiate, and an attribute name identifies a property or event on that class to set or wire up. Because XML attribute values are always plain strings, XAML relies on TypeConverters — classes that know how to turn text like "Red" or "10,20,300,200" into a strongly-typed value such as a Brush or a Thickness — to bridge the gap between what you type in markup and the actual .NET type the property expects.

🏏

Cricket analogy: It's like a scorecard entry '4' next to a shot needing context (boundary vs. running four) that the scoring system converts into the correct event type, rather than just storing a bare number.

Type Converters and Attribute Values

A single string attribute value can be parsed very differently depending on which property it targets: Background="Red" is converted by BrushConverter into a SolidColorBrush, Margin="10,20,30,40" is converted by ThicknessConverter into a Thickness with left, top, right, and bottom offsets, and RowDefinitions written as Height="Auto" or Height="2*" are converted by GridLengthConverter into GridLength values representing auto-sizing or star-based proportional sizing. This is why the same-looking comma-separated string means something entirely different on a Margin than it would on, say, a Rect or a Point.

🏏

Cricket analogy: It's like the number '6' meaning a boundary when attached to a ball outcome but meaning an over count when attached to a bowling figure — same digit, different meaning depending on which stat field it fills.

Attached Properties

Attached properties let one class define a property that is set on instances of a different class, most commonly seen as Grid.Row="1" and Grid.Column="2" on a child element placed inside a Grid, even though Row and Column are technically owned by the Grid type rather than the child. Under the hood this compiles to Grid.SetRow(child, 1) and Grid.SetColumn(child, 2), static methods that store the value in the child's own attached-property storage so the parent Grid can read it back during layout without the child needing any Grid-specific properties of its own.

🏏

Cricket analogy: It's like a stadium assigning a specific gate number to a spectator's ticket — the gate is a property of the stadium, but it's stamped onto the individual ticket so the entry gate knows where to route that person.

xml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="Username:" />
    <TextBox   Grid.Row="0" Grid.Column="1" />

    <Button Grid.Row="1" Grid.Column="1"
            Content="Submit"
            Click="OnSubmitClick" />
</Grid>

Attribute order within an element never affects the result, since XML attributes are unordered — Grid.Row="1" Grid.Column="2" behaves identically to Grid.Column="2" Grid.Row="1". Nested child element order does matter, however, because it determines Z-order (later children render on top) and the sequence used when a collection like Children is populated.

Events as Attributes

An attribute like Click="OnSubmitClick" doesn't set a property at all — it wires the Button's Click event to a method named OnSubmitClick that must exist in the code-behind partial class identified by the file's x:Class attribute. When the project compiles, the XAML compiler generates a call inside InitializeComponent() that does the equivalent of submitButton.Click += OnSubmitClick;, so the naming convention that connects XAML to code-behind is simply that the method name in the attribute must match a method signature compatible with the event's delegate type in the partial class.

🏏

Cricket analogy: It's like a fielding chart labeling a position 'Slip: Rahane' — the label itself doesn't do the catching, it just designates which named player is wired to respond when a ball comes to that zone.

XAML elements instantiate classes; attributes set properties or wire up events on that class.
TypeConverters translate attribute strings (e.g. "Red", "10,20,30,40") into strongly-typed property values.
The same string format (comma-separated numbers) can mean different things depending on the target property's type.
Attached properties like Grid.Row let a parent type define properties settable on any child element.
Attached properties compile to static setter calls like Grid.SetRow(child, value).
Attribute order doesn't matter; nested child element order affects Z-order and collection sequence.
Event attributes like Click="Handler" wire XAML to a method in the code-behind partial class.

Practice what you learned

1. What role does a TypeConverter play in XAML?

2. What is an attached property?

3. What does Grid.Row="1" compile down to under the hood?

4. Does the order of attributes on a XAML element affect the result?

5. What does the attribute Click="OnSubmitClick" do?

Was this page helpful?

XAML Namespaces

XAML vs Code-Behind

Related Study Notes in Microsoft Technologies

Browse all study notes

Microsoft Technologies

Windows 10 / UWP Development Study Notes

.NET · 30 topics

Microsoft Technologies

Windows Batch Scripting Study Notes

Batch · 30 topics

Microsoft Technologies

MFC (Microsoft Foundation Classes) Study Notes

C++ · 30 topics

Microsoft Technologies

Silverlight Study Notes

.NET · 30 topics

Microsoft Technologies

WPF (Windows Presentation Foundation) Study Notes

.NET · 30 topics

Microsoft Technologies

MVVM Design Pattern Study Notes

.NET · 30 topics

Topics covered

#NET#XAMLStudyNotes#MicrosoftTechnologies#ElementsAndAttributesInXAML#Elements#Attributes#XAML#Type#StudyNotes#SkillVeris

Elements and Attributes in XAML