如何使一個按鈕的透明部分在WPF中可點擊?

[英]How does one make a transparent portion of a button clickable in WPF?


I have a bunch of toolstrip buttons with transparent backgrounds in WPF. When the user mouses over the outside of the button, nothing happens, because that part of the button is transparent. Once the user mouses over one of the non-transparent areas of the button, the "hover" behavior changes the border and background color. The background is no longer transparent, so the hover behavior continues for a much larger area than before. I would like the transparent areas of the button to behave as if the button were non-transparent there.

我在WPF中有一堆具有透明背景的工具條按鈕。當用戶鼠標移到按鈕的外部時,什么也不會發生,因為按鈕的那一部分是透明的。一旦用戶鼠標經過一個非透明區域的按鈕,“懸停”行為會改變邊框和背景顏色。背景不再是透明的,所以鼠標懸停的行為會持續更大的范圍。我希望按鈕的透明區域表現得像按鈕不透明一樣。

That is, now I have this behavior where the button is unselected despite the mouse being clearly inside the button area:

也就是說,現在我有了這樣的行為:盡管鼠標在按鈕區域內很清楚,但按鈕仍未被選中:

Bad Behavior

and I'm trying to get the button to be selected like this even if the user has not previously moused over the foreground "white" part of the button:

我試着讓這個按鈕被選中,就像這樣即使用戶之前沒有鼠標移動到前台的“白色”部分:

Good Behavior

I tried setting IsHitTestVisible on the button itself, but that didn't seem to make any difference.

我試着在按鈕上設置IsHitTestVisible,但這似乎沒有任何區別。

Is there a way to ask WPF to consider the transparent areas of the button significant?

是否有辦法要求WPF考慮按鈕的透明區域的重要性?

XAML currently looks like this:

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 个解决方案

#1


7  

Replace

取代

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

by

通過

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

and use the Background property in the ControlTemplate:

使用控件模板中的后台屬性:

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/04/14/72f477990b11362ba5e4f61428a555a2.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com