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
- Add three
TextBoxelements into the defaultGridcontrol.<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
- Add an
xmlnsreference to theSystemnamespace. This is done by adding thexmlns:Systemline to as an attribute to the topWindowelement 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"> - Create a Windows.Resources section in the XAML and add three
Stringsto 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
- Configure the three
TextBoxelements 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
- Add two
ListBoxand twoTextBoxelements into the defaultGridcontrol.<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
- Add an
xmlnsreference to theSystemnamespace. This is done by adding thexmlns:Systemline to as an attribute to the topWindowelement 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"> - 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
- Configure one
ListBox's Textproperty to bind to theStringarray and the otherListBox's Textproperty to bind to theInt32array.<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" /> - We will also add binding to show you how you can combine binding to StaticResources and binding to another element’s property.Bind one
TextBoxto thelistBox1.SelectedItemproperty and bind the other to thelistBox2.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" /> - 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
- Add a
TabControlinto the defaultGridcontrol.<tabControl Name="tabControl1">
Step 2 – Add the static resources
- Add an
xmlnsreference to theSystemnamespace. This is done by adding thexmlns:Systemline to as an attribute to the topWindowelement 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"> - Create a
Grid.Resourcessection in the XAML and add an array as a StaticResource under theGridcontrol.<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
- Bind the
TabControl's ItemSourceproperty to bind to theStringarray.<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.

