Silverlight ImageButton UserControl

I am just starting out with Silverlight (2 RC0) and can’t seem to get the following to work. I want to create a simple image button user control.

My xaml for the user control is as follows:

 <Button>
        <Button.Template>   
            <ControlTemplate>
                <Image Source="{TemplateBinding ImageSource}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
            </ControlTemplate>
        </Button.Template>
    </Button>

The code behind is as follows:

public partial class ImageButtonUserControl : UserControl
    {
     public ImageButtonUserControl()
     {
      InitializeComponent();
     }

     public Image Source
     {
      get { return base.GetValue(SourceProperty) as Image; }
      set { base.SetValue(SourceProperty, value); }
     }
     public static readonly DependencyProperty SourceProperty = 
      DependencyProperty.Register("SourceProperty", typeof(Image), typeof(ImageButtonUserControl),null);
    }

I want to be able to dynamically create the ImageButtons and stuff them in a container like a WrapPanel: Assume we have an image named “image” already:

     ImageButtonUserControl imageButton = new ImageButtonUserControl();
     imageButton.Source = image;

     this.thumbnailStackPanel.Children.Add(imageButton);

What do I need to do to get the image to display? I'm assuming I need to do something with DataContext, but I'm not quite sure what or where.

Thanks for any help

From stackoverflow

• You can get an ImageButton easily just by templating an ordinary Button so you dont require a UseControl at all. Assuming that Button.Content will be the ImageSource. The controltemplate of the Button will be

   <ControlTemplate x:Key="btn_template">         
     <Image Source="{TemplateBinding Content}" />   
   </ControlTemplate>
  

  And the usage as an ItemsControl with URL collection as its ItemsSource, You can add WrapPanel as the ItemPanel. Default will be StackPanel if you dont specify one.

  <DataTemplate x:Key="dataTemlpate">
    <Button Template="{StaticResource btn_template}" Content="{Binding}"/>
  </DataTemplate>    
  
  
   <ItemsControl ItemsSorce="{Binding UrlCollection}" ItemsTemplate="{StaticResource dataTemlpate}"/>
  

  ckarbass : Thanks, that was a typo I had already fixed....still doesn't seem to work.

  ckarbass : hmm...it already has a width and height, I think it has to do with DataContext...

  ckarbass : that usage will result in a button with an image inside it. I want a clickable image (without the default button visually encapsulating it)....I believe the code I have above completely overrides the default button template with the image.

  Jobi Joy : No this exactly does what you want. It wont show a button chrome, Just try it.

  ckarbass : well you just changed your response, what you have now will override the template

  ckarbass : but...i have multiple images....I get a list of URL's, contstruct image objects from them...then create the above user controls with the images i just created, then add them to a wrap panel

  Jobi Joy : use an ItemsControl and set ItemsPanel as WrapPanel, then give the button I wrote as ItemTemplate of the ItemsControl. And ItemsSource will be the collection of URLs

  ckarbass : yeah, trying that now, thanks

• I believe this will help. It did for me!

  http://www.nikhilk.net/Silverlight-Effects-In-Depth.aspx

  Instead Image, use ImageSource. E.G. typeof(ImageSource), etc..