Why do I have an Issue with binding to an image from a control template?

Question

Hi,

I have a style for an items control that binds to an image in the target, it only appears if the target also binds to the image and I have no idea why.. can anyone shed any light on it for me?

A simplified version of my style:

<Style x:Key="testStyle" TargetType="ItemsControl">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" LastChildFill="True">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="32"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="0" DockPanel.Dock="Top" MinHeight="25" SnapsToDevicePixels="True">
                                <StackPanel Orientation="Horizontal">
                                    <Image Margin="10,0,10,0" VerticalAlignment="Stretch" Height="24" Width="24"  Source="{Binding Path=HeaderImage}" />
                                    <TextBlock FontFamily="Tahoma" VerticalAlignment="Center" Text="{Binding Path=HeaderInfo}" />
                                </StackPanel>
                                <Line VerticalAlignment="Bottom" Stretch="Fill"/>
                            </Grid>
                            <ItemsPresenter Grid.Row="1"/>
                        </Grid>
                    </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

My User Control:

<UserControl x:Class="StartPageView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<ItemsControl Style="{DynamicResource testStyle}">
    <Grid HorizontalAlignment="Stretch" >
        <StackPanel>
        <GroupBox Header="Information"  Margin="0,0,0,10" >
            <Label Margin="10,10,10,110">some useful information, dynamically updated</Label>
        </GroupBox>
        <GroupBox Header="Available actions" Margin="0,10,0,10">
            <StackPanel>
                <Label Margin="10,10,10,10">action 1</Label>
                <Label Margin="10,10,10,10">action 2</Label>
                <Label Margin="10,10,10,10">action 3</Label>
                    <!--<Image Width="0" Height="0" Source="{Binding HeaderImage}"/>-->
                </StackPanel>
        </GroupBox>
        </StackPanel>
    </Grid>
</ItemsControl>

And my model code (set as the data context for my user control)

internal class StartPageViewPresentationModel : IStartPageViewPresentationModel
{
    public StartPageViewPresentationModel(IStartPageView view)
    {
        HeaderImage = new BitmapImage(new Uri(@"Images/home_16.png", UriKind.Relative)) { CacheOption = BitmapCacheOption.Default };

        HeaderInfo = "Start Page";

        View = view;
        View.Model = this;
    }

    public BitmapImage HeaderImage { get; set; }

    public string HeaderInfo { get; set; }

    public IStartPageView View { get; set; }
}

If I un-comment the tag in the user control then the image is displayed both in the control and the template area, if I comment it it doesn't appear in either. The text binding from the template works fine

I am perplexed..

thanks

Trevor

Answer 1

Couple of suggestions:

1. Have you tried an absolute URI for the image?
2. HeaderImage can be of type ImageSource rather than the more restrictive BitmapImage.

I suspect what's happening is the UserControl is working because the path is relative and correct based on the location of the UserControl. The image is therefore cached and works from the template.

However, when you comment that out the image is resolved from the location of the Style, which may not be correct?

HTH, Kent