CODEWITHSUNDEEP
c#wpfxamlbinding
Norbert Kovacs
Norbert Kovacs

Reputation: 149

WPF Image Source binding sometimes working sometimes not

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.

Upvotes: 2

Views: 2009

Answers (2)

Anton
Anton

Reputation: 748

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();
        }
}

Upvotes: 1

Kory Gill
Kory Gill

Reputation: 7163

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.

Upvotes: 1

Related Questions