Tutorial – Creating a StaticResource and Binding to it

The XAML allows you to provide what are called StaticResources. Such resources can be given to a Window or to certain controls.

For this tutorial, I assume you are in Visual Studio 2008. I assume that you already know how to create a new Project and choose WPF Application. All examples assume you have a new WPF Application.

So lets get started with three examples of binding to StaticResources.

Example 1 – Making a String a StaticResource and Binding to it

This example will demonstrate instantiating a String as a StaticResource and binding a TextBox to it.

Step 1 – Add the elements

  1. Add three TextBox elements into the default Grid control.
            <ListBox Margin="12,12,0,0" Name="listBox1" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" />
            <ListBox Margin="138,12,20,0" Name="listBox2" Height="100" VerticalAlignment="Top" />
            <TextBox Margin="12,118,0,121" Name="textBox1" Width="120" IsReadOnly="True" HorizontalAlignment="Left" />
            <TextBox Margin="138,118,20,121" Name="textBox2" Width="120" IsReadOnly="True" HorizontalAlignment="Left" />
    
    

Step 2 – Add the static resources

  1. Add an xmlns reference to the System namespace. This is done by adding the xmlns:System line to as an attribute to the top Window element as shown:
    <Window x:Class="StaticResourceBinding.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        Title="Window1" Height="300" Width="300">
    
  2. Create a Windows.Resources section in the XAML and add three Strings to it as StaticResources.
        <Window.Resources>
            <System:String x:Key="FirstName">Jared</System:String>
            <System:String x:Key="LastName">Barneck</System:String>
            <System:String x:Key="Alias">Rhyous</System:String>
        </Window.Resources>
    

Step 3 – Adding Binding to each TextBox element’s Text property

  1. Configure the three TextBox elements to bind to each String added as a StaticResource by adding a Text attribute.
            <TextBox Text="{StaticResource FirstName}" Height="23" Margin="51,25,107,0" Name="textBox1" VerticalAlignment="Top" />
            <TextBox Text="{StaticResource LastName}" Height="23" Margin="51,54,107,0" Name="textBox2" VerticalAlignment="Top" />
            <TextBox Text="{StaticResource Alias}" Height="23" Margin="51,83,107,0" Name="textBox3" VerticalAlignment="Top" />
    

The final XAML looks as follows. No changes were made to the code behind at all.

<Window x:Class="StaticResourceBinding.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <System:String x:Key="FirstName">Jared</System:String>
        <System:String x:Key="LastName">Barneck</System:String>
        <System:String x:Key="Alias">Rhyous</System:String>
    </Window.Resources>
    <Grid>
        <TextBox Height="23" Margin="51,25,107,0" Name="textBox1" VerticalAlignment="Top" Text="{StaticResource FirstName}"/>
        <TextBox Height="23" Margin="51,54,107,0" Name="textBox2" VerticalAlignment="Top" Text="{StaticResource LastName}"/>
        <TextBox Height="23" Margin="51,83,107,0" Name="textBox3" VerticalAlignment="Top" Text="{StaticResource Alias}"/>
    </Grid>
</Window>

Example 2 – Declaring an array as a StaticResource and Binding a ListBox to it

This example will demonstrate instantiating arrays as StaticResources and binding a ListBox to the arrays.

To show an example of building onto existing or previous learned knowledge, we are going to also implement binding each TextBox's Text properties to the ListBox's SelectedItem property.

Step 1 – Add the elements

  1. Add two ListBox and two TextBox elements into the default Grid control.
            <ListBox Margin="12,12,0,0" Name="listBox1" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" />
            <ListBox Margin="138,12,20,0" Name="listBox2" Height="100" VerticalAlignment="Top" />
            <TextBox Margin="12,118,0,121" Name="textBox1" Width="120" IsReadOnly="True" HorizontalAlignment="Left" />
            <TextBox Margin="138,118,20,121" Name="textBox2" Width="120" IsReadOnly="True" HorizontalAlignment="Left" />
    

Step 2 – Add the static resources

  1. Add an xmlns reference to the System namespace. This is done by adding the xmlns:System line to as an attribute to the top Window element as shown:
    <Window x:Class="StaticResourceBinding.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        Title="Window1" Height="300" Width="300">
    
  2. Create a Windows.Resources section in the XAML and add two arrays as StaticResources: one an array of strings, and one an array of integers.
        <Window.Resources>
            <x:Array x:Key="StringList" Type="System:String">
                <System:String>Line 1</System:String>
                <System:String>Line 2</System:String>
                <System:String>Line 3</System:String>
                <System:String>Line 4</System:String>
            </x:Array>
            <x:Array x:Key="IntArray" Type="System:Int32">
                <System:Int32>100</System:Int32>
                <System:Int32>200</System:Int32>
                <System:Int32>300</System:Int32>
                <System:Int32>400</System:Int32>
            </x:Array>
        </Window.Resources>
    

