How to nest a ModernMenu in a modernUI WPF application? - wpf

Question

I'm creating a WPF application using the ModernUI framework and I'm having trouble nesting a ModernMenu control in my MainWindow class. Here's what I had initially for my MainWindow:
<mui:ModernWindow x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
xmlns:local="clr-namespace:MyApp"
mc:Ignorable="d"
Title="MyApp" IsTitleVisible="True" Height="350" Width="525" WindowState="Maximized" ContentSource="/Views/SourcePage1.xaml">
<mui:ModernWindow.MenuLinkGroups >
<mui:LinkGroup x:Name="sourceGroup" DisplayName="Source">
<mui:LinkGroup.Links>
<mui:Link x:Name="sourceLink1" DisplayName="File" Source="/Views/SourcePage1.xaml"/>
<mui:Link x:Name="sourceLink2" DisplayName="Instrumentation" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
</mui:ModernWindow.MenuLinkGroups>
In "SourcePage1.xaml" I try to add a second sub-menu (an instance of ModernMenu):
<UserControl x:Class="MyApp.Views.SourcePage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
xmlns:local="clr-namespace:MyApp.Views"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid x:Name="mainGrid" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="initialSpacer" Grid.Column="0" Background="Transparent" BorderBrush="DimGray" BorderThickness="2">
<Grid>
<Label Content="Ready" FontSize="40" Foreground="DimGray" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<GridSplitter Grid.Column="1" Width="4" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
<mui:ModernMenu Grid.Column="2">
<mui:ModernMenu.LinkGroups>
<mui:LinkGroup DisplayName="Catagory1">
<mui:LinkGroup.Links>
<mui:Link x:Name="catagory1Link" DisplayName="name1" Source="/Views/SettingsPage.xaml"/>
<mui:Link DisplayName="insert" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
<mui:LinkGroup DisplayName="Catagory2">
<mui:LinkGroup.Links>
<mui:Link DisplayName="name1" />
<mui:Link DisplayName="name2" />
<mui:Link DisplayName="name3" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
<mui:LinkGroup DisplayName="Catagory3">
<mui:LinkGroup.Links>
<mui:Link DisplayName="name1" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
</mui:ModernMenu.LinkGroups>
</mui:ModernMenu>
</Grid>
Where "SettingsPage.xaml" is just for testing:
<UserControl x:Class="MyApp.Views.SettingsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
xmlns:local="clr-namespace:MyApp.Views"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid x:Name="mainGrid" Margin="0,10,0,0">
<Label Content = "Hi there!"/>
</Grid>
The MainWindows' ModernMenu shows up and works well. Likewise, the ModernMenu on "SourcePage1.xaml" also shows up just fine, but I cannot seem to be able to assign it any source content. When I click on any of the links that have been assigned content (like "catagory1Link") nothing appears. What could be the problem here? Am I not allowed to nest menus like this?

Answer 1

The ModernMenu doesn't auto navigate the frame, as you stated. You could use a ModernTab instead but it will setup another ModernFrame and that frame is the one the links set the source on.
ModernMenu does have a SelectedLink DependencyProperty though. If you bind it to a property on your usercontrol, you can detect the link click and navigate the frame yourself.
SourcePage1.xaml
<mui:ModernMenu Grid.Column="1" SelectedLink="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=MenuSelectedLink, Mode=OneWayToSource}">
SourcePage1.xaml.cs
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Controls;
using FirstFloor.ModernUI.Presentation;
namespace WpfApp17
{
public partial class SourcePage1 : UserControl, INotifyPropertyChanged
{
public SourcePage1()
{
InitializeComponent();
}
#region Property Link MenuSelectedLink
private Link _MenuSelectedLink;
public Link MenuSelectedLink { get { return _MenuSelectedLink; } set { SetProperty(ref _MenuSelectedLink, value); OnMenuSelectedLinkChanged(); } }
#endregion
private void OnMenuSelectedLinkChanged()
{
if (MenuSelectedLink == null || MenuSelectedLink.Source == null)
return;
// Navigate the frame to the source.
var frame = FirstFloor.ModernUI.Windows.Navigation.NavigationHelper.FindFrame(null, this);
if (frame != null)
{
if (frame.Source != MenuSelectedLink.Source)
frame.Source = MenuSelectedLink.Source;
}
}
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected bool SetProperty<T>(ref T field, T value, [CallerMemberName]string name = null)
{
if (Equals(field, value))
{
return false;
}
field = value;
this.OnPropertyChanged(name);
return true;
}
protected void OnPropertyChanged([CallerMemberName]string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
#endregion
}
}

Answer 2

J.H.'s solution is correct and I've marked it as such. I only changed things a little to get the behavior I was looking for: I created a new UserControl consisting simply of a "ModernMenu" object in the first row of the grid and a "ModernFrame" in the second row. The frame is named "pageFrame". Then, I just add the content directly to pageFrame when the menu link changes in this new UserControls' code-behind file:
private void OnMenuSelectedLinkChanged()
{
if (MenuSelectedLink == null || MenuSelectedLink.Source == null)
return;
// Navigate the frame to the source.
pageFrame.Source = MenuSelectedLink.Source;
}