Binding image path to Button Background in Windows Phone 7

Question

I am trying to bind the image to button from ViewModel. But i can not bind to button. But if i bind this same value to imagebox mean it showing the image.

 <ListBox Tap="listBox1_Tap" Height="444" ItemsSource="{Binding StudentDetails,Mode=TwoWay}" HorizontalAlignment="Left" Margin="2,34,0,0" Name="listBox1" VerticalAlignment="Top" Width="476" BorderBrush="#00410D0D">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                            <StackPanel Orientation="Horizontal"> 

                                <Image Height="50" Source="{Binding addImage}" HorizontalAlignment="Left"  Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="50" />

                                <Button Height="80" Width="80" DataContext="{Binding DataContext, ElementName=listBox1}" Command="{Binding addPerson}">
                                    <Button.Background>
                                        <ImageBrush ImageSource="{Binding addImage}" Stretch="Fill" />
                                    </Button.Background>
                                </Button>

                            </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Answer 1

I assume that you have set image's build action to Resource, which is default value. And your string value must be like that:

string addImage =  "/Application;component/Images/image_name.png";

I all the above is OK, then the problem must be in your Button. You have set it's DataContext to ListBox1 DataContext. Why? There is no need.

Change

<Button Height="80" Width="80" DataContext="{Binding DataContext, ElementName=listBox1}" Command="{Binding addPerson}">
    <Button.Background>
        <ImageBrush ImageSource="{Binding addImage}" Stretch="Fill" />
    </Button.Background>
</Button>

to

<Button Height="80" Width="80" Command="{Binding addPerson}">
    <Button.Background>
        <ImageBrush ImageSource="{Binding addImage}" Stretch="Fill" />
    </Button.Background>
</Button>

Answer 2

You should use a converter to bind the image.

Here is a sample I worked on. Its works fine for me. The interface definition:

<DataTemplate x:Name="lstbxCreateEventTypesTiles">
    <Button x:Name="btn1" Content="{Binding Name}" CommandParameter="{Binding ID}" Click="Button_Click" 
    Style="{StaticResource ButtonStyle}" HorizontalContentAlignment="Left" BorderThickness="0" FontSize="42.67" FontFamily="Segoe WP SemiLight" Foreground="White" BorderBrush="{x:Null}">
        <Button.Background>
            <ImageBrush ImageSource="{Binding MasterTypeID, Converter={StaticResource ImageConverter}}" Stretch="None"/>
        </Button.Background>
    </Button>
</DataTemplate>

The class source:

public class ImageConverter : IValueConverter

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
        ImageSource img = null;
        try {
            if (value != null) {


                switch (value.ToString()) {
                    case "1":
                        value = "Assets/tile_bg.png";
                        break;
                    case "2":
                        value = "Assets/tile2_bg.png";
                        break;

                    default:
                        break;
                }

                BitmapImage image = new BitmapImage();
                image.SetSource(Application.GetResourceStream(new Uri(@value.ToString(), UriKind.Relative)).Stream);
                img = image;


            }
        } catch (Exception ex) {

        }
        return img;

    }

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