Question

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

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

Answer 1

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

以下是一个示例：WPF MVVM hierarchy selected item

Answer 2

更新我在一些可以找到here和here的博文中增强了我的解决方案。新版本允许使用MVVM的更通用的方法。

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

数据模板：

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

ItemsControl：

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

这会自动删除并创建每个选择级别的ListBoxes。有点syling，看起来也很漂亮！

WPF Miller专栏

2 个答案: