放弃完整的手风琴功能
如果您可以在没有完整的手风琴的情况下生活,您可以通过使用 TabControl 和备用布局 (TabStripPlacement="Left") 轻松完成与您想要的类似的事情。
看到这个问题(和我的 cmets 一样):Create Tabbed Sidebar with sections WPF
现有库
现有的 WPF 控件库带有手风琴:
DIY
您也可以尝试使用TreeView 来实现您的手风琴。您只需要掌握一些技巧即可完成此操作:
首先,您需要隐藏树形视图按钮。他们会搞砸我们正在努力完成的工作。看到这个问题 - Treeview hide [+] [-] buttons
其次,如果选择了TreeViewItem 或其子项之一,您要确保将IsExpanded 属性设置为true,否则设置为false。您可以将IMultiValueConverter 与Style 结合使用以实现TreeViewItem。
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1">
<!-- ... -->
<TreeView>
<TreeView.Resources>
<local:SelectedItemToIsChildConverter x:Key="isChildConverter" />
<Style TargetType="{x:Type TreeViewItem}">
<Style.Setters>
<Setter Property="IsExpanded">
<Setter.Value>
<MultiBinding Converter="{StaticResource isChildConverter}">
<Binding Path="SelectedItem"
RelativeSource="{RelativeSource AncestorType={x:Type TreeView}}" />
<Binding RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</TreeView.Resources>
<!-- Children here, or set ItemsSource property via databinding -->
</TreeView>
这是转换器的代码,在单独的 CS 文件中:
public class SelectedItemToIsChildConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
TreeViewItem selectedItem = values.Length > 0 ? values[0] as TreeViewItem : null;
TreeViewItem targetItem = values.Length > 1 ? values[1] as TreeViewItem : null;
if (targetItem == null)
return false;
TreeViewItem currentItem = selectedItem;
while (currentItem != null)
{
if (currentItem == targetItem)
return true;
currentItem = currentItem.Parent as TreeViewItem;
}
return false;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
在此之后,您必须对其进行样式设置以使其看起来不错,并支持动画。
所有这些都完成后,使用网格来拆分您的 UI。根据选定的树视图项,使用数据绑定在主 UI 区域显示内容。
编辑:
实际上,树视图对于手风琴来说是一个糟糕的基础。我搜索了一些有关手风琴控件的详细信息,结果发现它们往往只有一个层次结构。
考虑到这一描述,使用DataGrid 可能更容易,并利用RowDetails 来扩展您的手风琴视图。
这里有一个简短的教程:http://www.wpftutorial.net/DataGrid.html#rowDetails
只要确保大部分数据网格功能都被禁用即可。