Dynamic Scoped Resources in WPF/XAML?

Question

I have 2 Xaml files, one containing a DataTemplate which has a resource definition for an Image brush, and the other containing a content control which presents this DataTemplate. The data template is bound to a view model class. Everything seems to work EXCEPT the ImageBrush resource, which just shows up white... Any ideas?

File 1: DataTemplate for ViewModel

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:SEL.MfgTestDev.ESS.ViewModel" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d">

    <DataTemplate DataType="{x:Type vm:PresenterViewModel}">
     <DataTemplate.Resources>
      <ImageBrush x:Key="PresenterTitleBarFillBrush" 
      TileMode="Tile" 
      Viewbox="{Binding Path=FillBrushDimensions, Mode=Default}" 
      ViewboxUnits="Absolute" 
      Viewport="{Binding Path=FillBrushPatternSize, Mode=Default}" 
      ViewportUnits="Absolute" 
      ImageSource="{Binding Path=FillImage, Mode=Default}"/>
     </DataTemplate.Resources>
     <Grid d:DesignWidth="1440" d:DesignHeight="900">
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="192"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
       <RowDefinition Height="120"/>
       <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <DockPanel HorizontalAlignment="Stretch" Width="Auto" LastChildFill="True" Background="{x:Null}" Grid.ColumnSpan="2">
       <Image Source="{Binding Path=ImageSource, Mode=Default}"/>
       <Rectangle Fill="{DynamicResource PresenterTitleBarFillBrush}"/>
      </DockPanel>
     </Grid>
    </DataTemplate>

</ResourceDictionary>

File 2: Main Window Class which instanciates the DataTemplate Via it's view model.

<Window x:Class="SEL.MfgTestDev.ESS.ESSMainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:SEL.MfgTestDev.ESS.ViewModel"
    Title="ESS Control Window" 
    Height="900" 
    Width="1440"
    WindowState="Maximized"
    WindowStyle="None"
    ResizeMode="NoResize"
    DataContext="{Binding}">

    <Window.Resources>
        <ResourceDictionary Source="PresenterViewModel.xaml" />
    </Window.Resources>

    <ContentControl>
        <ContentControl.Content>
            <vm:PresenterViewModel ImageSource="XAMLResources\SEL25YearsTitleBar.bmp" FillImage="XAMLResources\SEL25YearsFillPattern.bmp" FillBrushDimensions="0,0,5,110" FillBrushPatternSize="0,0,5,120"/>
        </ContentControl.Content>
    </ContentControl>

</Window>

And for the sake of completeness! The CodeBehind for the View Model

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace SEL.MfgTestDev.ESS.ViewModel
{
    public class PresenterViewModel : ViewModelBase
    {
     public PresenterViewModel()
     {

     }

        //DataBindings
        private ImageSource _imageSource;

        public ImageSource ImageSource
        {
            get 
            {
                return _imageSource; 
            }
            set 
            {
                if (_imageSource != value)
                {

                    _imageSource = value;
                    OnPropertyChanged("ImageSource");
                }
            }
        }

        private Rect _fillBrushPatternSize;

        public Rect FillBrushPatternSize
        {
            get
            {
                return _fillBrushPatternSize;
            }
            set
            {
                if (_fillBrushPatternSize != value)
                {
                    _fillBrushPatternSize = value;
                    OnPropertyChanged("FillBrushPatternSize");
                }
            }
        }

        private Rect _fillBrushDimensions;

        public Rect FillBrushDimensions
        {
            get
            {
                return _fillBrushDimensions;
            }
            set
            {
                if (_fillBrushDimensions != value)
                {
                    _fillBrushDimensions = value;
                    OnPropertyChanged("FillBrushDimensions");
                }
            }
        }

        private ImageSource _fillImage;

        public ImageSource FillImage
        {
            get
            {
                return _fillImage;
            }
            set
            {
                if (_fillImage != value)
                {
                    _fillImage = value;
                    OnPropertyChanged("FillImage");
                }
            }
        }


    }
}

Answer 1

This is some kind of namescoping issue. If you move your resource to the level of the Grid rather than the DataTemplate itself, it will work:

<DataTemplate DataType="{x:Type vm:PresenterViewModel}">
    <Grid>
     <Grid.Resources>
      <ImageBrush x:Key="PresenterTitleBarFillBrush"
       TileMode="Tile"
       Viewbox="{Binding Path=FillBrushDimensions, Mode=Default}"
       ViewboxUnits="Absolute"
       Viewport="{Binding Path=FillBrushPatternSize, Mode=Default}"
       ViewportUnits="Absolute"
       ImageSource="{Binding Path=FillImage, Mode=Default}"/>
     </Grid.Resources>
     <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="192"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
      <RowDefinition Height="120"/>
      <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <DockPanel HorizontalAlignment="Stretch" Width="Auto" LastChildFill="True" Background="{x:Null}" Grid.ColumnSpan="2">
      <Image Source="{Binding Path=ImageSource, Mode=Default}"/>
      <Rectangle Fill="{DynamicResource PresenterTitleBarFillBrush}"/>
     </DockPanel>
    </Grid>
</DataTemplate>

I think what's happening is that the resources of the DataTemplate are in a separate namescope to the contents of the DataTemplate.

HTH, Kent