CODEWITHSUNDEEP
wpfxamlwpf-styleismouseover
CAG2
CAG2

Reputation: 411

IsMouseOver trigger only returns true when the cursor is over the 'bottom' part of the button

I am fairly new to WPF, and I am trying to make a custom button where it changes to another specified colour when you hover over it. I have done this with partial success; the only problem is that only the bottom part of the button actually triggers the colour change.

Red highlighted area is the approximate hitbox. (not the long red strip, that's just decoration)

enter image description here

<!-- Button Markup-->
<Button Margin="4,0,4,0" >
    <Image Source="{StaticResource closeImg}"></Image>
</Button>

<!-- Button style -->

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#FF2B2B2B"/>
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="Width" Value="28px"/>
    <Setter Property="Height" Value="28px"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

Upvotes: 1

Views: 952

Answers (2)

CAG2
CAG2

Reputation: 411

I've found that this was a slight quirk with the debug function with WPF and the WindowChrome class. This is fixed by adding the following to the style:

<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"></Setter>

Upvotes: 2

pjrki
pjrki

Reputation: 248

your solution seems to be good to me. I've tried the same thing on my vs and everything seems to be just fine. Perhaps there's something else connected with container that holds these buttons, or perhpas something with the image itself. Can you try to set the name for the border inside of a controlTemplate and set the TargetName inside of a trigger? Wonder if that could help

<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF2B2B2B"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Width" Value="28px"/>
<Setter Property="Height" Value="28px"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="Bd" Background="{TemplateBinding Background}">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Bd" Property="Background" Value="Red"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Upvotes: 0

Related Questions