Windows XAML Tips - ResourceDictionary with CodeBehind

By Fons Sonnemans, 17-apr-2015

I have created XAML solutions (WPF, Silverlight, Windows Phone, Windows 8) for about 7 years now. This week I learned a new feature which I thought wasn't possible. I learned how you can place DataTemplates with eventhandlers into ResouceDictionaries. I thought this wasn't possible because ResourceDictionaries don't have CodeBehind files to write the eventhandlers in. But I was wrong. You can add a CodeBehind to a ResourceDictionary but you will have to do it manually. This makes it possible to move more DataTemplates and ControlTemplates from Pages and UserControls to ResourceDictionaries which can help to avoid duplicate XAML code.

Demo App

My demo app is a Windows app developed using the MVVM design pattern. It contains a MainPage (view), a MainViewModel (viewmodel) class and a Product (model) class. The MainViewModel has a Products property which is a list of 3 hard coded products. The MainPage has a ListView which ItemsSource is DataBound to the Products property of the MainViewModel. The ItemsTemplate of the ListView is set to the ProductsDataTemplate which is a static resource of the Page. This DataTemplate contains an Image control which has 2 events (PointerEntered and PointerExited). In this example I changed the Opacity of the image when you hover over it using your mouse. It is a silly implementation which could also have been implemented using Behaviors in Blend.

MainPage.xaml

<Page x:Class="ResourceDictionaryWithCodeBehindDemo.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:ResourceDictionaryWithCodeBehindDemo"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:vm="using:ResourceDictionaryWithCodeBehindDemo.ViewModels"
      mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="ProductDataTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ImageUrl}"
                       PointerEntered="Image_PointerEntered"
                       PointerExited="Image_PointerExited"
                       Opacity="0.3"
                       Width="100"
                       Height="100" />
                <StackPanel Margin="20,0">
                    <TextBlock Text="{Binding Name}" 
                               FontSize="30"/>
                    <TextBlock Text="{Binding Price}"
                               FontSize="20" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

    <Page.DataContext>
        <vm:MainViewModel />
    </Page.DataContext>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView Margin="50"
                  ItemsSource="{Binding Products}"
                  ItemTemplate="{StaticResource ProductDataTemplate}">
        </ListView>
    </Grid>
</Page>

The MainPage.xaml.cs file contains the MainPage class with the Image_PointerEntered and Image_PointerExited eventhandlers. They change the Opacity of the Image (sender).

public sealed partial class MainPage : Page {
    public MainPage() {
        this.InitializeComponent();
    }

    private void Image_PointerEntered(object sender, PointerRoutedEventArgs e) {
        var img = sender as Image;
        img.Opacity = 1.0;
    }

    private void Image_PointerExited(object sender, PointerRoutedEventArgs e) {
        var img = sender as Image;
        img.Opacity = 0.3;
    }
}

The MainViewModel.cs file contains the MainViewModel class which has the Products property. The Constructor adds 3 sample products to the List.

using System;
using ResourceDictionaryWithCodeBehindDemo.Models;
using System.Collections.Generic;

namespace ResourceDictionaryWithCodeBehindDemo.ViewModels {
    class MainViewModel {

        public List<Product> Products { get; set; }

        public MainViewModel() {
            this.Products = new List<Product>() {
                new Product { Name = "Computer", Price = 2000},
                new Product { Name = "Car", Price = 34000},
                new Product { Name = "Table", Price = 500},
            };
        }
    }
}

The Product.cs file contains the Product class with the Name, Price and ImageUrl properties.

using System;

namespace ResourceDictionaryWithCodeBehindDemo.Models {
    class Product {

        public string Name { get; set; }
        public double Price { get; set; }

        public string ImageUrl {
            get {
                return "http://lorempixel.com/150/150/technics/" + Name;
            }
        }
    }
}

Add ResourceDictionary

Now you can add a ResourceDictionary to the project. Created a folder Resources in the root of the Project in which you will add the ResourceDictionary file. Create this file in Blend and not in Visual Studio because Blend will add the MergedDictionary code to my App.xaml. I named my file MyDataTemplates.xaml.

Add new Item in Blend

MyDataTemplates.xaml will look like this.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ResourceDictionaryWithCodeBehindDemo">
    
