如何在 WPF 中使按钮的透明部分可单击？

Question

我在 WPF 中有一堆带有透明背景的工具条按钮。当用户将鼠标悬停在按钮的外部时，不会发生任何事情，因为按钮的该部分是透明的。一旦用户将鼠标悬停在按钮的非透明区域之一上，“悬停”行为就会更改边框和背景颜色。背景不再透明，因此悬停行为会持续比以前更大的区域。我希望按钮的透明区域表现得就像按钮在那里不透明一样。

也就是说，现在我有这种行为，尽管鼠标明显位于按钮区域内，但按钮未被选择：

并且我试图像这样选择按钮，即使用户之前没有将鼠标悬停在按钮的前景“白色”部分上：

我尝试在按钮本身上设置

IsHitTestVisible

，但这似乎没有任何区别。

有没有办法让 WPF 考虑按钮的透明区域是否重要？

XAML 目前看起来像这样：

<Button Style="{StaticResource MainToolstripButtonStyle}" Margin="5,0,0,0"
ToolTip="{StaticResource OpenButtonText}"
AutomationProperties.Name="{StaticResource OpenButtonText}"
Command="{StaticResource Open}"
Content="{StaticResource OpenIcon}" />

<Style x:Key="MainToolstripButtonStyle" TargetType="Button">
    <Setter Property="Width" Value="24" />
    <Setter Property="Height" Value="24" />
    <Setter Property="Background" Value="{x:Null}" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Padding" Value="0" />
    <!-- If users want to use keyboard navigation, they use the menu instead. -->
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="Border"
              BorderThickness="1"
              BorderBrush="{x:Null}">
                    <ContentPresenter HorizontalAlignment="Center"
                          VerticalAlignment="Center" 
                          RecognizesAccessKey="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <!-- Low contrast triggers for selection / focus / enabled: -->
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Source={x:Static vvm:SystemParametersBindingTarget.Instance}, Path=HighContrast}" Value="False" />
                            <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True" />
                            <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled}" Value="True" />
                        </MultiDataTrigger.Conditions>
                        <Setter TargetName="Border"
                  Property="Background"
                  Value="{StaticResource HotToolbarButtonBrush}" />
                        <Setter TargetName="Border"
                  Property="BorderBrush"
                  Value="{StaticResource HotToolbarButtonBorderBrush}" />
                    </MultiDataTrigger>

                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Source={x:Static vvm:SystemParametersBindingTarget.Instance}, Path=HighContrast}" Value="False" />
                            <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled}" Value="False" />
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Foreground"
                  Value="{StaticResource DisabledToolbarButtonBrush}" />
                    </MultiDataTrigger>

                    <!-- High contrast triggers omitted -->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>  

Answer 1

更换

<Setter Property="Background" Value="{x:Null}" />

由

<Setter Property="Background" Value="Transparent" />

并使用ControlTemplate中的Background属性：

<ControlTemplate TargetType="{x:Type Button}">
    <Border Name="Border" Background="{TemplateBinding Background}" ...>
        ...
    </Border>
</ControlTemplate>

Answer 2

当我使用具有透明区域的图像作为样式控件模板中的按钮外观时，我遇到了这个问题：

       <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Image Name="myImage" Source="ProjectImagesFolder/myImage.png"  >
                        </Image>
                        <TextBlock Text="{TemplateBinding Content}"  TextAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

解决此问题的最简单方法是在 Visual Studio 中编辑图像，并使用颜色 R=0,G=0,B=0,A=1 绘制图像透明区域。它不影响图像，但现在有一些东西。