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
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.