Capture Click event of button with image in WPF

Question

I'm new to WPF and created a draggable button with an image inside - which works nicely...but I can't seem to capture the onClick of the button which contains the image?

<Window x:Class="PAD.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:PAD"
    mc:Ignorable="d"
    Title="C2D" Height="134" Width="134" WindowStyle="None" Background="Transparent" Foreground="Transparent" BorderBrush="Transparent" BorderThickness="0" ResizeMode="NoResize" AllowsTransparency="True">
<Grid x:Name="ClickIcon" Background="Transparent" >

    <Button x:Name="dialButton" HorizontalAlignment="Left" VerticalAlignment="Top" Width="130" Height="130" Foreground="Transparent" Background="Transparent" BorderThickness="0" BorderBrush="Transparent" >
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Ellipse Fill="Transparent"/>
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <Image x:Name="phoneIcon"  Width="128" Height="128" Source="c:\users\chapmd1\documents\visual studio 2015\Projects\PAD\PAD\red-phone-icon_300205.png" MouseDown="image_MouseDown" />
                </Grid>
            </ControlTemplate>
        </Button.Template>

    </Button>


 private void image_MouseDown(object sender, MouseButtonEventArgs e)
    {
            this.DragMove();

    }

I tried the onClick on the Button, but nothing got captured?

Answer 1

Your problem is probably somewhere else. This works as expected:

XAML:

<Grid x:Name="ClickIcon" Background="Transparent" >
    <Button 
        Click="dialButton_Click"
        x:Name="dialButton" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top" Width="130" Height="130" 
        Foreground="Transparent" 
        Background="Transparent" 
        BorderThickness="0" 
        BorderBrush="Transparent">
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid >
                    <Ellipse Fill="Transparent"/>
                    <ContentPresenter 
                        Content="{TemplateBinding Content}" 
                        HorizontalAlignment="Center" 
                        VerticalAlignment="Center"/>
                    <Image x:Name="phoneIcon" 
                           Width="128" Height="128" 
                           Source="..."
                           MouseDown="phoneIcon_MouseDown"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

C#:

private void phoneIcon_MouseDown(object sender, MouseButtonEventArgs e)
{
    System.Diagnostics.Trace.WriteLine("phoneIcon_MouseDown");
}

private void dialButton_Click(object sender, RoutedEventArgs e)
{
    System.Diagnostics.Trace.WriteLine("dialButton_Click");
}

Answer 2

Not sure what you want to achieve, but in case you want to Drag the Window while the button is pressed and then afterwards do something else then you can do it like this:

 private void image_MouseDown(object sender, MouseButtonEventArgs e)
    {
        while (e.ButtonState == MouseButtonState.Pressed)
        {
          this.DragMove();
          Debug.WriteLine("Dragged!");
        }

        var image = sender as Image;
        object parent = FindParent(image);
        while (parent != null && parent.GetType() != typeof(Button))
        {
            parent = FindParent((FrameworkElement)parent);
        }

        var bt = parent as Button;
        if(bt != null)
        bt.ClickMode = ClickMode.Press;
    }

    private void DialButton_OnClick(object sender, RoutedEventArgs e)
    {
        Debug.WriteLine("Clicked!");
    }

    DependencyObject FindParent(FrameworkElement ui)
    {
        return ui.TemplatedParent;
    }
}