Reusable Custom Content for Buttons

Question

My user interface makes use of customized buttons: They contain both an image and a label.

I customized a single button manually, by setting its content to a grid holding an image and a label. However, since I need to have several such buttons, with different images and labels, I'd like to "extract" this pattern into something reusable. Basically, I just need a reusable object, with 2 properties (Image and Text) that I can set as the Content of several Buttons.

I looked at ContentTemplates, but I do not need to customize the appearance of the Button control itself, just its content.

What is the most appropriate technique to use for this?

Answer 1

The easiest thing to do is create a UserControl for this:

1. Create a UserControl
2. Add a "ImageSource" dependency property to the UserControl class of type BitmapSource for the image
3. Add a "Text" dependency property to the UserControl class of type string
4. For your UserControl XAML, put the following XAML (simplified for brevity, you can change to suit your layout needs)

XAML for UserControl:

<UserControl DataContext="{Binding RelativeSource={RelativeSource Self}}" ...>
    <Button>
        <StackPanel Orientation="Horizontal">
           <Image Source="{Binding ImageSource}" />
           <TextBlock Text="{Binding Text}" />
        </StackPanel>
    </Button>
</UserControl>

Now you can reuse your user control wherever you want like so:

<myNS:MyUserControl ImageSource="MyImages/Foo.png" Text="Click here!" />

Answer 2

you could:

1. Derive a class from button, add the two properties and overide the control template. using a usercontrol that contains the button you will be forced to do work arounds such as exposing the button as a property. (to attach commands, get the click event etc.)

2. create your own straight class that has the two properties, and set it to be the buttons content, and create a data template for it, then the button stays as a straight button. If you want these properties to be set from the xaml, derive from control or something that allows dependency properties

I would use the second approach, its simple, and quick.

Answer 3

I would say Control template editing as the easiest option to do this. Try using the below control template for all your buttons.I assumed the Button.Content is always the Label and Button.Tag always the Image Source

     <ControlTemplate x:Key="ImageText_button" TargetType="{x:Type Button}">
  <Grid Background="Transparent">
   <Image Source="{TemplateBinding Tag}" Stretch="Fill"/>
   <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
  </Grid>
 </ControlTemplate>

And all of your button XAML will be as below

<Button Content="MyLabel" Tag="\Image\abc.png" Template="{DynamicResource ImageText_button}" />