像WPF中的Windows資源管理器LIstView keyborad導航

Question

我希望在Windows資源管理器的IconView中有鍵盤導航，即如果我們移動到屏幕寬度的末端，應移動到下一行....

<ListView Name="lv" 
       Grid.Row="1" 
       Width="Auto" 
       Height="Auto" 
       IsTextSearchEnabled="True" 
       ItemsSource="{Binding Path=Persons}" 
       KeyboardNavigation.DirectionalNavigation="Continue" 
       SelectedItem="{Binding Path=SelectedPerson}" 
       SelectionMode="Single" 
       View="{StaticResource ResourceKey=plainView}"> 
     <ListView.Resources> 
      <Style TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource {x:Type ListViewItem}}"> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding Path=IsSelected}" Value="True"> 
         <Setter Property="IsEnabled" Value="False"></Setter>  
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </ListView.Resources> 
    </ListView> 

Here is the Code for what i am trying

Answer 1

在你Generic.xaml定義ListView的默認樣式如下：

<Style TargetType="{x:Type ListView}"> 
     <Setter Property="SnapsToDevicePixels" Value="true" />   
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Visible" /> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible" /> 
     <Setter Property="ScrollViewer.CanContentScroll" Value="True" /> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     <Setter Property="VerticalContentAlignment" Value="Center" /> 
     <Setter Property="FontFamily" Value="Trebuchet MS" /> 
     <Setter Property="FontSize" Value="12" /> 
     <Setter Property="BorderBrush" Value="{DynamicResource ControlBorderBrush}" /> 
     <Setter Property="BorderThickness" Value="1" /> 
     <Setter Property="Padding" Value="1" /> 
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ListView}"> 
        <Grid> 
         <Border x:Name="Border" 
           Background="{DynamicResource ControlBackgroundBrush}" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           CornerRadius="1"> 
          <ScrollViewer Margin="{TemplateBinding Padding}" IsTabStop="False">         
            <ItemsPresenter/> 
          </ScrollViewer> 
         </Border> 
         <Border x:Name="DisabledVisualElement" 
           Background="#A5FFFFFF" 
           BorderBrush="#66FFFFFF" 
           BorderThickness="1" 
           IsHitTestVisible="false" 
           Opacity="0" /> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter TargetName="DisabledVisualElement" Property="Opacity" Value="1" /> 
         </Trigger> 
         <Trigger Property="IsGrouping" Value="true"> 
          <Setter Property="ScrollViewer.CanContentScroll" Value="false" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value > 
       <ItemsPanelTemplate> 
        <WrapPanel Height="{Binding ActualHeight, 
                  RelativeSource={RelativeSource AncestorType=Border}}" 
              MinWidth="{Binding (ListView.View).MinWidth, 
                   RelativeSource={RelativeSource Mode=FindAncestor, 
                          AncestorType={x:Type ListView}}}" 
              Focusable="False" 
              IsItemsHost="True" 
           KeyboardNavigation.DirectionalNavigation="Contained" 
              ItemWidth="{Binding (ListView.View).ItemWidth, 
                   RelativeSource={RelativeSource Mode=FindAncestor, 
                           AncestorType={x:Type ListView}}}"           
              Orientation="Vertical" /> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

一點解釋：你WrapPanel正在採取幾乎無限的ScrollViewer的所有可用尺寸。如果您希望您的項目在Vertical WrapPanel中滾動，則應該在Horizo​​ntal - width中限制高度。

Answer 2

我發現要完成的唯一方法是手動解釋在 PreviewKeyDown事件中按下的鍵並設置selectedindex。 您必須將處理設置爲true，否則listview將解釋密鑰，導致錯誤的密鑰導航。

這裏的具有兩個鍵的例子：

private void listView_PreviewKeyDown(object sender, KeyEventArgs e) 
    { 
     if (listView.SelectedIndex >= 0) 
     { 
     if (e.Key == Key.Right) 
     { 
      listView.SelectedIndex++; 
     } 
     if (e.Key == Key.Left) 
     { 
      listView.SelectedIndex--; 
     } 
     e.Handled = true; 
     } 
    } 

編輯：

xmlns:mvvmLight="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    > 
<Grid> 
<ListView SelectedIndex="{Binding SelectedIndex}" ItemsSource="{Binding Items}" x:Name="listView"> 
    <i:Interaction.Triggers> 
    <i:EventTrigger EventName="PreviewKeyDown"> 
     <mvvmLight:EventToCommand PassEventArgsToCommand="True" Command="{Binding PreviewKeyDownCommand}"></mvvmLight:EventToCommand> 
    </i:EventTrigger> 
    </i:Interaction.Triggers> 

視圖模型：

public ICommand PreviewKeyDownCommand 
{ 
    get 
    { 
    return new RelayCommand<Object>(x => this.PreviewKeyDown(x as KeyEventArgs)); 
    } 
} 

private void PreviewKeyDown(KeyEventArgs e) 
{ 
    if (SelectedIndex >= 0) 
    { 
    if (e.Key == Key.Right) 
    { 
     SelectedIndex++; 
    } 
    if (e.Key == Key.Left) 
    { 
     SelectedIndex--; 
    } 
    } 
    e.Handled = true; 
} 

private int _selectedIndex; 

public int SelectedIndex 
{ 
    get { return _selectedIndex; } 
    set 
    { 
    _selectedIndex = value; 
    NotifyPropertyChanged("SelectedIndex"); 
    } 
} 

使用MVVMLight工具包

XAML 100％純MVVM方式