Question

enter image description here

斐伊川，我正在创建一个WPF应用程序。我的主页看起来就像我在图片中显示的那样。我将拥有以下组件： 1. Topbar 2.左栏 - 向下滑动菜单，如手风琴，如果有任何子菜单项，将在选择时向下滑动，否则在选择时它将显示相关的表格。 3.主面板 - 我将打开我的孩子表格 4.底栏。

我希望如果我已经实现了可以在我的应用程序中重用的应用程序，因为我认为这种形式将花费很多时间。此外，作为我是WPF的新手，我希望对以下几点有一些指导

如何在WPF中制作像菜单一样的滑盖手风琴，它也应该包含子菜单。恩。报告菜单 - 将包含其中所有报告的列表，当您单击报告菜单时将显示该报告。如何在WPF＆gt;
如何在右侧面板中打开子窗体？我应该在表单中使用哪些控件/组件来托管子表单？
任何示例应用程序，Web引用或已经实现的代码都会有很大的帮助，因为我有非常严格的截止日期，并且不会花太多时间去探索。

Answer 1

放弃完整的手风琴功能

如果你没有一个完整的手风琴就可以生活，你可以使用TabControl和其他布局（TabStripPlacement="Left"）轻松完成类似于你想要的东西。

请参阅此问题（与我的评论相同）：Create Tabbed Sidebar with sections WPF

现有资料库

现有的WPF控制库包含手风琴：

WPF Toolkit
Telerik Rad控件 - http://www.telerik.com/products/wpf.aspx（或silverlight / asp.net MVC等）
其他很多人，其中大部分是为了钱......

<强> DIY

您也可以尝试使用TreeView来实现您的手风琴。你需要一些技巧来完成这个：

首先，您需要隐藏树视图按钮。他们会搞砸我们想要完成的事情。请参阅此问题 - Treeview hide [+] [-] buttons

其次，如果选择IsExpanded或其中一个子项，则要确保TreeViewItem属性设置为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

确保禁用大多数数据网格功能。

需要帮助为具有垂直菜单的WPF应用程序准备主页面

1 个答案: