WPF切换按钮，自定义模板不接受单击正确的区域

I'm a relative beginner in the WPF space so I'm sure this will be the first of many questions!

我是WPF领域的初学者，所以我相信这将是许多问题中的第一个！

I have a series of toggle buttons all with a custom template designed to show an image with a transparent background that then becomes highlighted when the user toggles the button. I wanted to add padding around the content so that the highlighted area would extent around the content. This is working, but the user still has to click in the inner area to activate the button, which is not what I want.

我有一系列切换按钮，都有一个自定义模板，用于显示具有透明背景的图像，然后当用户切换按钮时突出显示。我想在内容周围添加填充，以便突出显示的区域可以围绕内容进行扩展。这是有效的，但用户仍然必须单击内部区域来激活按钮，这不是我想要的。

I'm assuming it's because I'm using the Margin property of the ContentPresenter to bind to the Padding of the button and this is classed as outside of the content, but not sure of the best way to fix this. It does work when de-selecting the button though.

我假设它是因为我使用ContentPresenter的Margin属性绑定到按钮的Padding，这被归类为内容之外，但不确定解决此问题的最佳方法。它取消选择按钮时确实有效。

Below is some XAML showing the problem which should be able to be copied and pasted straight into XamlPad.

下面是一些XAML，显示了应该能够直接复制并粘贴到XamlPad中的问题。

<Page.Resources>
    <Style x:Key="ValidationToggleButton" TargetType="ToggleButton">
    <Setter Property="Padding" Value="5" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate >
                <Grid Name="MainGrid">
                    <Viewbox>
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                              Content="{TemplateBinding Property=Button.Content}" />
                    </Viewbox>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter TargetName="MainGrid" Property="Background" Value="#88FFFF55" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</Page.Resources> 
<Grid>
<GroupBox Grid.Column="0" Header="Validation" BorderBrush="#55BBE6" Margin="2" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ToggleButton Grid.Column="0" Style="{StaticResource ValidationToggleButton}">
            CLICK
        </ToggleButton>
    </Grid>
</GroupBox>
</Grid>

Anyone have any idea how I might correct this?

任何人都知道如何纠正这个问题？

1 个解决方案

#1

Welcome to WPF world :). That happens because of the... background brush. If you don't set it it's null. And that means it's not visible for hit testing mechanism. Quick fix to this set Background="Transparent" to the MainGrid. But more appropriate way to set it via styles:

欢迎来到WPF世界:)。这是因为......背景画笔。如果你没有设置它，它是null。这意味着它对于命中测试机制是不可见的。快速修复此设置Background =“透明”到MainGrid。但是通过样式设置它的更合适的方法：

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Page.Resources>
    <Style x:Key="ValidationToggleButton" TargetType="ToggleButton">
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate >
                <Grid Name="MainGrid" Background="{TemplateBinding Background}">
                    <Viewbox>
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                              Content="{TemplateBinding Property=Button.Content}" />
                    </Viewbox>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter TargetName="MainGrid" Property="Background" Value="#88FFFF55" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</Page.Resources> 
<Grid>
<GroupBox Grid.Column="0" Header="Validation" BorderBrush="#55BBE6" Margin="2" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ToggleButton Grid.Column="0" Style="{StaticResource ValidationToggleButton}">
            CLICK
        </ToggleButton>
    </Grid>
</GroupBox>
</Grid>
</Page>