xaml button templates and button over button

Question

I'm struggling with a problem while trying create a collection of buttons.

I have a button made in wpf and when I deploy to my application I want to be able to assign the image at instantiation.

Just now the button textblock is bound to {Binding Content} and I'm able to add the top buttons and an Image placeholder.

What I cant figure out is how to assign the click event handlers to the top two buttons, also when I click the top buttons.

The main button click event fires, I've tried changing the Canvas.ZIndex but that's not working.

I've included a very crude image of what I'm trying to achieve, I could create all the buttons separately but that's not the point, I want one template which will allow me to use over different things.

Is it just a control template I need or do I need a completely new usercontrol developed.

<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
        <Border x:Name="border" BorderThickness="2" CornerRadius="10" Width="200" Height="130" Background="#FF5581A6" RenderTransformOrigin="0.5,0.5">

            <StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,5,5,0">
                    <Button Canvas.ZIndex="10">
                        <StackPanel Orientation="Horizontal">
                            <Rectangle  Width="15" Height="15">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="Resources/Icons/appbar.information.circle.png"/>
                                </Rectangle.Fill>

                            </Rectangle>
                        </StackPanel>
                    </Button>

                    <Button x:Name="ClosePlugin" Canvas.ZIndex="10" Margin="5,0,0,0">
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Width="15" Height="15">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="Resources/Icons/appbar.close.png"/>
                                </Rectangle.Fill>

                            </Rectangle>

                        </StackPanel>
                    </Button>
                </StackPanel>
                <Image x:Name="MainImage" Height="60" Width="80" Margin="0,-5,0,0" Source="{Binding}" Stretch="Fill"/>
                <TextBlock FontFamily="Segoe UI" FontWeight="Thin" Margin="0,-5,0,0" FontSize="22" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="PluginNameTextBlock" Text="{Binding Content}"/>

            </StackPanel>
        </Border>
    </ControlTemplate>

Answer 1

In my applications I use this solution.

I have defined attached property ImgSource in class ButtonBehavior:

using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Media;

namespace WpfStackOverflowSample
{
    public static class ButtonBehavior
    {
        private static readonly DependencyProperty ImgSourceProperty = DependencyProperty.RegisterAttached(
            "ImgSource", 
            typeof (ImageSource), 
            typeof (ButtonBehavior), 
            new PropertyMetadata(default(ImageSource)));

        public static void SetImgSource(ButtonBase button, ImageSource value)
        {
            button.SetValue(ImgSourceProperty, value);
        }

        public static ImageSource GetImgSource(ButtonBase button)
        {
            return (ImageSource)button.GetValue(ImgSourceProperty);
        }

    }
}

Then I define ContentTemplate for "ImageButtons" and finally when I want to use this kind of buttons I just set attached property ImgSource a apply style with the ContentTemplate

<Window x:Class="WpfStackOverflowSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfStackOverflowSample"
        Title="MainWindow" Height="480" Width="640">
    <Window.Resources>

        <Style TargetType="{x:Type ButtonBase}">
            <Setter Property="Margin" Value="0,5" />
            <Setter Property="MinWidth" Value="100" />
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>

        <Style x:Key="ImgButtonStyle" TargetType="{x:Type ButtonBase}" BasedOn="{StaticResource {x:Type ButtonBase}}">
            <Setter Property="local:ButtonBehavior.ImgSource" Value="/Images/unknown.png" />
            <Setter Property="Padding" Value="2" />
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image 
                                x:Name="img"
                                Source="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=(local:ButtonBehavior.ImgSource)}"
                                Stretch="UniformToFill"
                                Width="16" Height="16"
                                Margin="0,0,5,0" />
                            <TextBlock 
                                x:Name="txt"
                                Text="{Binding}"
                                VerticalAlignment="Center" />
                        </StackPanel>
                        <DataTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="img" Property="Opacity" Value="0.3" />
                                <Setter TargetName="txt" Property="Foreground" Value="#ADADAD"></Setter>
                            </Trigger>
                        </DataTemplate.Triggers>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type ButtonBase}}" />

    </Window.Resources>


    <StackPanel Orientation="Vertical" VerticalAlignment="Center">

        <Button local:ButtonBehavior.ImgSource="/Images/encrypt.png"
                Style="{StaticResource ImgButtonStyle}"
                Content="Encrypt" />

        <Button local:ButtonBehavior.ImgSource="/Images/decrypt.png"
                Style="{StaticResource ImgButtonStyle}"
                Content="Decrypt"
                IsEnabled="False" />

        <Button Style="{StaticResource ImgButtonStyle}"
                Content="No image" />

        <Button Content="Classic" />

        <Button Content="Classic" 
                IsEnabled="False" />

    </StackPanel>

</Window>