Step 3 – Adding Binding

  1. Configure one ListBox's Text property to bind to the String array and the other ListBox's Text property to bind to the Int32 array.
            <ListBox ItemsSource="{StaticResource StringList}" Margin="12,12,0,0" Name="listBox1" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" />
            <ListBox ItemsSource="{StaticResource IntArray}" Margin="138,12,20,0" Name="listBox2" Height="100" VerticalAlignment="Top" />
    
  2. We will also add binding to show you how you can combine binding to StaticResources and binding to another element’s property.Bind one TextBox to the listBox1.SelectedItem property and bind the other to the listBox2.SelectedItem.
            <TextBox Text="{Binding ElementName=listBox1, Path=SelectedItem}" Margin="12,118,0,121" Name="textBox1" Width="120" IsReadOnly="True" HorizontalAlignment="Left" />
            <TextBox Text="{Binding ElementName=listBox2, Path=SelectedItem}" Margin="138,118,20,121" Name="textBox2" Width="120" IsReadOnly="True" HorizontalAlignment="Left" />
    
  3. Build your application and run it. Notice as you select an item in the list, it displays.

The final XAML looks as follows. No changes were made to the code behind at all.

<Window x:Class="StaticResourceBinding2.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <x:Array x:Key="StringList" Type="System:String">
            <System:String>Line 1</System:String>
            <System:String>Line 2</System:String>
            <System:String>Line 3</System:String>
            <System:String>Line 4</System:String>
        </x:Array>
        <x:Array x:Key="IntArray" Type="System:Int32">
            <System:Int32>100</System:Int32>
            <System:Int32>200</System:Int32>
            <System:Int32>300</System:Int32>
            <System:Int32>400</System:Int32>
        </x:Array>
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="{StaticResource StringList}" Margin="12,12,0,0" Name="listBox1" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" />
        <ListBox ItemsSource="{StaticResource IntArray}" Margin="138,12,20,0" Name="listBox2" Height="100" VerticalAlignment="Top" />
        <TextBox Text="{Binding ElementName=listBox1, Path=SelectedItem}" Margin="12,118,0,121" Name="textBox1" Width="120" IsReadOnly="True" HorizontalAlignment="Left" />
        <TextBox Text="{Binding ElementName=listBox2, Path=SelectedItem}" Margin="138,118,20,121" Name="textBox2" Width="120" IsReadOnly="True" HorizontalAlignment="Left" />
    </Grid>
</Window>

Example 3 – Adding Resources to a Control

In the previous two examples, we added the resources to the main Window object. However, a resource can be added to a control.

This example will demonstrate instantiating an array as a StaticResources for a control. We will then bind a TabControl’s ItemSource property to this array. This will cause a Tab to be created for each item in the array.

Step 1 – Add the elements

  1. Add a TabControl into the default Grid control.
            <TabControl Name="tabControl1">
    

Step 2 – Add the static resources

  1. Add an xmlns reference to the System namespace. This is done by adding the xmlns:System line to as an attribute to the top Window element as shown:
    <Window x:Class="StaticResourceBinding.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        Title="Window1" Height="300" Width="300">
    
  2. Create a Grid.Resources section in the XAML and add an array as a StaticResource under the Grid control.
            <Grid.Resources>
                <x:Array x:Key="TabList" Type="System:String">
                    <System:String>Tab 1</System:String>
                    <System:String>Tab 2</System:String>
                    <System:String>Tab 3</System:String>
                </x:Array>
            </Grid.Resources>
    

Step 3 – Adding Binding to the TabControl’s ItemSource Property

  1. Bind the TabControl's ItemSource property to bind to the String array.
            <TabControl Name="tabControl1" ItemsSource="{StaticResource TabList}">
    

The final XAML looks as follows. No changes were made to the code behind at all.

<Window x:Class="StaticResourceBinding3.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.Resources>
            <x:Array x:Key="TabList" Type="System:String">
                <System:String>Tab 1</System:String>
                <System:String>Tab 2</System:String>
                <System:String>Tab 3</System:String>
            </x:Array>
        </Grid.Resources>
        <TabControl Name="tabControl1" ItemsSource="{StaticResource TabList}">
        </TabControl>
    </Grid>
</Window>

Hey, there is nothing wrong with more examples, so if you have an example of your own feel free to add it as a comment.


Copyright ® Rhyous.com – Linking to this post is allowed without permission and as many as ten lines of this page can be used along with this link. Any other use of this page is allowed only by permission of Rhyous.com.

4 Comments

  1. bovine says:

    Step 1 of Example 1 seems to be erroneously copied from Step 1 of Example 2.

  2. Liza says:

    Very nice article

  3. vivek says:

    very informative thanks a ton

Leave a Reply

Powered by sweet Captcha