只突出显示列表框中当前选定的项目

本文关键字：项目 显示 列表 | 更新日期: 2023-09-27 18:17:16

我有一个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?
    }

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

只突出显示列表框中当前选定的项目

您只需要编辑ListBox的ItemContainer样式。
像这样:

<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将是:

<ListBox x:Name="Recent" ItemsSource="{Binding Pictures}" Margin="8" 
                 SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True" ItemContainerStyle="{StaticResource MyStyle}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

与其在代码后面突出显示选中的项目，不如在客户端为选中的项目设置样式。

我的意思是说，您可以使用<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>

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

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

设置这个类的集合作为列表框的源。选择项目时，标记

     IsSelected=true;

请记住，对于所有未选中的项，此属性应该为"false"。

现在你的边框可见性可以根据IsSelected属性设置。

相关文章：