Кнопка "Изображение" реагирует только при нажатии на изображение, а не в области вокруг кнопки

Я использую следующий стиль кнопки, который убирает границы и делает прозрачный фон для создания моих кнопок изображения:

  <Style x:Key="EmptyButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#00000000"/>
    <Setter Property="BorderBrush" Value="#00000000"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <ContentPresenter 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    RecognizesAccessKey="True" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Стиль имеет следующий ответ: Кнопка WPF с изображением круга

Теперь проблема заключается в том, что область с кликами ограничивается изображением независимо от того, насколько велика фактическая кнопка:

Код моей кнопки:

<Button Name="n02" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Style="{DynamicResource EmptyButtonStyle}" Canvas.Left="308" Canvas.Top="157" Height="106" Width="120">
        <Image Source="boto_face_off.PNG" Height="61" Width="59" />
    </Button>

Вопрос: как заставить всю область кнопки реагировать на щелчок? Я хочу сохранить его прозрачным и без границ, как сейчас.

Ответ 1

Вы можете обернуть презентатор в Border с помощью Background.

<ControlTemplate TargetType="{x:Type Button}">
     <Border Background="{TemplateBinding Background}">
          <!-- ContentPresenter here -->
     </Border>
</ControlTemplate>

Стиль устанавливает Background в нечто прозрачное, но он никогда не использовался даже в Template, таким образом, Border сделает весь тест по всей области.

Ответ 2

Просто добавив некоторую информацию в ответ выше, после того, как вы исследовали проблему в течение нескольких часов.

Если вы определяете свой собственный шаблон, как в приведенном выше примере, вы меняете визуальное дерево элемента. В приведенном выше примере применения Style="{DynamicResource EmptyButtonStyle}" он становится:

Button
  |
ContentPresenter

Но если вы посмотрите на визуальное дерево стандартной кнопки (вы можете сделать это в Visual Studio), это выглядит так:

Button
  |
ButtonChrome
  |
ContentPresenter

Таким образом, в стилизованной кнопке нет ничего вокруг ContentPresenter, на которое нужно щелкнуть, и если содержимое находится в "середине", окружающая область будет оставлена полностью пустой. Мы должны добавить элемент, который займет это место:

Вы можете сделать это с помощью <Border> (я думаю, что это лучше всего, потому что Border - это легкий элемент, я полагаю) или какой-то другой элемент, я пробовал <Grid> и <DockPanel> и оба работали.

Единственное, что я не понимаю, - это то, почему вам нужно явно указать фон на что-то прозрачное, просто оставив его, вы не создадите зону с кликами.

Изменить: последний вопрос в комментариях здесь Кнопка "Изображение" реагирует только при нажатии на изображение, а не на области внутри кнопки