How to: Define and Reference a Resource

This example shows how to define a resource and reference it by using an attribute in Extensible Application Markup Language (XAML).

Example

The following example defines two types of resources: a SolidColorBrush resource, and several Style resources. The SolidColorBrush resource MyBrush is used to provide the value of several properties that each take a Brush type value. The Style resources PageBackground, TitleText and Label each target a particular control type. The styles set a variety of different properties on the targeted controls, when that style resource is referenced by resource key and is used to set the Style property of several specific control elements defined in XAML.

Note that one of the properties within the setters of the Label style also references the MyBrush resource defined earlier. This is a common technique, but it is important to remember that resources are parsed and entered into a resource dictionary in the order that they are given. Resources are also requested by the order found within the dictionary if you use the StaticResource Markup Extension to reference them from within another resource. Make sure that any resource that you reference is defined earlier within the resources collection than where that resource is then requested. If necessary, you can work around the strict creation order of resource refererences by using a DynamicResource Markup Extension to reference the resource at runtime instead, but you should be aware that this DynamicResource technique has performance consequences. For details, see Resources Overview.

<Page Name="root"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <SolidColorBrush x:Key="MyBrush" Color="Gold"/>
        <Style TargetType="Border" x:Key="PageBackground">
       <Setter Property="Background" Value="Blue"/>
        </Style>
        <Style TargetType="TextBlock" x:Key="TitleText">
       <Setter Property="Background" Value="Blue"/>
       <Setter Property="DockPanel.Dock" Value="Top"/>
       <Setter Property="FontSize" Value="18"/>
       <Setter Property="Foreground" Value="#4E87D4"/>
       <Setter Property="FontFamily" Value="Trebuchet MS"/>
       <Setter Property="Margin" Value="0,40,10,10"/>
        </Style>
        <Style TargetType="TextBlock" x:Key="Label">
       <Setter Property="DockPanel.Dock" Value="Right"/>
       <Setter Property="FontSize" Value="8"/>
       <Setter Property="Foreground" Value="{StaticResource MyBrush}"/>
       <Setter Property="FontFamily" Value="Arial"/>
       <Setter Property="FontWeight" Value="Bold"/>
       <Setter Property="Margin" Value="0,3,10,0"/>
        </Style>
  </Page.Resources>
  <StackPanel>
    <Border Style="{StaticResource PageBackground}">
      <DockPanel>
        <TextBlock Style="{StaticResource TitleText}">Title</TextBlock>
        <TextBlock Style="{StaticResource Label}">Label</TextBlock>
        <TextBlock DockPanel.Dock="Top" HorizontalAlignment="Left" FontSize="36" Foreground="{StaticResource MyBrush}" Text="Text" Margin="20" />
        <Button DockPanel.Dock="Top" HorizontalAlignment="Left" Height="30" Background="{StaticResource MyBrush}" Margin="40">Button</Button>
        <Ellipse DockPanel.Dock="Top" HorizontalAlignment="Left" Width="100" Height="100" Fill="{StaticResource MyBrush}" Margin="40" />
      </DockPanel>
      </Border>
  </StackPanel>
</Page>

For the complete sample, see Defining a Resource Sample.

See Also

Concepts

Resources Overview
Styling and Templating

Other Resources

Defining a Resource Sample