Erstellen eines Rahmens um LongListSelector SelectedItem
Ich möchte einen Rahmen um das aktuell ausgewählte Element in einem erstellenLongListSelector, aber ich habe Probleme, die richtige Implementierung zu finden. Vom Referenzierenhttp://code.msdn.microsoft.com/wpapps/Highlight-a-selected-item-30ced444 Ich habe versucht, dem Beispielcode zu folgen, indem ich eine benutzerdefinierte Datei erstellt habeStyle um das ausgewählte Element zu verwalten, ändern, obwohl ich versuche, einen Rahmen um ein Bild anstelle eines Textfelds zu platzieren. Ich habe auch einen BrauchItemTemplate als meineDataTemplate für meinLongListSelector das verwaltet die größe meiner gebundenen bilder und steuert ein erforderlichesContextMenu für jeden Gegenstand.
Aus irgendeinem Grund habe ich Probleme, das Muster so anzupassen, dass es einen Rand um ein ausgewähltes Element legt. Bisher habe ich jedoch Folgendes
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;
}
Ich habe keine Ahnung, was ich von hier aus tun soll.
EDIT ** hat die Implementierung leicht verändert, funktioniert aber immer noch nicht.
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