Кнопка изображения реагирует только при нажатии на изображение, а не на область вокруг кнопки - PullRequest
Новая
       44

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

13 голосов
/ 25 сентября 2011

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

  <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 problem

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

<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>

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

Ответы [ 2 ]

22 голосов
/ 25 сентября 2011

Вы можете обернуть докладчика в Border с ограничением Background. 

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

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

5 голосов
/ 26 сентября 2011

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

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

Button
  |
ContentPresenter

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

Button
  |
ButtonChrome
  |
ContentPresenter

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

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

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

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

...