0

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

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

主页.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 中检测先前选择的图像项，或者确定哪个项具有边框并在将边框添加到当前选定项之前将其删除？有什么想法或参考吗？

4

3 回答 3

2

您只需要ItemContainer编辑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意愿是：

<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>

于 2013-06-07T12:50:03.260 回答
0

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

我的意思是，您可以使用<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>
于 2013-06-07T06:44:48.880 回答
-1

你可以做这样的事情。（这只是一个骨架。您必须正确实现该类）

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

将此类的集合设置为列表框的来源。当您选择一个项目时

     IsSelected=true;

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

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

于 2013-06-07T06:20:39.790 回答