wpf - WPF 米勒列

Question

我很难在 WPF 中实现Miller Column接口，并且想知道是否有人看过我可以借鉴的实现。我已经进行了一些搜索，但自己找不到任何东西。

目前，我将数据组织在层次结构中，以便可以将其放置在 TreeView 中，但我想在我的程序中添加 Miller Column 视图作为选项。

Answer 1

Miller Columns 的 UI 看起来像多个链接的 ListBox 控件。

这是一个示例：WPF MVVM 层次结构选定项

Answer 2

更新 我在几篇博文中增强了我的解决方案，可以在此处和此处找到。新版本允许使用 MVVM 的更通用的方法。

我想到了一个可能的解决方案，Phil 证实这是正确的方法。我必须使用带有水平 StackPanel 的 ItemsControl 作为 ItemsPanel。然后，我为我的数据类型创建了一个 DataTemplate，并将它用于我的 ItemsControl 上的 ItemTemplate。

数据模板：

<DataTemplate x:Key="DataNodeStackedDataTemplate" DataType="my:DataNode">
    <ListBox ItemsSource="{Binding Children}"
             Style="{StaticResource StackedListBoxStyle}"/>
</DataTemplate>

项目控制：

<ItemsControl x:Name="MillerColumnsView" VerticalContentAlignment="Stretch"
              ItemTemplate="{StaticResource DataNodeStackedDataTemplate}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

代码隐藏：

private void StackedListBox_SelectionChanged(object sender,
                                             SelectionChangedEventArgs e)
{
    var lb = sender as ListBox;
    if (lb == null) return;
    var dn = lb.DataContext as DataNode;
    if (dn == null) return;
    int index = MillerColumnsView.Items.IndexOf(dn);
    if (index == -1) return;
    index++;
    while (MillerColumnsView.Items.Count > index)
        MillerColumnsView.Items.RemoveAt(index);
    if (dn.Children == null) return;
    // this Select() call performs some restructuring of the tree to 
    // appropriate display the correct nodes in the next ListBox
    dn.Select(dn.AvailableItems.ElementAt(lb.SelectedIndex));
    if (dn.Children.Count() == 0) return;
    MillerColumnsView.Items.Add(dn.Children.ElementAt(0));
}

这会自动删除并为每个选择级别创建列表框。一点syling，它也可以看起来很漂亮！