Silverlight ImageButton UserControl

Question

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

score 10 · Accepted Answer · edited Mar 11 '11 at 14:38

10

You can get an ImageButton easily just by templating an ordinary Button so you dont require a UserControl 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 don't specify one.

<DataTemplate x:Key="dataTemplate">
  <Button Template="{StaticResource btn_template}" Content="{Binding}"/>
</DataTemplate>    


 <ItemsControl ItemsSource="{Binding UrlCollection}" ItemsTemplate="{StaticResource dataTemplate}"/>

edited Mar 11 '11 at 14:38

Town

14,706
3
48
72

answered Oct 14 '08 at 04:27

Jobi Joy

49,102
20
108
119

hmm...it already has a width and height, I think it has to do with DataContext... – ckarbass Oct 14 '08 at 04:36
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. – ckarbass Oct 14 '08 at 04:45
No this exactly does what you want. It wont show a button chrome, Just try it. – Jobi Joy Oct 14 '08 at 04:47
well you just changed your response, what you have now will override the template – ckarbass Oct 14 '08 at 04:48
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 – ckarbass Oct 14 '08 at 04:49
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 – Jobi Joy Oct 14 '08 at 05:24

score 2 · Answer 2 · answered Feb 12 '09 at 17:58

2

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..

answered Feb 12 '09 at 17:58

Silverlight ImageButton UserControl

2 Answers2

Linked