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.