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

Answer 1

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}'/>