How can I use a ContentPresenter to display a BitmapImage in a custom control?

Question

I'm pretty new at this. I'm trying to make a custom control in WPF that will display an image and a piece of text below it. I download the image from url as a BitmapImage type. I have an on my UI to test that it's downloading correctly and it is. It downloads and displays in the , but in the custom control the Icon dependency property is just displaying the URL (which I assume is the ToString() of what it sees).

This is how it looks with the functioning box on the LEFT that I use just to confirm that the image is coming in correctly, and the malfunctioning GameIconControl on the right:

http://i.imgur.com/heLcUMc.png

Here is the Generic.xaml for the control

<Style TargetType="{x:Type assets:GameIconControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type assets:GameIconControl}">
                <Border Background="Transparent"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Orientation="Vertical">

                            <ContentPresenter Height="Auto"
                                              Margin="3"
                                              ContentSource="Icon"
                                              HorizontalAlignment="Center"/>
                            <ContentPresenter Height="Auto"
                                              Margin="3"
                                              ContentSource="GameName"
                                              HorizontalAlignment="Center"/>
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And here is the C# in the GameIconControl.cs

public class GameIconControl : Control
{
    static GameIconControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(GameIconControl), new FrameworkPropertyMetadata(typeof(GameIconControl)));
    }

    public GameIconControl(){}

    public GameIconControl(string name, BitmapImage icon)
    {
        Icon = icon;
        GameName = name;
    }

    public const string IconPropertyName = "Icon";
    public const string GameNamePropertyName = "GameName";

    public string GameName
    {
        get { return (string)GetValue(GameNameProperty); }
        set { SetValue(GameNameProperty, value); }
    }


    public static readonly DependencyProperty GameNameProperty =
        DependencyProperty.Register(GameNamePropertyName, typeof(string), typeof(GameIconControl), new UIPropertyMetadata(default(string)));



    public BitmapImage Icon
    {
        get { return (BitmapImage)GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }

    public static readonly DependencyProperty IconProperty =
        DependencyProperty.Register(IconPropertyName, typeof(BitmapImage), typeof(GameIconControl), new PropertyMetadata(default(BitmapImage)));



}

What am I missing?

Answer 1

I would recommend using an Image to present the Icon property, not a ContentPresenter. Bind the Icon property to the Image.Source and it should work.

Answer 2

You should just be able to use an ImageSource property to bind to an Image.Source property to display it:

public ImageSource Icon
{
    get { return (ImageSource)GetValue(IconProperty); }
    set { SetValue(IconProperty, value); }
}

public static readonly DependencyProperty IconProperty =
    DependencyProperty.Register(IconPropertyName, typeof(ImageSource), 
    typeof(GameIconControl), new PropertyMetadata(null));

...

Icon = new BitmapImage(new Uri("C:\\Image.jpg"));

...

<Image Source="{TemplateBinding Icon}" />

Although, if you just want to display images, you don't even need to use an ImageSource data type... you can just use the string paths:

Icon = "C:\\Image.jpg";

or

Icon = "/YourAppName;component/ImageFolderName/ImageName.jpg";

...

<Image Source="{TemplateBinding Icon}" />