Question

I have a component with i am animating the opacity of back and forth,

how do I run the animation straight away?

Here’s my resource for that animation?

<RadioButton.Resources>
    <Style x:Key="PhoneRadioButtonCheckBoxBase" TargetType="ToggleButton">
        <Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBrush}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
    </Style>
    <Style x:Key="RectToggleButton" TargetType="RadioButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Grid x:Name="grid" Background="Transparent" Loaded="grid_Loaded">
                        <Grid.Resources>
                            <Storyboard x:Name="Strobing" AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="HighlightedSprite">
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.495"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </Grid.Resources>

Answer 1

This might work:-

                   <Grid x:Name="grid" Background="Transparent" >
                        <Grid.Triggers>
                              <EventTrigger RoutedEvent="RadioButton.Loaded">
                                  <BeginStoryboard>
                            <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="HighlightedSprite">
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.495"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                                  </BeginStoryboard>
                              </EventTrigger>
                        </Grid.Triggers>

Or you could try this:-

                <ControlTemplate TargetType="RadioButton">
                    <Grid x:Name="grid" Background="Transparent">
                        <VisualStateManger.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">  
                            <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="HighlightedSprite">
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.495"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                                </VisualState>  
                      </VisualStateGroup>
                        </VisualStateManger.VisualStateGroups>