Activating Storyboard WP8

Question

I want to use a storyboard to change the boundary color of an button I'm using. The problem is I do not know how to begin my storyboard. I would like it to change color when I tap the element. The code I've got so far is:

<Button BorderBrush="Transparent" BorderThickness="0">
        <Button.Template>
            <ControlTemplate>
                <Path x:Name="CountryUser" Stretch="Fill" StrokeThickness="{StaticResource StrokeUserControl}"  StrokeLineJoin="Round" Stroke="Black" Data="{Binding CountryView.MapData}" Fill="{StaticResource CountryBackground}"/>
            </ControlTemplate> 
        </Button.Template>

        <Button.Triggers>
            <EventTrigger RoutedEvent="Click">
                <BeginStoryboard>
                    <Storyboard x:Name="StoryBoard1">
                        <ColorAnimation  Storyboard.TargetName="CountryUser" Storyboard.TargetProperty="Stroke" From="Black" To="Blue"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>

    </Button>

The click I use eas event.trigger does not work.

Answer 1

If you want the storyboard to change the color of the path which you've shaped your button as you have to move the storyboard into the Paths resources:

<Button x:Name="Button1" BorderThickness="0" BorderBrush="Transparent">
        <Button.Template>
            <ControlTemplate x:Name="Control">
                <Path x:Name="CountryUser" Style="{StaticResource style_ColorButton}" Data="{Binding CountryView.MapData}" Fill="{StaticResource CountryBackground}">
                    <Path.Resources>
                        <Storyboard x:Name="StoryBoard1">
                            <ColorAnimation Storyboard.TargetName="CountryUser" Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)" To="Blue" Duration="0"/>
                        </Storyboard>
                    </Path.Resources>
                </Path>
            </ControlTemplate> 
        </Button.Template>

From the code behind you should find the button and once you've found the button use the VisualTreeHelper to find the path in the button and then begin storyboard from the code behind. Since the Storyboard is set to the resources you should do the following once you've found the path:

Storyboard sb = h.Resources["StoryBoard1"] as Storyboard;

where h is the path

Answer 2

Silverlight supports only Loaded as the value of RoutedEvent. Your options are:

• defining your storyboard as a resource, adding a handler in the Button.Click and starting the animation in code behind
• using VisualStateManager for Pressed state of Button (inside Template)

Source (see Remarks section)

Answer 3

no story board needed

You need to play with the visual states of a button and you could do it with the help of a style

Just look at the style below

<Style x:Key="style_ColorButton" TargetType="Button">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="10,3,10,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>                              
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

In the style above VisualState "Pressed" Handles your requirement and I have given an Image source there.

Using this style with a button.

<Button Height="40" Width="40" BorderThickness="0" Name="btnAcceptCrop" Click="btnAcceptCrop_Click" Style="{StaticResource style_ColorButton}" Background="Black" ForeGround="White"/>

setting the style in code

btnAcceptCrop.Style = (Style)App.Current.Resources["style_ColorButton"];

Declaring a style in a Page

Below all the namespace declaration in your page

Just make a tag

<phone:PhoneApplicationPage.Resources>
</phone:PhoneApplicationPage.Resources>

and declare your style inside it.

Hope this helps.

Answer 4

Try this code.

Add these namespaces

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core" xmlns:Media="using:Microsoft.Xaml.Interactions.Media"

EDIT

Use TemplateBinding for changing your Path color on Tap.

 <Page.Resources>
    <Storyboard x:Name="ButtonStoryboard">
        <ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Control.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="button" d:IsOptimized="True"/>
    </Storyboard>
 </Page.Resources>

   <Button x:Name="button" Background="Blue" BorderBrush="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="864,248,0,0" Height="90" Width="214">
        <Button.Template>
            <ControlTemplate>
                <Grid Background="White">
                    <Path x:Name="CountryUser" Stretch="Fill" Height="50" Width="50" StrokeThickness="15"  StrokeLineJoin="Round" Stroke="{TemplateBinding BorderBrush}" Data="M13.5,14.25v-5h13v5h-2v-3h-9v3H13.5z M9,14.75h22v11.5h-4.5v4.5h-13v-4.5H9V14.75z M28.5,23.75v-6.5h-17
    v6.5H28.5z M13.5,22.75v-2.5h13v2.5H13.5z" Fill="{TemplateBinding BorderBrush}"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="Tapped">
                <Media:ControlStoryboardAction Storyboard="{StaticResource ButtonStoryboard}"/>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Button>