WPF Image Source binding sometimes working sometimes not

Question

I ran into a bit of a problem when trying to bind Image Source. I'm creating a board game where you can select a player to view its attributes (including his image). Also the fields on the board have images as background.

The template i created for the fields:

<ControlTemplate x:Key="fieldButtonTemplate" x:Name="fieldButtonTemplateName" TargetType="{x:Type Button}">
    <Grid x:Name="fieldGrid" Visibility="Visible">
        <Grid.LayoutTransform>
            <RotateTransform Angle="{Binding ImageRotate}" />
        </Grid.LayoutTransform>
        <Grid.Background>
            <ImageBrush ImageSource="{Binding Path=ImageSource}"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            ....
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          ...
        </Grid.ColumnDefinitions>
    </Grid>
</ControlTemplate>

And the one for viewing player attributes:

<Image Source="{Binding Path=CurrentlySelected.ImageSource}" Grid.Column="0" Grid.Row="0"
                   Grid.ColumnSpan="2"  Stretch="Fill" />
<StackPanel x:Name="CurrentPlayerStackPanel"  Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
      <TextBlock Text="{Binding Path=CurrentlySelected.Name}" TextWrapping="Wrap"
                           FontFamily="Magneto" FontSize="20" Foreground="BlanchedAlmond"/>
      <TextBlock Text="{Binding Path=CurrentlySelected.Character}" TextWrapping="Wrap"
                           FontFamily="Magneto" FontSize="20" Foreground="BlanchedAlmond"/>
      <TextBlock Text="{Binding Path=CurrentlySelected.Money}" TextWrapping="Wrap"
                           FontFamily="Magneto" FontSize="20" Foreground="BlanchedAlmond"/>
</StackPanel>

The problem is that the image only shows upon selecting player and does not show as background to the grid. I created an interface for both players and fields:

interface IVisualObject
{
    int ImageRotate { get; set; }
    string ImageSource { get; set; }
}

The images are resources, build action set to content and copy to output directory is set to copy if newer. The string i'm trying to pass as image source is like

"pack://siteoforigin:,,,/Resources/picture.jpg"

btw ImageRotate is binded just fine. Thanks in advance!

EDIT: if i set it like

<Grid.Background>
     <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/picture.jpg"/>
</Grid.Background>

it works.

(side note) are you sure you don't want //application: and carry the images in the same dir as your exe? still thinking about your original question...you have targettype button...where is the button? — Kory Gill, Mar 05 '16 at 17:29
why would that be better? this template is in an another xaml file than the button itself, i didn't think it was essential for the question since if i replace the imagesource with an external source (like c:\something\testField.jpg), it works perfectly. — Norbert Kovacs, Mar 05 '16 at 17:48

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

I can see you trying bind ImageBrush.ImageSource to resource.

I've found on stackoverflow answer for Cannot set ImageSource using pack URI and I think it is your case.

Pay attention on next in answer:

...Please note that if you add images to Resource.resx, Visual Studio generates a Resources class with static properties for each image. These properties are of type System.Drawing.Bitmap, which is WinForms, not WPF

Updated: Also you can use converter for more exactly retrieving resources.

public class StringToImageSource: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            string resourceName = value.ToString();

            var img = new BitmapImage();
            img.UriSource = new Uri("Resources/" + resourceName);

            return img;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
}

edited May 23 '17 at 11:50

Community

1
1

answered Mar 05 '16 at 17:55

Anton

718
6
11

unfortunately that wasn't it. also i went through the links in that question, neither of them solved my problem – Norbert Kovacs Mar 05 '16 at 18:07
Possible you can try use your URI in xaml directly And after make some conclusion for reason. – Anton Mar 05 '16 at 18:12
the problem with that is i would like to set a different picture for every field – Norbert Kovacs Mar 05 '16 at 18:13
Sure. But possible you will understood a reason. In common case I would like use convertors for such bindings. Thats make sense because format of URI can be changed. As I know for WPF and Universal application URI format is different. – Anton Mar 05 '16 at 18:17

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

Make your property an ImageSource and not string, or use a converter like mentioned in this answer: Binding image source through property in wpf. When you hard code the string, the xaml compiler is doing this for you which is why that works.

edited May 23 '17 at 11:45

Community

1
1

answered Mar 05 '16 at 18:22

Kory Gill

6,993
1
25
33

Thanks! While doing so i found that i have made a noob mistake, so i'm accepting your answer. – Norbert Kovacs Mar 05 '16 at 18:36

WPF Image Source binding sometimes working sometimes not

2 Answers2