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

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.

score 6 · Accepted Answer · edited Nov 03 '12 at 17:45

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.

score 0 · Answer 2 · edited May 23 '17 at 12:29

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?

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

2 Answers2