wpf create button template with invisible clickable area

Question

I want to create a button template that will make my button to have inisible clickable area around it. when I press the area the buttons click event should be

here is my try:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button"  HorizontalAlignment="Left" Margin="214,150,0,0" Name="button1" VerticalAlignment="Top"  Click="button1_Click">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border Background="Pink" Padding="25">
                        <Button Content="{TemplateBinding Content}"></Button>
                    </Border>     
                </ControlTemplate>              
            </Button.Template>
        </Button>
    </Grid>
</Window>

when i press inside the border the button1_Click method is called. but the inner button animation is not ativated.

I want the inner button to behave as if clicked when I press inside the border area.

@dowhilefor you are welcome to sugest other way to create a button with invisible clickable margin — Nahum, Apr 10 '13 at 14:11
That's normal. Because the inner button does not receive the 'click event', since the outer button does. Furthermore the outer buttons `ControlTemplate` does not contain any click animation so you won't see one. — DHN, Apr 10 '13 at 14:12
See answer from @Snehal for a solution that worked perfectly for me. http://stackoverflow.com/questions/995757/how-do-you-completely-remove-the-button-border-in-wpf — Contango, Oct 06 '14 at 14:04

score 3 · Accepted Answer · answered Apr 10 '13 at 14:17

There are multiple ways, like routing all commands and events to your inner button, but that might imply a lot of work in the code behind. The "only xaml" solution is to copy the whole Button Template, and overwrite it with something like this

<ControlTemplate TargetType="Button">
    <Border Background="Transparent">
        <Border
            x:Name="Border"
            Margin="24"
            CornerRadius="2"
            BorderThickness="1"
            Background="{StaticResource NormalBrush}"
            BorderBrush="{StaticResource NormalBorderBrush}">
            <ContentPresenter
                Margin="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                RecognizesAccessKey="True"/>
        </Border>
    </Border>
</ControlTemplate>

But this can look off, when used on different themes.

wpf create button template with invisible clickable area

1 Answers1