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

时间:2015-04-14 18:59:21

标签: c# .net wpf

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

也就是说,现在我有这种行为,即使鼠标明显位于按钮区域内,按钮也会被取消选择:

Bad Behavior

并且我试图让按钮被选中,即使用户之前没有按下按钮的前景“白色”部分:

Good Behavior

我尝试在按钮上设置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>  

1 个答案:

答案 0 :(得分:7)

替换

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