CODEWITHSUNDEEP
wpfxamlevents
Andez
Andez

Reputation: 5848

Another WPF/XAML Image in Button Event Trouble

I've put together the following XAML code to try and figure out why the Click event only fires when I click on the Image or TextBlock content inside the Button. The area around these in the Button does not fire the click event:

<Window x:Class="TestBedApp.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <StackPanel Orientation="Horizontal" Background="Bisque">
        <Border BorderThickness="2" BorderBrush="Aqua">
            <Button x:Name="btn" Click="btn_Click" Background="Olive">
                <Button.Template>
                    <ControlTemplate>
                        <Border BorderThickness="2" BorderBrush="Red">
                            <StackPanel Orientation="Vertical">
                                <Image x:Name="img"
                                    Source="Images/MyImage.png"
                                    Width="100"
                                    Height="72"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Margin="10">
                                </Image>
                                <TextBlock Text="Click Me" Foreground="White"/>
                            </StackPanel>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Border>
    </StackPanel>
</Window>

Code behind:

private void btn_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Ooosh");
}

I've seen some samples on line using ContentPresenters, but I am after an explanation for this. I am extremely new to XAML and just getting my feet wet. I am using VS2013 and .NET 4.5 application.

Upvotes: 0

Views: 230

Answers (3)

Ravi Patel
Ravi Patel

Reputation: 463

You should try this..

Remove button's click event and use border's click event for showing messagebox.

Upvotes: 0

d.moncada
d.moncada

Reputation: 17402

IS there a reason why you want to set the ControlTemplate? If the main purpose is to get an image within the Button, or another other element for that matter, you can simply add it as a child:

<StackPanel Orientation="Horizontal" Background="Bisque">
    <Border BorderThickness="2" BorderBrush="Aqua">
        <Button x:Name="btn" Click="btn_Click" Background="Olive">
            <Border BorderThickness="2" BorderBrush="Red">
                <StackPanel Orientation="Vertical">
                    <Image x:Name="img"
                                Source="Images/MyImage.png"
                                Width="100"
                                Height="72"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Margin="10">
                    </Image>
                    <TextBlock Text="Click Me" Foreground="White"/>
                </StackPanel>
            </Border>
        </Button>
    </Border>
</StackPanel>

Upvotes: 0

Mark Feldman
Mark Feldman

Reputation: 16119

It's because the background property hasn't been set on your StackPanel. WPF will only register you having clicked something if there's actually something there being rendered, this is by design and allows you to do things like add geometry etc for unusually shaped buttons. If you really do want these areas of your button to be transparent then set the background property of the StackPanel in your ControlTemplate to "Transparent".

Upvotes: 2

Related Questions