僅在列表框中突出顯示當前選中的項目

Question

我有一個列表框，其中裝有來自隔離存儲中的圖像。 允許用戶選擇圖像以對其執行一些操作。 為了通知用戶列表中當前選擇的圖像，我只是在選擇的項目周圍放置了邊框。 但是，當在列表中選擇新圖像時，邊框也將圍繞該圖像放置，因此現在兩個圖像都具有邊框。 我想找到一種方法來刪除以前選擇的圖像的邊框，以便僅突出顯示當前選擇的圖像。

到目前為止，我所擁有的如下：

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

您只需要編輯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>

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屬性設置邊框的可見性。希望這會有所幫助。