Free Study Guide for Exam 70-511: Defining Static resources

For the 70-511 exam you will need an understanding of resources.  Resources is a way to reuse commonly defined objects and values, similar to the concept of CSS.  For instance, you might want to have the ability to quickly change pages to reflect the colors of the seasons, and this would allow programmatic changes, in this case that might be application scope.  If you define your resources on a root element like Window or Page classes. 

Internet information link: https://msdn.microsoft.com/en-us/library/ms750613(VS.100).aspx#staticdynamic

The “Key” to resources

XAML

• All resources have a unique key generated by the developer (you for instance) using the attribute x:Key in XAML
• The x:Key is normally a string, although it can be other object types when used with styles, data styles and component resources.

Code behind

To create code based resources:

• Create a new ResourceDictionary instance
• Add all of the resources to the dictionary by calling ResourceDictionary.Add method. 
• When the ResourceDictionary is populated, assign this instance to the Resources of the appropriate element

Static Resources versus Dynamic Resources

Static Resources

• Static Resources are bound at load time when the property values are assigned

• <Button Background=”{StaticResource blueBrush}”> Text </Button>

Dynamic Resources

• Dynamic Resources are unevaluated at load time and are evaluated during run time
• At the run time the expression is evaluated and provides a value
• <Button Background=”{DynamicResource blueBrush}”> Text </Button>

• Video is followed by cut and pastable code.  There is a sample code project attached to this file

XAML Code example of creating styles, you would paste this into the top part of the XAML page, see video for the process.

In case the video isn't working see the next post: https://blogs.msdn.com/b/devschool/archive/2010/12/29/video-for-the-previous-post-on-static-resources.aspx

 <Page.Resources>
        <SolidColorBrush x:Key="yellowBrush" 
                         Color="Yellow"/>
        <SolidColorBrush x:Key="blueBrush" 
                         Color="Blue"/>
        <Style x:Key="PageBackground" 
               TargetType="Border" >
            <Setter Property="Background" 
                    Value="Blue"/>
        </Style>
        <Style x:Key="TitleText" 
               TargetType="TextBlock" >
            <Setter Property="Background" 
                    Value="White"/>
            <Setter Property="DockPanel.Dock" 
                    Value="Top"/>
            <Setter Property="FontSize" 
                    Value="18"/>
            <Setter Property="Foreground" 
                    Value="Green"/>
            <Setter Property="FontFamily" 
                    Value="Trebuchet MS"/>
            <Setter Property="Margin" 
                    Value="0,40,10,10"/>
        </Style>
        <Style x:Key="Label" TargetType="TextBlock" >
            <Setter Property="DockPanel.Dock" 
                    Value="Right"/>
            <Setter Property="FontSize" 
                    Value="18"/>
            <Setter Property="Foreground" 
                    Value="{StaticResource yellowBrush}"/>
            <Setter Property="FontFamily" 
                    Value="Arial"/>
            <Setter Property="FontWeight" 
                    Value="Bold"/>
            <Setter Property="Margin" 
                    Value="0,3,10,0"/>
        </Style>
    </Page.Resources>

Here is the XAML Code that utilizes the styles, the second textblock overrides the style defined using the TargetType.

When you are reading code that can be confusing since you might not make the connection to the resources at the top of the page or maintained elsewhere in the code.  Once we cover the various models used for programming it will become clearer on where resources are stored.  For now the XAML Code is quite small and you can see the impact of the Static Resources on the “working” code.

 <StackPanel>
        <Border Style="{StaticResource PageBackground}">
            <DockPanel>
                <TextBlock Style="{StaticResource TitleText}"
                           Text=" Blah Blah">
                    Title
                </TextBlock>
                <TextBlock Style="{StaticResource Label}">
                    Label
                </TextBlock>
                <TextBlock DockPanel.Dock="Bottom" 
                           HorizontalAlignment="Center" 
                           FontSize="36" 
                           Foreground="{StaticResource yellowBrush}" 
                           Text="Text Test" 
                           Margin="10" />
                <Button DockPanel.Dock="Bottom"
                        HorizontalAlignment="Left" 
                        Height="30" 
                        Background="{StaticResource yellowBrush}" 
                        Margin="40">
                    Button
                </Button>
                <Ellipse DockPanel.Dock="Top" 
                         HorizontalAlignment="Left" 
                         Width="100" 
                         Height="100" 
                         Fill="{StaticResource yellowBrush}" 
                         Margin="100" />
            </DockPanel>
        </Border>
    </StackPanel>

ResourcesInWPF.zip