WPF-XAML扩展器datatrigger背景颜色变化

时间:2017-08-18 06:59:28

标签: c# wpf xaml

参考:WPF Event Trigger Change Other UI element

当点击按钮时,我创建了7个按钮(不同颜色)来更改Expander标题背景。

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

它抛出&#34; System.InvalidOperationException:&#39; System.Windows.Media.Animation.ColorAnimation&#39; object不能用于Background属性

我试过了:

 <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)" ...

1 个答案:

答案 0 :(得分:0)

更改Storyboard.TargetProperty =&#34; Expander.Background&#34;到 Storyboard.TargetProperty =&#34;(Expander.Background).Color&#34; 并删除扩展器的默认背景属性。

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