</ResourceDictionary>

Blend will also add the ResourceDictionary to the MergedDictionary of your Application in the  App.xaml.

<Application
    x:Class="ResourceDictionaryWithCodeBehindDemo.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ResourceDictionaryWithCodeBehindDemo">
    
	<Application.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="Resources/MyDataTemplates.xaml"/>
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</Application.Resources>

</Application>

Add CodeBehind to ResourceDictionary

Now you can create the MyDataTemplates.xaml.cs file in the Resources folder of the project. I do this in Visual Studio and not in Blend. In Visual Studio I have installed an the File Nesting extion (created by Mads Kristensen). This extension will automatically nest the codefile in the xaml file. It is not necessary but I like a clean solution. The complete structure of my Solution looks likes this:

Solution Explorer

Now you must add an x:Class attribute to the ResourceDictionary element in the MyDataTemplates.xaml file. This attribute points to the ResourceDictionaryWithCodeBehindDemo.Resources.MyDataTemplate class. Next you can move the ProductDataTemplate from the MainPage to the ResourceDictionary.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ResourceDictionaryWithCodeBehindDemo.Resources.MyDataTemplates"
        xmlns:local="using:ResourceDictionaryWithCodeBehindDemo">

    <DataTemplate x:Key="ProductDataTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding ImageUrl}"
                   PointerEntered="Image_PointerEntered"
                   PointerExited="Image_PointerExited"
                   Opacity="0.3"
                   Width="100"
                   Height="100" />
            <StackPanel Margin="20,0">
                <TextBlock Text="{Binding Name}"
                           FontSize="30" />
                <TextBlock Text="{Binding Price}"
                           FontSize="20" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>

</ResourceDictionary>

The MyDataTemplate class must be a partial class. You must also add a constructor (use the ctor snippet) to the class and call InitializeComponent(). This InitializeComponent method will be automatically generated if you set the x:Class attribute in the XAML. Finally you can move the eventhandlers from the MainPage to the MyDataTemplates class.

using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace ResourceDictionaryWithCodeBehindDemo.Resources {
    partial class MyDataTemplates {

        public MyDataTemplates() {
            this.InitializeComponent();
        }

        private void Image_PointerEntered(object sender, PointerRoutedEventArgs e) {
            var img = sender as Image;
            img.Opacity = 1.0;
        }

        private void Image_PointerExited(object sender, PointerRoutedEventArgs e) {
            var img = sender as Image;
            img.Opacity = 0.3;
        }
    }
}

The App.xaml must also be changed. You will have to register an extra xml namespace named res which holds the 'using:ResourceDictionaryWithCodeBehindDemo.Resources' value. In the MergedDictionaries element you must remove the MyDataTemplates ResourceDictionary and add an <res:MyDataTemplates /> element. This will instantiate an instance of the CodeBehind class. The constructor of the class will load the XAML in the InitializeComponent() method.

<Application
    x:Class="ResourceDictionaryWithCodeBehindDemo.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    
    xmlns:res="using:ResourceDictionaryWithCodeBehindDemo.Resources"
    
    xmlns:local="using:ResourceDictionaryWithCodeBehindDemo">
    
	<Application.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<!--<ResourceDictionary Source="Resources/MyDataTemplates.xaml"/>-->
                <res:MyDataTemplates />
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</Application.Resources>

</Application>

The MainPage.xaml now doesn't have the ProductsDataTemplate.

<Page x:Class="ResourceDictionaryWithCodeBehindDemo.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:ResourceDictionaryWithCodeBehindDemo"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:vm="using:ResourceDictionaryWithCodeBehindDemo.ViewModels"
      mc:Ignorable="d">

    <Page.DataContext>
        <vm:MainViewModel />
    </Page.DataContext>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView Margin="50"
                  ItemsSource="{Binding Products}"
                  ItemTemplate="{StaticResource ProductDataTemplate}">
        </ListView>
    </Grid>
</Page>

MainPage.xaml.cs now only contains the constructor.

public sealed partial class MainPage : Page {

    public MainPage() {
        this.InitializeComponent();
    }
}

Closure and download

I hope you like my solution it will open up a lot of extra possibilities to structure your XAML projects. You can download the sample project below.

