【问题标题】:Need help to prepare Main Home Page for WPF application having vertical menu需要帮助为具有垂直菜单的 WPF 应用程序准备主页
【发布时间】:2011-09-22 11:59:18
【问题描述】:

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

如果我已经实现了可以在我的应用程序中重用的应用程序,我会更喜欢,因为我认为这种形式会花费很多时间。另外,作为我是 WPF 新手,我很想就以下几点获得一些指导

  1. 如何在 WPF 中制作类似菜单的向下滑动手风琴,其中也应该有子菜单。前任。报告菜单 - 将包含所有报告的列表,当您单击报告菜单时将显示该列表。如何在 WPF 中完成此操作>

  2. 如何在右侧面板中打开子窗体?我应该在表单中使用哪些控件/组件来托管子表单?

  3. 任何示例应用程序、Web 参考或已经实现的代码都会有很大的帮助,因为我有非常严格的截止日期并且没有时间花太多时间去探索。

【问题讨论】:

  • @Merlyn:谢谢。它提供了一些关于如何继续左栏的信息。但需要更多关于如何处理整个表单的基本信息。
  • @GirishK:该解决方案肯定会解决 1 和 2,并且其中一个答案中有一个示例。如果您希望每个页面有单独的 XAML,则您的页面内容可以是用户控件。至于其余的(如何在标签页中获取内容),只需查看标签页上的教程,例如:switchonthecode.com/tutorials/…
  • @Merlyn :是的,它确实给了我一些尝试的方法。只是想知道,我将如何为选项卡提供向下滑动的方法。有什么想法吗??
  • @ girishk:如同in,在按钮之间显示更多UI,在选项卡栏中,选择其中一个选项卡时?这就有点毛茸茸了。您可以作弊并使用树视图,并使用自定义代码确保一次只扩展一棵树。您还可以使用 WPF 工具包 (wpf.codeplex.com) 中的手风琴。不过,我会小心,因为一些 WPF 工具包控件(特别是数据网格)是一个讨厌的野兽,试图解决所有的错误(2 年前,当我不得不测试一个使用它)。

标签: asp.net wpf windows


【解决方案1】:

放弃完整的手风琴功能

如果您可以在没有完整的手风琴的情况下生活,您可以通过使用 TabControl 和备用布局 (TabStripPlacement="Left") 轻松完成与您想要的类似的事情。

看到这个问题(和我的 cmets 一样):Create Tabbed Sidebar with sections WPF

现有库

现有的 WPF 控件库带有手风琴:

DIY

您也可以尝试使用TreeView 来实现您的手风琴。您只需要掌握一些技巧即可完成此操作:

首先,您需要隐藏树形视图按钮。他们会搞砸我们正在努力完成的工作。看到这个问题 - Treeview hide [+] [-] buttons

其次,如果选择了TreeViewItem 或其子项之一,您要确保将IsExpanded 属性设置为true,否则设置为false。您可以将IMultiValueConverterStyle 结合使用以实现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

只要确保大部分数据网格功能都被禁用即可。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-07
    • 1970-01-01
    • 1970-01-01
    • 2021-01-29
    相关资源
    最近更新 更多