WP7 - blinking background in custom button

Question

This is my custom button:

<Style TargetType="local:AnswerButton">
    <Setter Property="Background" Value="{StaticResource BlueGradient}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:AnswerButton">
                <Grid>
                    <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="10">
                        <Border Name="myBorder" Background="{TemplateBinding Background}" CornerRadius="9">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="100"/>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0"
                                       TextAlignment="Center" VerticalAlignment="Center" 
                                       Text="{TemplateBinding Option}" Foreground="Yellow" />
                                <TextBlock Grid.Column="1"
                                       TextAlignment="Left" VerticalAlignment="Center" 
                                       Text="{TemplateBinding Text}" Foreground="Black" />
                            </Grid>
                        </Border>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

How can I set animation for custom button? I tried this:

    ColorAnimation myColorAnimation = new ColorAnimation();
    myColorAnimation.From = Colors.Blue;
    myColorAnimation.To = Colors.Green;
    myColorAnimation.AutoReverse = true;
    myColorAnimation.Duration = TimeSpan.FromSeconds(1);


    Storyboard.SetTargetName(myColorAnimation, "myBorder");
    Storyboard.SetTargetProperty(myColorAnimation,
        new PropertyPath(Border.BackgroundProperty));
    Storyboard myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myColorAnimation);

    myStoryboard.Begin();

But it has problem with target name. I know it's wrong but how can I set target to custom control? I have 4 in my page and I want to set this animation for one which is choosed:

    <Controls:AnswerButton Name="btnAnswerA" Tap="AnswerButton_Tap"/>
    <Controls:AnswerButton Name="btnAnswerB" Tap="AnswerButton_Tap"/>
    <Controls:AnswerButton Name="btnAnswerC" Tap="AnswerButton_Tap"/>
    <Controls:AnswerButton Name="btnAnswerD" Tap="AnswerButton_Tap"/>

I don't care if it would be in code or in xaml but how can I get some of that custom buttons blinking (flashing) by coloranimation? Thanks

Edit: I tried many options with visualstatemanager like in Thaven's answer but it didn't help. Really there is no one who knows where could be possible problem?

Answer 1

I think you should use Expression Blend to make this animation. You can see the transitions there in real time and make the appropriate changes without having to compile.

Here is a good guide http://msdn.microsoft.com/en-us/magazine/cc721608.aspx

Answer 2

If i understand your question correct, you don't know how to set animation to chosen instance of yours button, and run in when button is pressed.

there is several way to achieve that. One of them is to use Visual States.

In your case, xaml code should look some like this:

    <Style TargetType="local:AnswerButton">
<Setter Property="Background" Value="Blue"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="local:AnswerButton">
            <Grid>
                <Grid.Resources>
                    <Storyboard x:Name="AnimateChosen"/>
                </Grid.Resources>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="0:0:0.2" To="Pressed"/>
                            <VisualTransition GeneratedDuration="0:0:0.2" To="Normal"/>
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ColorAnimation Duration="0" To="Lime" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder" d:IsOptimized="True"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="10" Background="Black">
                    <Border x:Name="myBorder" CornerRadius="9" Background="Blue">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0"
                                TextAlignment="Center" VerticalAlignment="Center" 
                                Text="{TemplateBinding Option}" Foreground="Yellow" />
                            <TextBlock Grid.Column="1"
                                TextAlignment="Left" VerticalAlignment="Center" 
                                Text="{TemplateBinding Text}" Foreground="Black" />
                        </Grid>
                    </Border>
                </Border>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

More information about animation and visual styles in windows phone :

http://windowsphonegeek.com/articles/WP7-Animations-in-depthndash-Overview-and-Getting-Started

http://www.windowsphonegeek.com/articles/WP7-working-with-VisualStates-How-to-make-a-ToggleSwitch-from-CheckBox

Answer 3

I have a very simple idea, and i hope it's good for you case. You have click event for every button,right?

 private void Button1_Click_1(object sender, RoutedEventArgs e)
    {
        DispatcherTimer dispatcherTimer = new DispatcherTimer();
        dispatcherTimer.Tick += dispatcherTimer_Tick;
        dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 10);
        dispatcherTimer.Start();

    }
    private void dispatcherTimer_Tick(object sender, EventArgs e)
    {

        Random rnd = new Random();            
        Button1.Background = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(
                      Convert.ToByte(rnd.Next(255)),
                      Convert.ToByte(rnd.Next(255)),
                      Convert.ToByte(rnd.Next(255)),
                      Convert.ToByte(rnd.Next(255))
                      ));             
    }