Как создать границу вокруг LongListSelector SelectedItem

Я хотел бы создать рамку вокруг выбранного элемента в пределахLongListSelector, но у меня проблемы с получением правильной реализации. От ссылкиhttp://code.msdn.microsoft.com/wpapps/Highlight-a-selected-item-30ced444 Я пытался следовать примеру кода, создавая пользовательскийStyle управлять изменением выбранного элемента, хотя я пытаюсь разместить рамку вокруг изображения вместо текстового поля. Кроме того, у меня есть обычайItemTemplate Как мойDataTemplate для меняLongListSelector который управляет размером моих связанных изображений и контролирует необходимыйContextMenu за каждый предмет.

По какой-то причине у меня возникают проблемы с адаптацией образца для размещения рамки вокруг выбранного элемента, но до сих пор у меня получилось следующее

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;
    }

Я застрял на том, что делать отсюда, какие-нибудь идеи?

EDIT ** немного изменил реализацию, но все еще не работает.

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

Ответы на вопрос(2)

Ваш ответ на вопрос