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
TextBox
elements into the defaultGrid
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
- Add an
xmlns
reference to theSystem
namespace. This is done by adding thexmlns:System
line to as an attribute to the topWindow
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">
- 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
- 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
- Add two
ListBox
and twoTextBox
elements into the defaultGrid
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
- Add an
xmlns
reference to theSystem
namespace. This is done by adding thexmlns:System
line to as an attribute to the topWindow
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">
- 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 Text
property to bind to theString
array and the otherListBox's Text
property to bind to theInt32
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" />
- 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 thelistBox1.SelectedItem
property 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
TabControl
into the defaultGrid
control.<tabControl Name="tabControl1">
Step 2 – Add the static resources
- Add an
xmlns
reference to theSystem
namespace. This is done by adding thexmlns:System
line to as an attribute to the topWindow
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">
- Create a
Grid.Resources
section in the XAML and add an array as a StaticResource under theGrid
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
- Bind the
TabControl's ItemSource
property to bind to theString
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.
Hi there,
You might want to check the code in example 1, step 1. You mention putting three text boxes but your code adds two ListBoxes and two TextBoxes
BTW your tutorials so far are quite helpful!
nice one