CODEWITHSUNDEEP
wpfxaml
Jef Patat
Jef Patat

Reputation: 999

Change expander background on mouse hover

I would like to change the expanders background color to a lighter variant on mouse hover. So I figured I use a trigger and a converter to convert the background color to a lighter variant on mouse over. I started simple and only implement the trigger. That works:

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="{x:Type Expander}">
            <Style.Triggers>
                <Trigger Property="Control.IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>

    <Expander Header="Header">
        <StackPanel>
            <TextBox Background="Transparent">Content</TextBox>
        </StackPanel>
    </Expander>

</StackPanel>

So I can achieve almost what I want. But I want to be able to set the color on the expander like this:

<Expander Header="Header" Background="Yellow">

The moment I add that the color switching stops working and the expander is always yellow. Why is that happening and how can I achieve my goal?

Edit: in my final application I will have an itemscontrol with multiple expanders whose background color is databound to my view model, so I think I cannot set the color in the style. 

<ItemsControl ItemsSource="{Binding TestStepDescriptions}">
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type localVMsTestEngines:AutomaticTestStepDescription}">
            <Expander Background="{Binding StepStatus, Converter={StaticResource StepStatusToColorConverter}}">

regards, Jef

Upvotes: 1

Views: 937

Answers (1)

lokusking
lokusking

Reputation: 7456

You cannot set that color in the Expander directly if you use a Trigger.

Instead you have to do it like this:

<ItemsControl ItemsSource="{Binding TestStepDescriptions}">
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type localVMsTestEngines:AutomaticTestStepDescription}">
            <Expander >
<Expander.Style>
    <Style TargetType="{x:Type Expander}">
    <Setter Property="Background" Value="{Binding StepStatus, Converter={StaticResource StepStatusToColorConverter}}"/>
                <Style.Triggers>
                    <Trigger Property="Control.IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Red"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
</Expander.Style>
</Expander>

Usage <Expander Header="Header">

Upvotes: 1

Related Questions