如何在WPF中创建具有Microsoft Web应用程序样式的菜单

我们的任务是在WPF中设计一个企业应用程序，它将取代具有现代外观的战舰灰色Winforms应用程序。

我们喜欢Microsoft Web应用程序目前拥有的外观和感觉：

我们可以通常的方式在WPF中创建这些菜单：

但是我们会得到一些看起来像Winforms菜单的东西。

我已经看到了一些像这样的令人印象深刻的造型努力，但它们似乎都具有相同熟悉的Winforms形状。 我也看过像MahApps Metro这样的图书馆的菜单，但这些菜单让我们觉得太简单了。

WPF菜单控件是否足够灵活，可以如上图所示进行样式设置，还是应该从堆栈面板和列表构建自定义菜单控件等其他路径？ 有什么权衡？

奖励积分（即赏金）将被授予xaml / code，正是这样。

这个菜单样式的一个例子：
https://www.visualstudio.com/

Answer 1

WPF的设计真的可以改变每个开箱即用的机制/控件（按钮，菜单，树视图等）的外观和行为。 所以，一般来说，最好这样做而不是重写一切。 例如，如果您重新设计自定义菜单，则必须考虑键盘，UI自动化等…

所以，我给你的例子做了一个镜头并尝试构建一个最小的工作样本 – 纯XAML – 模仿VS在线菜单（我还添加了悬浮背景颜色变化，默认情况下不在WPF的菜单中）。

结果如下，如您所见，它看起来非常相似：

这是XAML。 我选择为每个MenuItem使用自定义控件模板。 我认为当你需要真正定制每件商品时它非常实用。

该项目可在github上找到 。

Answer 2

您可能正在寻找一些Wpf主题。

比如http://brianlagunas.com/free-metro-light-and-dark-themes-for-wpf-and-silverlight-microsoft-controls/或者看看那个SO答案： 任何免费的WPF主题？

然后你可能想要用你想要的外观和感觉来定制它。

Answer 3

你可以使用类似的东西： http ： //materialdesigninxaml.net

Answer 4

这是默认菜单，但是白色，您可以通过编辑此样式来更改背景颜色，文本字体，高度以及您想要的所有其他内容。

在这里你的MainWindow.xaml

app.xaml文件中的样式

Answer 5

我会用XAML创建菜单

页面的XAML是这样的：

在代码中：

  private void OnMouseLeftButtonDown(object sender, MouseEventArgs e) { var textBlock = sender as TextBlock; if (textBlock == null) return; var relativePoint = VisualTreeHelper.GetOffset(textBlock);//textBlock.TransformToAncestor(Content).Transform(new Point(0, 0)); //Almost invisible Background - If the user clicks it the menu is hidden var back = new Border{Background = new SolidColorBrush(Color.FromArgb(1,255,255,255))}; back.MouseLeftButtonDown += (o, args) => { Content.Children.Remove(back.Tag as UIElement); Content.Children.Remove(back); }; Content.Children.Add(back); //Build menu var menu = new Border{Background = new SolidColorBrush(Colors.White), Width = 200, Height = 500, BorderBrush = new SolidColorBrush(Colors.Gray), BorderThickness = new Thickness(1), HorizontalAlignment = HorizontalAlignment.Left, VerticalAlignment = VerticalAlignment.Top}; back.Tag = menu; menu.RenderTransform = new TranslateTransform(relativePoint.X, relativePoint.Y + textBlock.ActualHeight + 5); //Do some more styling //Fill Menu here according to the tag of the TextBlock (switch(textBlock.Tag){...} or use a predefined view Content.Children.Add(menu); //Hide the Menu on click - TODO Implement logic to hide menu if a MenuItem was clicked... menu.MouseLeftButtonDown += (o, args) => { Content.Children.Remove(back.Tag as UIElement); Content.Children.Remove(back); }; } 

好的，这是一个非常基本的例子，需要很多改进，但我认为你可以继续…