Over a million developers have joined DZone.

Don’t Use a WPF Control in Windows.Resource

·

Hi

 

Here is a problem that one of my colleagues who is just starting to use WPF got himself into. He was working on an application that displays items using an ItemsControl and uses a DataTemplate. Inside the DataTemplate he used an Image. Here is the Xaml code:

<Window.Resources>
<Image Source="Creek.jpg" x:Key="IMG"></Image>
</Window.Resources>
<Grid>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="Black"
CornerRadius="3" MinHeight="10">
<ContentControl Content="{StaticResource IMG}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>

This is a much simpler example, but the principal is the same.

 

Can you see what was he doing wrong?

 

In the code behind I will create a list and use it as the DataContext:

public Window1()
{
InitializeComponent();
List<int> data = new List<int> { 1, 2, 3, 4 };
this.DataContext = data;
}

You will expect to see a window with 4 Images, but this is what you get:

Bad Resource Usage

Only one image shows up and all the other templates are empty.

 

Can you see the problem now?

 

It took me some time to see it because the code was much more complex, but then I noticed that he used the Image class as a resource for the Image.

 

Image is a WPF Control and can only have one parent! This is why it only displayed at the last item of the list. This is similar to doing the following:

Image m = new Image();
Border b1 = new Border();
Border b2 = new Border();
b1.Child = m;
b2.Child = m;

What would happen here? The following:

Illegal child exception

I was actually surprised that my friend did not get an Exception, I will definitely have to check why no exception was thrown.

To correct the problem all you have to do is to use Bitmap Image which is a C# Class and not a WPF Control. You should use an Image in the template and use the BitmapImage as its source:

<Window.Resources>
<!--<Image Source="Creek.jpg" x:Key="IMG"></Image>-->
<BitmapImage UriSource="Creek.jpg" x:Key="BMP"></BitmapImage>
</Window.Resources>
<Grid>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="Black"
CornerRadius="3" MinHeight="10">
<!--<ContentControl Content="{StaticResource IMG}"/>-->
<Image Source="{StaticResource BMP}"></Image>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>

The result:

Good Resource Usage

 

Exactly what we wanted.

 

If any of you have an idea as to why we did not get an exception I will be happy to hear it.

 

Amit

 

Topics:

Published at DZone with permission of Amit Raz. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}