How to set the background image to the dynamically created button control? - silverlight

Question

I am developing window phone 7 application. I am new to the window phone 7 application. I have Listbox in my application & I am dynamically creating the button control and adding them to the listbox control. Now I want to set the background image for each dynamically created button control. I am using the following code to dynamically set the background color of button control
Button AlphabetButton = new Button();
AlphabetButton.Background = new SolidColorBrush(Colors.Red);
In this way instead of background color I want to set the background image for my dynamically created button control. How to do this ? Can you please provide me any code or link through which I can resolve the above issue. If I am doing anything wrong then please guide me.

Answer 1

Try this:
ImageBrush brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri(#"Images/myImage.png", UriKind.Relative));
AlphabetButton.Background = brush;
Another option is to use the Button Content like for example:
Uri uri = new Uri("/images/someImage.png", UriKind.Relative);
BitmapImage imgSource = new BitmapImage(uri);
Image image = new Image();
image.Source = imgSource;
AlphabetButton.Content = image;
Be careful with the image Build Action.

Answer 2

A much better approach would be to use databinding ... say for example you have a list of Person objects that you want to display in your listbox, in codebehind set the list as the ItemsSource:
public class Person()
{
public string Name {get; set;}
}
var persons = new List<Person>();
// ... add some person objects here ...
listBox.ItemsSource = persons
In you XAML you can then supply a DataTemplate that renders each person as a Button:
<ListBox x:Name="listBox">
<Listox.ItemTemplate>
<DataTemplate>
<Button Content={Binding Path=Name}/>
</DataTemplate>
</Listox.ItemTemplate>
</ListBox>
This will render a list of Buttons which display the name of each person.
To specify an image for each button extend the content of your button to include an image:
<ListBox x:Name="listBox">
<Listox.ItemTemplate>
<DataTemplate>
<Button>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Name}"/>
<ImageText Source="{Binding Path=Image}"/>
</StackPanel>
</Button>
</DataTemplate>
</Listox.ItemTemplate>
</ListBox>
You will of course have to add an ImageSource property to your Person object:
public class Person()
{
public string Name {get; set;}
public ImageSource Image {get; set;}
}
Another alternative is to use a value converter to convert some property of your Person into an image:
Dynamic image source binding in silverlight
If you do not want to use binding (which I personally think is the best approach) you could create a Button subclass that has an ImageSource property as per the following:
Creating an image+text button with a control template?