Question

我有一个ListBox，其中填充了来自隔离存储的图像。允许用户选择图像以对其执行某些动作。要通知用户列表中当前选定的图像，我只是在所选项目周围放置了一个边框。但是，当在列表中选择新图像时，边框也会围绕该图像放置，因此现在两个图像都有边框。我想找到一种方法来删除以前选择的图像的边框，以便只突出显示当前选定的图像。

到目前为止我所拥有的内容如下：

MainPage.xaml中

 <ListBox x:Name="Recent" ItemsSource="{Binding Pictures}" Margin="8" 
                     SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>                            
                        <Border>
                            <Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
</ListBox>

MainPage.xaml.cs中

private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        //Place border round currently selected image
        var lb = sender as ListBox;
        var lbi = lb.ItemContainerGenerator.ContainerFromItem(lb.SelectedItem) as ListBoxItem;

        lbi.BorderThickness = new Thickness(2, 2, 2, 2);
        lbi.BorderBrush = new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"]);

        //Where and how to remove border from previously selected image?
    }

所以，我不确定要做到这一点到底要做什么。如何在列表框中检测先前选定的图像项，或者在将边框添加到当前所选项目之前确定哪个项目具有边框并将其删除？有什么想法或参考？

Answer 1

您只需修改ItemContainer的{{1}}样式即可。
像这样：

ListBox

您的<phone:PhoneApplicationPage.Resources> <Style x:Key="MyStyle" TargetType="ListBoxItem"> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Padding" Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Top"/> <Setter Property ="Foreground" Value="White" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver" /> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" /> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected"/> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="brd" Storyboard.TargetProperty="BorderThickness"> <DiscreteObjectKeyFrame KeyTime="0" Value="2" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="brd" CornerRadius="10" BorderBrush="White" Width="Auto" BorderThickness="{TemplateBinding BorderThickness}"> <Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/> </Border> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </phone:PhoneApplicationPage.Resources>将是：

ListBox

Answer 2

为什么不在客户端为所选项目设置样式，而不是从后面的代码突出显示所选项目。

我的意思是，您可以使用<Style.Triggers>为列表框中的所选项目设置样式。（假设一次只能选择一个项目）

示例代码 - （这会将所选项目的背景设置为白色。您可以在此处应用您的风格）

  <Style x:Name="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Style.Triggers>
            <Trigger Property="Selector.IsSelected" Value="True">
                <Setter Property="Background" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>

Answer 3

你可以这样做。（这只是一个骨架。你必须正确地实现这个类）

    public class MyImage
    {
        public string ImagePath { get; set; }
        public bool IsSelected { get; set; }
    }

将此类的集合设置为列表框的源。当您选择项目标记

时

     IsSelected=true;

请记住，对于所有未选择的项目，此属性应为“false”。

现在可以根据IsSelected属性设置边框可见性。希望这有帮助。

仅突出显示ListBox中当前选定的项目

3 个答案: