Change Border background color in animation

Question

I am newbie in XAML area, I just want to learn about VSM. When I add something into the StoryBoard, there always alerted the same error. as below:

Cannot resolve TargetProperty Background.Color on specified object.

<phone:PhoneApplicationPage.Resources>
    <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
        <Border 
            BorderThickness="{TemplateBinding BorderThickness}"
            Height="{TemplateBinding Height}"
            Width="{TemplateBinding Width}"
            Margin="{TemplateBinding Margin}"
            Padding="{TemplateBinding Padding}"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            Name="btnBorder">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <ColorAnimation Duration="0" 
                                            To="Blue"
                                            Storyboard.TargetName="btnBorder"
                                            Storyboard.TargetProperty="Background.Color"
                                            />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Pressed"/>
                    <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ContentPresenter 
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" >
            </ContentPresenter>
        </Border>
    </ControlTemplate>
</phone:PhoneApplicationPage.Resources>

<Button 
            x:Name="btnSubmit" 
            Grid.Row="3" 
            Grid.Column="0" 
            Grid.ColumnSpan="2" 
            Content="Login" 
            IsEnabled="False" 
            Click="btnSubmit_Click" 
            Margin="0" 
            BorderThickness="2"
            BorderBrush="White"
            Background="Aqua"
            Padding="15" 
            Template="{StaticResource ButtonControlTemplate1}"
            />

why and how to fixed it, thanks!

score 2 · Accepted Answer · answered Dec 15 '16 at 10:53

2

Your visual state should be PointerOver rather than MouseOver.

Even so the ColorAnimation does nothing for me. This, however, does:

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames
            Storyboard.TargetName="btnBorder"
            Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

Note the target property is Background rather than Background.Color.

answered Dec 15 '16 at 10:53

Petter Hesselberg

5,062
2
24
42

If this answer is acceptable, please **accept** it. – Petter Hesselberg Dec 15 '16 at 12:46
thanks and sorry that forgot to accept it as a correct answer! – Match Chow Oct 23 '19 at 08:15

Change Border background color in animation

1 Answers1