Search code examples
c#wpfanimationborder

How to set Animation WPF Border without setting a name


I have this:

<Border.Triggers>
    <EventTrigger RoutedEvent="Border.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard TargetProperty="Background">
                    <ColorAnimation From="Red" To="Green" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Border.Triggers>

I want to change the background when hovering over with mouse, like gradientstop or simple colors, but I get errors. And where to lookup which dependency properties I have to use at TargetProperty.

for example this doesnt work either

<Grid.Triggers>
                            <EventTrigger RoutedEvent="Grid.Loaded">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard TargetProperty="Background.GradientStops[1].Color">
                                            <ColorAnimation From="Red"
                                                            To="Green"
                                                            Duration="0:0:2"
                                                            AutoReverse="True"
                                                            RepeatBehavior="Forever" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                    <BeginStoryboard>
                                        <Storyboard TargetProperty="Background.GradientStops[1].Offset">
                                            <DoubleAnimation From="0"
                                                             To="1"
                                                             Duration="0:0:2"
                                                             AutoReverse="True"
                                                             RepeatBehavior="Forever"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Grid.Triggers>

Solution

  • You should set the Background property of the Border to the Brush that you want to animate. If there is no brush there is nothing to animate. The following markup works. It animates the Color property of the SolidColorBrush that is set as the Background of the Border:

    <Border Background="Transparent">
        <Border.Triggers>
            <EventTrigger RoutedEvent="Border.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                            <ColorAnimation From="Red" To="Green" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Border.Triggers>
        <TextBlock>Border....</TextBlock>
    </Border>
    

    for example this doesnt work either

    Same thing here. If you want to animate the Color property of a GradientStop you need to make sure that there actually is a GradientStop to animate, i.e. you should set the Background property of the Grid to a LinearGradientBrush. This works:

    <Grid>
        <Grid.Background>
            <LinearGradientBrush>
                <GradientStop />
                <GradientStop />
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Background.GradientStops[0].Color">
                            <ColorAnimation From="Red"
                                                                To="Green"
                                                                Duration="0:0:2"
                                                                AutoReverse="True"
                                                                RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard TargetProperty="Background.GradientStops[1].Offset">
                            <DoubleAnimation From="0"
                                                                 To="1"
                                                                 Duration="0:0:2"
                                                                 AutoReverse="True"
                                                                 RepeatBehavior="Forever"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Grid.Triggers>
        <TextBlock>Grid...</TextBlock>
    </Grid>