WPF-XAML expander datatrigger background color change

Question

Reference: WPF Event Trigger Change Other UI element

I was create 7 buttons(different colors) to change Expander header background when button clicked.

<Expander x:Name="DataExpander" IsExpanded="{Binding expander_isExpanded}"Background="{Binding expander_Background,FallbackValue=Plum}">
<Expander.Header>
<TextBlock FontSize="18" FontFamily="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
   Text="{Binding expander_header_Text,FallbackValue=NoColor}"/>
</Expander.Header>
<Expander.Style>
    <Style TargetType="Expander">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsMouseOver,ElementName=color0}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation  Storyboard.TargetProperty="Expander.Background" To="Red" Duration="0:0:0.3" BeginTime="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsMouseOver,ElementName=color1}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation  Storyboard.TargetProperty="Expander.Background" To="Yellow" Duration="0:0:0.3" BeginTime="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
            ...
        </Style.Triggers>
    </Style>
</Expander.Style>

<Border Margin="2,2,2,2" BorderBrush="Gray" CornerRadius="1,1,1,1" BorderThickness="1,1,1,1">
    <Button Name="color0" Width="29" Background="Red"/>
</Border>
<Border Margin="2,2,2,2" BorderBrush="Gray" CornerRadius="1,1,1,1" BorderThickness="1,1,1,1">
    <Button Name="color1" Width="29" Background="Yellow"/>
</Border>

It throw "System.InvalidOperationException:'System.Windows.Media.Animation.ColorAnimation' object cannot be used to Background property

I tried :

 <ColorAnimation  Storyboard.TargetProperty="Expander.Background" ...
 <ColorAnimation  Storyboard.TargetProperty="Background" ...
 <ColorAnimation  Storyboard.TargetProperty="(Expander).Background" ...
 <ColorAnimation  Storyboard.TargetProperty="(Expander.Background).Color" ...
 <ColorAnimation  Storyboard.TargetProperty="(Background.Color)" ...

score 0 · Accepted Answer · answered Aug 18 '17 at 07:23

Change Storyboard.TargetProperty="Expander.Background" to Storyboard.TargetProperty="(Expander.Background).Color" and also remove default background property of expander.

    <StackPanel>
            <Expander x:Name="DataExpander" IsExpanded="{Binding expander_isExpanded}" >
                <Expander.Header>
                    <TextBlock FontSize="18" FontFamily="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
   Text="{Binding expander_header_Text,FallbackValue=NoColor}"/>
                </Expander.Header>
                <Expander.Style>
                    <Style TargetType="Expander">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsMouseOver,ElementName=color0}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation  Storyboard.TargetProperty="(Expander.Background).Color" To="Red" Duration="0:0:0.3" BeginTime="0:0:1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsMouseOver,ElementName=color1}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation  Storyboard.TargetProperty="(Expander.Background).Color" To="Yellow" Duration="0:0:0.3" BeginTime="0:0:1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>

                        </Style.Triggers>
                    </Style>
                </Expander.Style>
            </Expander>
            <Border Margin="2,2,2,2" BorderBrush="Gray" CornerRadius="1,1,1,1" BorderThickness="1,1,1,1">
                <Button Name="color0" Width="29" Background="Red"/>
            </Border>
            <Border Margin="2,2,2,2" BorderBrush="Gray" CornerRadius="1,1,1,1" BorderThickness="1,1,1,1">
                <Button Name="color1" Width="29" Background="Yellow"/>
            </Border>
        </StackPanel>

It is a ListBox DataTemplate and it will get the list.expander_Background, could you tell me how to keep the default background property of expander? — kIT GH, Aug 18 '17 at 07:52
Remove the binding and keep< Expander Grid.Row="0" x:Name="DataExpander" Background="Plum"> — Justin CI, Aug 18 '17 at 07:58

WPF-XAML expander datatrigger background color change

1 Answers1