如何在 LongListSelector 中突出显示所选项目 [英] How to Highlight a Selected Item in LongListSelector

问题描述

我只想在我的 LongListSelector 中围绕当前选定的项目显示一个边框.我已经为 LongListSelector 设置了一个 ItemTemplate，但我不确定如何修改 Border 以便只有当前选定的项目包含边框.

I would like to simply show a border around the currently selected item in my LongListSelector. I have set an ItemTemplate for my LongListSelector, but I am unsure of how to modify the Border so that only the currently selected item contains a border.

MainPage.xaml

MainPage.xaml

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <!-- BorderBrush of all items are currently set to PhoneAccentBrush, need only currently selected item! -->
        <Border x:Name="brd" CornerRadius="10" BorderBrush="{StaticResource PhoneAccentBrush}" 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="delete" Click="deleteContextMenuItem_Click"/>
                </toolkit:ContextMenu>
            </toolkit:ContextMenuService.ContextMenu>
        </Border>
    </DataTemplate>

</phone:PhoneApplicationPage.Resources>

...

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

目前 LongListSelector 中的所有项目都显示边框.我更愿意在后面的代码中修改它，但到目前为止我所拥有的不起作用

Currently all of the items within the LongListSelector show the border. I would prefer to modify this in the code behind, but what I have thus far does not work

MainPage.xaml.cs

MainPage.xaml.cs

private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {            
        var item = sender  as LongListSelector
        item.BorderBrush = App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush;
    }

有什么想法吗?

推荐答案

当您访问所选项目时，您应该将其作为 border 而不是作为 LongListSelector 访问因为这就是您显示每个项目的方式，而 LongListSelector 是容器.你也忘记了第 3 行的分号，我已经为你添加了.

When you access the selected item, you should access it as a border and not as a LongListSelector because that's how you show each item, while the LongListSelector is the container. You also forgot a semi-colon on the 3rd row, I've added it for you.

您的新代码将是:

private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
{            
    var item = sender as Border;
    item.BorderBrush = App.Current
                          .Resources["PhoneAccentBrush"] as SolidColorBrush;
}

这篇关于如何在 LongListSelector 中突出显示所选项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！