windows-phone-8storyboardcoloranimation

WP8 storyboard color animation throwing invalid operation exception


I'm trying to animate stackpanel background color on tap event to highlight it. Stackpanel is inside longlistselector. when i tap on particular element i want to highlight it code is as below

xaml code

**<phone:PhoneApplicationPage.Resources>
        <local:BooleanToForegroundConverter x:Key="BooleanToForegroundConverter"/>
<Style x:Key="MyLongListMultiSelectorItemListStyle" 
       TargetType="toolkit:LongListMultiSelectorItem">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="toolkit:LongListMultiSelectorItem">
                            <StackPanel 
                        Background="{Binding RelativeSource={RelativeSource TemplatedParent},  
                                             Path=IsSelected, Mode=TwoWay, 
                                             Converter={StaticResource BooleanToForegroundConverter}}">
</phone:PhoneApplicationPage.Resources>**
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    <toolkit:LongListMultiSelector IsGroupingEnabled="True"
                                                  SelectionChanged="lstSongs_SelectionChanged"
                                                   GroupHeaderTemplate="{StaticResource BuddiesGroupHeaderTemplate}"
                                                   Background="Transparent"
                                                   JumpListStyle="{StaticResource AddrBookJumpListStyle}"
                                                   HideEmptyGroups="True"

                                                   x:Name="lstSongs"
                                                   toolkit:TiltEffect.IsTiltEnabled="True"        
                                                   ItemsSource="{Binding Songs}"
                               **ItemContainerStyle="{StaticResource MyLongListMultiSelectorItemListStyle}"**                     
                                                   IsSelectionEnabledChanged="lstSongs_IsSelectionEnabledChanged" 
                                                     >
                                <toolkit:LongListMultiSelector.ItemTemplate>
                            <DataTemplate >
                                <StackPanel   
                                    Margin="-40,0,0,17" 
                                    Width="432" 
                                    Height="78"
                                    Tap="OnTap"
                                   >
                                    <TextBlock 
                                        Text="{Binding Name}"  
                                        Margin="0,-15,0,0"
                                        Style="{StaticResource PhoneTextExtraLargeStyle}"
                                        Padding="0,0,0,0"/>
                                    <TextBlock  
                                        Text="{Binding Artist.Name}"   
                                        Margin="12,-6,12,0"

                                        Style="{StaticResource PhoneTextSubtleStyle}"/>
                                </StackPanel>
                            </DataTemplate>
                        </toolkit:LongListMultiSelector.ItemTemplate>
                            </toolkit:LongListMultiSelector>

And Converter implementation

namespace musicplayer
{
    class BooleanToForegroundConverter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return ((bool)value) ? App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush:new SolidColorBrush(Colors.Black);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new System.NotImplementedException();
        }
    }
}

**C# code ontap event**

    private void OnTap(object sender, System.Windows.Input.GestureEventArgs e)
            {
                //BackgroundAudioPlayer.Instance.Track = ((FrameworkElement)sender).DataContext as AudioTrack;
                //BackgroundAudioPlayer.Instance.Play();
                Storyboard storyBoard = new Storyboard();
                ColorAnimation animation = new ColorAnimation();

                animation.To = (System.Windows.Media.Color)App.Current.Resources["PhoneAccentColor"];
                animation.AutoReverse = true;
                animation.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
                StackPanel sp = sender as StackPanel;
                Storyboard.SetTarget(animation, sp);
                PropertyPath colorTargetPath = new PropertyPath("(Panel.Background).(SolidColorBrush.Color)");
                Storyboard.SetTargetProperty(animation, colorTargetPath);
                storyBoard.Children.Add(animation);
               storyBoard.Begin();
        }

But I'm getting Invalid operation exception on storyBoard.Begin(); line. What am I missing?? I'm just started learning windows phone 8 so any help is very appreciated


Solution

  • First off, don't do this in code-behind. Override the LongListMultiSelectorItem Style and use a converter for the desired element. Something like the following

    <Style x:Key="MyLongListMultiSelectorItemListStyle" 
           TargetType="toolkit:LongListMultiSelectorItem">
        <Style.Setters>                
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="toolkit:LongListMultiSelectorItem">
                        <StackPanel 
                            Background="{Binding RelativeSource={RelativeSource TemplatedParent},  
                                                 Path=IsSelected, Mode=TwoWay, 
                                                 Converter={StaticResource BooleanToForegroundConverter}}">                                
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    

    I'm not posting the converter implementation, it's fairly simple. Return the desired brush based on the boolean value.