Add Selected effect on LongListSelector with XAML - xaml

Question

I have LongListSelector with GroupHeaderTemplate and ItemTemplate.
I would like to add 'Selected' effect on selected item in group. For example my element called RightArrow can go grey (now it's blue).
I was trying to do that with Expression Blend but effect didn't apply on selected item, but on every item.
<phone:LongListSelector x:Name="longListSelectorState" RenderTransformOrigin="-0.893,0.033" ItemTemplate="{StaticResource StateItemTemplate}" JumpListStyle="{StaticResource StateJumpListStyle}" LayoutMode="List" IsGroupingEnabled="true" HideEmptyGroups ="true" GroupHeaderTemplate="{StaticResource StateGroupHeaderTemplate}" Style="{StaticResource LongListSelectorStyle}"/>
<Style x:Key="LongListSelectorStyle" TargetType="phone:LongListSelector">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:LongListSelector">
<Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="48" Storyboard.TargetProperty="(Control.FontSize)"
Storyboard.TargetName="textBlock" />
<ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" />
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Top"/>
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" Margin="4,0,4,0" Opacity="0" Orientation="Vertical"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="StateItemTemplate">
<StackPanel VerticalAlignment="Top">
<Grid x:Name="grid">
<StackPanel x:Name="stackPanel" Orientation="Vertical" HorizontalAlignment="Left">
<TextBlock x:Name="textBlock" Text="{Binding ItemName}" Foreground="#DE000000" FontFamily="Segoe WP SemiLight" FontSize="29.333" Padding="0,5,0,0" Margin="4,0,0,0" />
<TextBlock x:Name="textBlock1" Text="{Binding SubItemNames}" Visibility="{Binding HasSubItems, Converter={StaticResource BoolVisibilityConverter}}" Foreground="#DE000000" FontFamily="Segoe WP SemiLight" FontSize="21.333" Padding="0,4" LineHeight="2.667" />
</StackPanel>
<Ellipse x:Name="RightArrow" Visibility="{Binding HasSubItems, Converter={StaticResource BoolVisibilityConverter}}" Fill="#FF0202EA" Stroke="Black" HorizontalAlignment="Right" Width="44" Height="44"/>
</Grid>
</StackPanel>
</DataTemplate>

Answer 1

From what I see the problem is that you are applying the storyboard to the whole LongListSelector control instead of the single item. Your VisualStateManager should be placed into a ItemTemplate (DataTemplate).
Unluckily it seems that no hooks are provided from the box, so you'll have to manually manage your item state using VisualStateManager.GoToState method.
First of all you should remove the storyboard assigned to the Selected state of your LongListSelector as this part affects the whole list.
Then you should create simple control with two visual states: Normal and Selected.
<UserControl x:Class="PhoneApp2.CustomLongListSelectorItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Duration="0" To="Red"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="ContentTextBlock" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Margin="12,12">
<TextBlock x:Name="ContentTextBlock" Text="{Binding}" TextWrapping="Wrap"/>
</StackPanel>
</Grid>
</UserControl>
Then add this control to your DataTemplate as below:
<phone:LongListSelector x:Name="ListSelector" SelectionChanged="HandleSelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<phoneApp2:CustomLongListSelectorItem/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
And finally you will have to add little code to the code-behind of your page that will manage the states of your custom control.
Basically you need to implement the HandleSelectionChanged method and GetItemsRecursive as a little helper to easily get control`s children.
private void HandleSelectionChanged(Object sender, SelectionChangedEventArgs e)
{
var userControlList = new List<CustomLongListSelectorItem>();
GetItemsRecursive(ListSelector, ref userControlList);
// Selected.
if (e.AddedItems.Count > 0 && e.AddedItems[0] != null)
{
foreach (var userControl in userControlList)
{
if (e.AddedItems[0].Equals(userControl.DataContext))
{
VisualStateManager.GoToState(userControl, "Selected", true);
}
}
}
// Unselected.
if (e.RemovedItems.Count > 0 && e.RemovedItems[0] != null)
{
foreach (var userControl in userControlList)
{
if (e.RemovedItems[0].Equals(userControl.DataContext))
{
VisualStateManager.GoToState(userControl, "Normal", true);
}
}
}
}
public static void GetItemsRecursive<T>(DependencyObject parents, ref List<T> objectList) where T : DependencyObject
{
var childrenCount = VisualTreeHelper.GetChildrenCount(parents);
for (int i = 0; i < childrenCount; i++)
{
var child = VisualTreeHelper.GetChild(parents, i);
if (child is T)
{
objectList.Add(child as T);
}
GetItemsRecursive(child, ref objectList);
}
}
The code provided above is mostly from this sample Highlight a selected item in the LongListSelector on WP8. It might be slightly different from the sample as I wanted to make sure this will work properly.