带有 WrapPanel 的 ListBox - 删除项目/箭头键导航答案

【问题标题】：ListBox with WrapPanel - Remove item / arrow key navigation带有 WrapPanel 的 ListBox - 删除项目/箭头键导航
【发布时间】：2014-08-06 02:49:30
【问题描述】：

我的列表框/包装面板箭头导航有一个奇怪的问题。

我的列表框：

<ListBox x:Name="List" 
     IsSynchronizedWithCurrentItem="True"
     SelectedIndex="{Binding MainIndex, Mode=OneWayToSource}"
     SelectedItem="{Binding CurrentFeed, Mode=TwoWay}"
     ItemsSource="{Binding CurrentFeedList}" 
     ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel IsItemsHost="True" MaxWidth="{Binding ActualWidth, ElementName=Panel}" />
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Width="168">
            <Border BorderBrush="White" BorderThickness="0" Margin="0,7,0,0">
                <Image Source="{Binding Image , Converter={StaticResource ByteArraytoImageSource}}" Width="150" Height="213" ></Image>
            </Border>
            <Border BorderBrush="White" BorderThickness="0"  Height="65" HorizontalAlignment="Center" >
                <TextBlock VerticalAlignment="Center" TextWrapping="Wrap"  FontFamily="{StaticResource DefaultFontFamily}" FontSize="15" Text="{Binding Title}" Foreground="White" Cursor="Hand" HorizontalAlignment="Center"  TextAlignment="Center"/>
            </Border>
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

渲染：
_{（来源：free.fr）}

渲染很棒没问题！ ;)

如您所见，它是从 RSS 检索到的壁纸列表。

我绑定了一个快捷方式来读取一个项目，然后将其从 ObservableCollection 中删除：

<UserControl.InputBindings>
    <KeyBinding Key="D" Modifiers="Control" Command="{Binding ReadCmd}" />
</UserControl.InputBindings>

在我的视图模型中：

ObservableCollection<Feed> CurrentFeedList { get; set; }
private Feed _currentFeed;
public Feed CurrentFeed
{
    get { return _currentFeed; }
    set
    {
        _currentFeed = value;
        OnPropertyChanged("CurrentFeed");
    }
}
public ICommand ReadCmd { get; set; }
public int MainIndex { get; set; }

我的 ReadCmd 是一个调用“ReadAction”方法的 RelayCommand。

一开始我只是简单地从 ObservableCollection 中删除项目，但我想按两次 Ctrl+D 来读取 2 个项目。

所以我决定获取列表框的索引，并在删除后选择相同的索引。

private void ReadAction()
{
    int previousIndex = MainIndex;

    if (previousIndex == CurrentFeedList.Count - 1)
        previousIndex -= 1;

    CurrentFeedList.Remove(CurrentFeed);

    CurrentFeed = CurrentFeedList[previousIndex];
}

这是我想要的工作，但仍然存在一个问题，我无法解决它。

当我按下 Ctrl+D 时，SelectedItem 被删除，下一个项目变为 Selected。但是当我使用箭头键导航在列表中导航时，它每次都会跳转到列表的第一项。

我希望它足够清楚。

谢谢。

【问题讨论】：

标签： wpf listbox navigation wrappanel arrow-keys

【解决方案1】：

这个问题是由于当您使用KeyBinding 删除项目时，ListBox 失去焦点，因此在此之后按箭头键会将焦点放在ListBox 的第一项上。

因此，为了使您的箭头键在所选项目上起作用，您还必须将焦点设置在 Listbox 的所选项目上。

有几种方法可以做到这一点，例如使用附加行为将焦点设置在 ListBoxItem 上。最简单的方法是捕获 ListBox 的 SelectionChanged 事件，并在处理程序中将焦点设置在当前选定的项目上，如下所示：

    private void MyListBox_OnSelectionChanged(object sender, RoutedEventArgs e)
    {
       var item =  (ListBoxItem)MyListBox.ItemContainerGenerator.ContainerFromItem(MyListBox.SelectedItem);

       if(item !=null)
          item.Focus();
    }

【讨论】：