Custom Usercontrol Button, How to wire up click event? Should i use CustomControl?

Question

Hi Guys,

I wanted to create a button that had an image and a textblock as content. So i went about looking for an answer and found a post (http://stackoverflow.com/questions/1568883/reusable-custom-content-for-buttons) which told me to create a usercontrol.

I did this and it works great, i can set the image source and text through dependency properties however i am stuck as there is no click event for my control.

I did a little more digging and concluded that i probably need a CustomControl derived from Button. Is this correct? or would it be better to wire up a click event to my UserControl.

Here's my UserControl:

<UserControl x:Class="Client.Usercontrols.MyButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MinHeight="30" MinWidth="40"
DataContext="{Binding RelativeSource={RelativeSource Self}}">


<Button Width="Auto" HorizontalAlignment="Center">

    <Border CornerRadius="5" BorderThickness="1" BorderBrush="Transparent" >
        <Grid>
            <Image Name="tehImage" Source="{Binding ImageSource}" />
            <TextBlock Name="tehText" Text="{Binding Text}"
                 Style="{DynamicResource ButtonText}" />
        </Grid>
    </Border>

</Button>

Implementation

<my:MyButton ImageSource="../Images/MainSyncButton.png" ImageWidth="141" Text="Synchronise" Click="btnSynchronise_Click" />

Answer 1

The answer really depends on what your goals are for the control. You may be able to get away with not creating a user or custom control if you can manipulate the data that you are binding to. If all you want to do is display a dynamic image and text, then you could create an ImageText object that contains two properties. You could then bind the default Button control's Content property to this object and use a DataTemplate to define the layout of the content.

If you cannot control the data type that you are binding to, or if you're really set on the idea of creating a control then I would recommend creating a custom control. Custom controls allow you to utilize the built-in capabilities of a standard button. Generally you would only want to create a User Control if you wanted to hide or encapsulate the default functionality of the visual controls contained within the control.

Good luck.

Answer 2

The easiest option would be to just make your UserControl expose a click event, and pass through your Button's click event.

In MyButton's xaml:

<Button Width="Auto" HorizontalAlignment="Center" click="onButtonClick">

In MyButton's code:

public event RoutedEventHandler Click;

void onButtonClick(object sender, RoutedEventArgs e)
{
    if (this.Click != null)
        this.Click(this, e);
}

You can then leave your "implementation" code as-is.