"2次元" UserControl

Question

私はカスタムユーザーコントロールを実装しようとしています。

のはのviewmodelsを考えてみましょう：二つの）

1次元のリストのような制御：

public class FileViewModel 
{ 
    public string Name { get; set; } 
    public BitmapSource Thumbnail { get; set; } 
} 

public class DirectoryViewModel 
{ 
    public string Name { get; set; } 
    public ObservableCollection<FileViewModel> Files { get; private set; } 
    public FileViewModel SelectedFile { get; set; } 
} 

は、私はそのようなのviewmodels in this way (two ways)を表示し、ユーザーコントロールを持っていると思います。

2） 2次元カバーフロー様制御。

各ファイルにはサムネイルがあり、各ディレクトリには最後に閲覧したファイルが記憶されています。ディレクトリーが選択されていない場合、ディレクトリーは最後に表示されたファイル・サムネイルを（それ自身のものとして）表示する必要があります。

ディレクトリの選択は、左右キーと適切なボタンを使用して変更されます。 ファイルの選択は、上下キーと適切なボタンを使用して変更されます。

このように2次元のUserControlを実装した人はいますか？

お礼、 Serge。

Answer 1

私はそれに近づく2つの方法を考えることができますが、私はコンパイラを持っていません。 SelectedItemが同じ場所に常にあるように（あなたがSelectedItemを追跡するため）

• 方法は、一つはListBoxのようなもののテンプレートを上書きすることであろう。 SelectedItemを（マウスまたは矢印キーで）変更すると、新しい項目がリストの中央に移動するだけです。

  これは、ファイルとディレクトリの両方に使用できます。ディレクトリの水平バージョンを使用し、SelectedItemのItemTemplate（を使用）に、ファイルのテンプレートの縦型バージョンが含まれているようにします。

• 他のやり方は、ItemsControlsと次の/前の3つのファイル/ディレクトリを示すサブコレクションです。

  Linq文を使用して、最初のコレクションと現在のアイテムに基づいてPrevious/Nextコレクションを取得できます。例えば、MyCollection.Skip(MyCollection.IndexOf(SelectedItem)).Take(3)

<Grid> 
     <RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefintiion Height="Auto" /> 
      <RowDefinition Height="*" /> 
     </RowDefinitions> 
     <ColumnDefinitions> 
      <ColumnDefinition Height="*" /> 
      <ColumnDefinition Height="Auto" /> 
      <ColumnDefinition Height="*" /> 
     </ColumnDefinitions> 

     <!-- Previous 3 Files --> 
     <ItemsControl Grid.Row="0" Grid.Column="1" 
         ItemsSource="{Binding Previous3Files}" 
         ItemTemplate="{StaticResource FileTemplate}" 
         ItemsPanel="{Binding VerticalStackPanel}" /> 

     <!-- Next 3 Files -->  
     <ItemsControl Grid.Row="2" Grid.Column="1" 
         ItemsSource="{Binding Next3Files}" 
         ItemTemplate="{StaticResource FileTemplate}" 
         ItemsPanel="{Binding VerticalStackPanel}" /> 

     <!-- Previous 3 Directories--> 
     <ItemsControl Grid.Row="1" Grid.Column="0" 
         ItemsSource="{Binding Previous3Directories}" 
         ItemTemplate="{StaticResource DirectoryTemplate}" 
         ItemsPanel="{Binding HorizontalStackPanel}" /> 

     <!-- Next3 Directories--> 
     <ItemsControl Grid.Row="1" Grid.Column="2" 
         ItemsSource="{Binding Next3Directories}" 
         ItemTemplate="{StaticResource DirectoryTemplate}" 
         ItemsPanel="{Binding HorizontalStackPanel}" /> 

     <!-- Current Item --> 
     <ContentControl Grid.Row="1" Grid.Column="1" 
         Content="{Binding SelectedFile}" 
         ContentTemplate="{Binding FileTemplate}" /> 
     </ContentControl> 

    </Grid>