Cheers,

Fons

Tags: XAML, Blend, Apps, CSharp

Leave a Comment

Leave a Comment
Name
Comment
2 + 6 =

6 Comments

  • Brian WRIGHT
    8 sep 2019 06:31
    Dear Madam, Dear Sir We are pleased to inform you that you can make great sale commissions (up to €20000 per a car) if you will find buyers for our luxury & classic European cars. We sell luxury & classic Rolls-Royce, Ferrari, McLaren, BMW, Porsche, Jaguar and Triumph cars. We are adding luxury & classic European cars to our inventory every day. Please check the entire inventory of our luxury European cars at https://wexxluxurycars.com as well as the complete information regarding our offer for making great sale commissions for providing buyers for our luxury and classic European cars at https://wexxluxurycars.com/15-make-money-with-us. Buyers will need to pick up cars of their choice in our showroom. We don’t require and accept any upfront payments. You can contact us exclusively via our Contact Us form at https://wexxluxurycars.com/contact-us. We will be pleased to hear from you. Have a great day. Best regards Brian WRIGHT, WEXX Luxury Cars, Denver, CO. https://wexxluxurycars.com. IMPORTANT NOTICE: This message has been posted via a Contact Us form on your site. Contact forms are publicly accessible and they can be used for posting messages by anyone. We don't use, hold or archive your e-mail addresses.
  • Winston
    26 jun 2019 01:15
    I just wondered if you've planned any effective marketing yet for your site this year. I'm self-employed achieving this for various businesses for numerous years now, I feed my family doing this so I won't complain. I have a way of getting immediate interested traffic and buyers to your site through social media marketing channels and email. In addition to getting more likes, followers for your entire lot of social media accounts. I have a new program that's just been completed that listens to all or any social mentions being made, in case a certain word or phrase is detected, we instantly send back to them a message that they ought to visit your site. We are able to use as much search terms as we would like, hundreds of targeted visits a day. I can even assist you in making/updating your site, fix site errors add updates etc. If you may want it. As well as that, I'd also like to learn what your competitors have done that we havn't done yet and address those issues asap. I'd also like to produce a video or 2 about your website and encourage them to rank high pretty quickly. Lastly I've a big database of opt in customers which are interested in what it is you do, so if you'd prefer to expand your current newsletter list let me know, I can enable you to get these records whenever you'd like them. They'd get you instant leads by supplying you with a list of people or businesses that are searching for exactly what it is you're offering. I personally use tools a good number of businesses don't learn about or don't have time to use for themselves and I wish to utilize them for your site. If your're to busy with current clients I get it, I was just wondering was all. I'd like to know if you'd like more information or references, I do have more than I know what to do with. Winston 1.319.423.9473
  • Kassandra Wicken
    9 mei 2019 12:30
    Hello, I'm looking for websites like yours to try out our new software that is designed to help you see exactly where your site is placed in the Google search engine listings against your competitors. You can then use the data to understand how to improve your rankings and we offer free advice too. There is a 14 day free trial and if you can let me know what you think, that would be a great help - https://www.track-r.net
  • Carmella Whyte
    23 apr 2019 10:48
    Desire more visitors? Nothing can help: https://bit.ly/nothingcan reflectionit.nl
  • Aly Chiman
    4 jan 2019 01:57
    Hello there, My name is Aly and I would like to know if you would have any interest to have your website here at reflectionit.nl promoted as a resource on our blog alychidesign.com ? We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well . If you may be interested please in being included as a resource on our blog, please let me know. Thanks, Aly
  • Leola Wasson
    12 okt 2018 12:57
    Hi Your website looks really nice, I have a question about a product in your store, I saw something on your site last month that I wanted to buy, But I just did not have enough money to buy it, but now I have enough money and I wanted to order it now. But I could not find the product anymore on your website, it looks a bit like this on this blog http://bit.ly/computerproducts2018 but I wanted to buy it at your site, I hope you quickly re-instock the product. mail me if I can buy it, I'll wait, have a nice day. Greets

All postings/content on this blog are provided "AS IS" with no warranties, and confer no rights. All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors. The content on this site is licensed under a Creative Commons Attribution By license.