Jak utworzyć obramowanie wokół LongListSelector SelectedItem

Chciałbym utworzyć obramowanie wokół aktualnie wybranego elementu w obrębieLongListSelector, ale mam problem z poprawną implementacją. Od odniesieniahttp://code.msdn.microsoft.com/wpapps/Highlight-a-selected-item-30ced444 Próbowałem śledzić przykładowy kod, tworząc niestandardowyStyle aby zarządzać zmianą wybranego elementu, chociaż próbuję umieścić obramowanie wokół obrazu zamiast pola tekstowego. Mam też zwyczajItemTemplate jako mójDataTemplate dla mnieLongListSelector który zarządza rozmiarem moich oprawionych obrazów i kontroluje wymaganeContextMenu dla każdej pozycji.

Z jakiegoś powodu mam problem z dostosowaniem próbki do umieszczenia obramowania wokół wybranego elementu, ale to, co do tej pory mam, jest następujące

MainPage.xaml

<phone:PhoneApplicationPage.Resources>

    <DataTemplate x:Key="ItemTemplate">
        <!--<Border x:Name="brd" CornerRadius="10" BorderBrush="{StaticResource PhoneAccentBrush}" Width="Auto" BorderThickness="3">-->
        <Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3">
            <Viewbox Width="108" Height="108">
                <Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
            </Viewbox>
            <toolkit:ContextMenuService.ContextMenu>
                <toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">
                    <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit" Click="editContextMenuItem_Click"/>
                    <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite" Click="favoriteContextMenuItem_Click"/>
                    <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete" Click="deleteContextMenuItem_Click"/>
                </toolkit:ContextMenu>
            </toolkit:ContextMenuService.ContextMenu>
        </Border>
    </DataTemplate>

</phone:PhoneApplicationPage.Resources>

...

<phone:LongListSelector x:Name="Recent" Margin="0" 
                                    Style="{StaticResource MyLongListSelectorStyle}"
                                    SelectionChanged="recent_SelectionChanged" 
                                    toolkit:TiltEffect.IsTiltEnabled="True"
                                    LayoutMode="Grid" GridCellSize="108,108"
                                    ItemTemplate="{StaticResource ItemTemplate}"
                                    />

App.xaml

<Style x:Key="MyLongListSelectorStyle" TargetType="phone:LongListSelector" >
        <!--<Setter Property="LayoutMode" Value="List"/>-->
        <Setter Property="LayoutMode" Value="Grid"/>
        <!--<Setter Property="FontFamily" Value="Times New Roman"/>-->
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <UserControl>
                        <Border x:Name="MyBorder" Background="Transparent">
                            <VisualStateManager.VisualStateGroups  >
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MyBorder">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!--<StackPanel>
                                <TextBlock x:Name="textBlock" Text="{Binding}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>-->
                        </Border>
                    </UserControl>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

MainPage.xaml.cs

private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var s = sender as LongListSelector;
        var item = (sender as LongListSelector).SelectedItem;
        if (item == null)
            return;

        // Get item of LongListSelector.
        List<UserControl> listItems = new List<UserControl>();
        GetItemsRecursive<UserControl>(Recent, ref listItems);

        // Selected.
        if (e.AddedItems.Count > 0 && e.AddedItems[0] != null)
        {
            foreach (UserControl userControl in listItems)
            {
                if (e.AddedItems[0].Equals(userControl.DataContext))
                {
                    VisualStateManager.GoToState(userControl, "Selected", true);
                }
            }
        }
        // Unselected.
        if (e.RemovedItems.Count > 0 && e.RemovedItems[0] != null)
        {
            foreach (UserControl userControl in listItems)
            {
                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<T>(child, ref objectList);
        }

        return;
    }

Utknąłem na tym, co robić tutaj, jakieś pomysły?

EDIT ** nieznacznie zmienił implementację, ale nadal nie działa.

MainPage.xaml

<phone:PhoneApplicationPage.Resources>

    <Style x:Key="MyLongListSelectorStyle" TargetType="phone:LongListSelector" >
        <!--<Setter Property="LayoutMode" Value="List"/>-->
        <Setter Property="LayoutMode" Value="Grid"/>
        <!--<Setter Property="FontFamily" Value="Times New Roman"/>-->
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <UserControl>
                        <!--<Border x:Name="MyBorder" Background="Transparent">-->
                        <Border x:Name="MyBorder" Background="Transparent">
                            <VisualStateManager.VisualStateGroups  >
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MyBorder">-->
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="brd">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3">
                                <!--<Border x:Name="brd" CornerRadius="10" Width="Auto" BorderThickness="3">-->
                                <Viewbox Width="108" Height="108">
                                    <Image x:Name="recentImage" Source="{Binding Source}" Margin="6,6" Width="108"/>
                                </Viewbox>
                                <toolkit:ContextMenuService.ContextMenu>
                                    <toolkit:ContextMenu x:Name="imgListContextMenu" Background="{StaticResource PhoneChromeBrush}">
                                        <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="edit" Click="editContextMenuItem_Click"/>
                                        <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="favorite" Click="favoriteContextMenuItem_Click"/>
                                        <toolkit:MenuItem Foreground="{StaticResource PhoneForegroundBrush}" Header="delete" Click="deleteContextMenuItem_Click"/>
                                    </toolkit:ContextMenu>
                                </toolkit:ContextMenuService.ContextMenu>
                            </Border>
                            <!--<StackPanel>
                                <TextBlock x:Name="textBlock" Text="{Binding}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>-->
                        </Border>
                    </UserControl>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

...

<phone:LongListSelector x:Name="Recent" Margin="0" 
                                    Style="{StaticResource MyLongListSelectorStyle}"
                                    SelectionChanged="recent_SelectionChanged" 
                                    toolkit:TiltEffect.IsTiltEnabled="True"
                                    LayoutMode="Grid" GridCellSize="108,108"

                                    />

MainPage.xaml.cs

//remains the same

questionAnswers(2)

yourAnswerToTheQuestion