Home > Article, WPF > WPF – Creating bindings in XAML by StaticResource

WPF – Creating bindings in XAML by StaticResource

Here is a memo of how to create bindings in XAML .

As an example, let’s  look at the following snippet.


<Grid x:Name="LayoutRoot" Background="Transparent" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="{StaticResource PageTitle}"  Foreground="#FFBE2B2B" />
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0">
<ListBox x:Name="lstFriend"
ItemsSource="{Binding Source={StaticResource FriendItemSource}}"
ItemTemplate="{StaticResource FriendItemTemplate}" />
</Grid>
</Grid>

I have defined three types resource in above code.

  • PageTitle : String
  • FriendItemSource : List of custom class
  • ItemTemplate : DataTemplate of each item.

Then , We will add StaticResource into our XAML

  • Add xmlns reference to the namespace.
<Window x:Class="MVVMSample1.Sample1"
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"
xmlns:local="clr-namespace:MVVMSample1.Model"
Title="WPF Samples" Height="380" Width="280">
  • Add the static resources.

<Window.Resources>
<System:String x:Key="PageTitle">WPF Simplified - Part1</System:String>

<ObjectDataProvider x:Key="FriendItemSource">
<ObjectDataProvider.ObjectInstance>
<x:Array Type="local:Friend">
<local:Friend Name="Shen" Description="This is a sample1" Image="http://goo.gl/I3lmQ" />
<local:Friend Name="Ricardo" Description="This is a sample2" Image="http://goo.gl/fAmHb" />
</x:Array>
</ObjectDataProvider.ObjectInstance>
</ObjectDataProvider>

<DataTemplate x:Key="FriendItemTemplate">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Image}" Height="64" Width="64" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="2"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" HorizontalAlignment="Left" Foreground="#FFF38585" Margin="2,0,0,2"/>
<TextBlock Text="{Binding Description}" Margin="5,5,0,15" TextWrapping="Wrap" Foreground="#FF2CE4A4"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Window.Resources>

NOTICE

I had to wrap “x:Array ” in an ObjectDataProvider to get it to work, and replace

{StaticResource FriendItemSource}” to “{Binding Source={StaticResource FriendItemSource}}

or not , you will get an error like bellow

“Cannot convert the value in attribute ‘ItemsSource’ to object of type ‘System.Collections.IEnumerable’. ‘System.Windows.Markup.ArrayExtension’ is not a valid value for property ‘ItemsSource’ …”

The final effect looks as following

Full of  XAML source.

<Window x:Class="MVVMSample1.Sample1"
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"
xmlns:local="clr-namespace:MVVMSample1.Model"
Title="WPF Samples" Height="380" Width="280">

<Window.Resources>
<System:String x:Key="PageTitle">WPF Simplified - Part1</System:String>

<ObjectDataProvider x:Key="FriendItemSource">
<ObjectDataProvider.ObjectInstance>
<x:Array Type="local:Friend">
<local:Friend Name="Shen" Description="This is a sample1" Image="http://goo.gl/I3lmQ" />
<local:Friend Name="Ricardo" Description="This is a sample2" Image="http://goo.gl/fAmHb" />
</x:Array>
</ObjectDataProvider.ObjectInstance>
</ObjectDataProvider>

<DataTemplate x:Key="FriendItemTemplate">
<StackPanel Orientation="Horizontal" Width="223" Margin="2,5,5,2"  Background="Black" >
<Image Source="{Binding Image}" Height="64" Width="64" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="2"/>
<StackPanel Orientation="Vertical" Width="auto">
<TextBlock Text="{Binding Name}" HorizontalAlignment="Left" Foreground="#FFF38585" Margin="2,0,0,2"/>
<TextBlock Text="{Binding Description}" Margin="5,5,0,15" TextWrapping="Wrap" Foreground="#FF2CE4A4"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Window.Resources>

<Grid x:Name="LayoutRoot" Background="Bisque" >

<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="{StaticResource PageTitle}"  Foreground="#FFBE2B2B" />
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0">
<ListBox x:Name="lstFriend"
ItemsSource="{Binding Source={StaticResource FriendItemSource}}"
ItemTemplate="{StaticResource FriendItemTemplate}" />
</Grid>
</Grid>
</Window>
Advertisements
Categories: Article, WPF
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: