"Two-dimensional" UserControl

本文关键字：quot UserControl Two-dimensional | 更新日期: 2023-09-27 18:20:55

我正在尝试实现一个自定义用户控件。

让我们考虑ViewModels:

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

我想让UserControl以这种方式（两种方式）显示这样的ViewModels：

1）二维列表式控件。

2）二维盖流式控制。

请注意，每个文件都有它的缩略图，每个目录都会记住上次查看的文件。如果未选择目录，则目录应显示上次查看的文件缩略图（作为自己的缩略图）。

使用左右键和适当的按钮可以更改目录选择。使用上下键和适当的按钮可以更改文件选择。

有人实现过这样的二维UserControl吗？

谨致问候，Serge。

"Two-dimensional" UserControl

我可以想出两种方法来处理它，但我现在没有编译器来测试这两种方法。

  • 方法一是覆盖类似ListBox的模板（因为您想跟踪SelectedItem），以便SelectedItem始终位于同一位置。更改SelectedItem（通过鼠标或箭头键）只需将新项目移动到列表的中心即可。

    这可以用于"文件"answers"目录"。使目录使用水平版本的模板，并使SelectedItem的ItemTemplate（使用DataTrigger）包含垂直版本的文件模板。

  • 我可以想到的另一种方法是使用ItemsControls和显示下一个/前三个文件/目录的子集合。

    您可以使用Linq语句来获取基于初始集合和当前项的上一个/下一个集合。例如，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>
相关文章：