Blog

XAML Hierarchy of Resources

By Ken Getz

xamllogo_3

In XAML, every element maintains its own resources collection, and also has access to the resources collection of its parent elements. As with many other areas of programming, each element uses resources from the most local source. In other words, if you refer to a resource within a given element, it will first look at its own resources, then at its parent's resources, then its parent's parent's resources, and so on.

Where does the search end? At the topmost level, each application can place references to resources at the application level, in the App.xaml file. If you refer to a resource in an element and the XAML parser can't find the resource in the element or any of its parents, it looks as a last resort in this file-if it can't find a match there, it gives up and raises an error.

Take a look at the ResourceHierarchy page. In this example, shown below, the markup defines two separate resources: BackgroundBrush is defined at the Page level, and StackPanelBackgroundBrush is defined at the StackPanel level.

The markup for the page resources looks like the following:

<Page.Resources>
<LinearGradientBrush x:Key="BackgroundBrush">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0"
Color="White" />
<GradientStop Offset="0.25"
Color="Yellow" />
<GradientStop Offset="0.5"
Color="Orange" />
<GradientStop Offset="1"
Color="Blue" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Page.Resources>

The markup for the content of the page looks like the following:

<StackPanel>
<StackPanel.Resources>
<SolidColorBrush x:Key="LocalBackgroundBrush"
Color="Pink" />
</StackPanel.Resources>
<Button Content="First Button"
HorizontalAlignment="Stretch"
Margin="5"
Background=
"{StaticResource LocalBackgroundBrush}" />
<Button Content="Second Button"
HorizontalAlignment="Stretch"
Margin="5"
Background=
"{StaticResource BackgroundBrush}" />
</StackPanel>

If you investigate the markup carefully, you'll see that each button uses a different resource to supply its Background property. The first button uses LocalBackgroundBrush (a solid Pink brush), defined by its parent container.

The second button uses BackgroundBrush (a linear gradient with several gradient stops) defined in the page. The XAML parser resolved the background for the second button by looking in the Button, then the StackPanel, and then the page resources, where it found a match.

ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Applications Using XAML: Apps and UI course written by expert Ken Getz.



Ken Getz
Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive, and DevConnections and he has written for several of the industry's most-respected publications including Visual Studio Magazine, CoDe Magazine, and MSDN Magazine.


This blog entry was originally posted November 13, 2012 by Ken Getz

XAML Windows 8 Windows 8 Apps