Native view of a MenuBar (UWP) or Menu (WPF) using Xamarin.Forms?

Question

I'm fairly new to Xamarin.Forms. I've been writing a cross-platform application for mobiles and Desktop (UWP and WPF) that shares the same UI, except for some native controls that are only rendered for the Desktop App. In particular, I would like to include a MenuBar (UWP) or a Menu (WPF), for the desktop app to resemble more traditional application.

I've been trying to use a native view as in https://learn.microsoft.com/es-es/xamarin/xamarin-forms/platform/native-views/xaml, but so far with no success.

The code for my XAML file is something like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="SubclassedNativeControls.SubclassedNativeControlsPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:winControls="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows">

    <ContentView x:Name="MenuContent">
        <winControls:MenuBar>
            <winControls:MenuBarItem Title="File">
                <winControls:MenuFlyoutItem Text="New" />
                <winControls:MenuFlyoutItem Text="Open" />
                <winControls:MenuFlyoutItem Text="Edit" />
            </winControls:MenuBarItem>
        </winControls:MenuBar>
    </ContentView>

</ContentPage>

But then an exception is thrown:

Can not set the content of winControls:MenuBarItem as it doesn't have a ContentPropertyAttribute'

I've also tried to access the MenuBar using the codeview that contains the MenuBar, and populate it from the C# side, but then nothing is rendered in the UWP app:

#if WINDOWS_UWP
            // MenuBarItem creation
            MenuBarItem menuBarItem = new MenuBarItem{ Title = "File"};

            menuBarItem.Items.Add(new MenuFlyoutItem(){ Text = "New"});
            menuBarItem.Items.Add(new MenuFlyoutItem(){ Text = "Open"});

            // Access to the menuBar
            var menuContent = (Xamarin.Forms.Platform.UWP.NativeViewWrapper)MenuContent.Content;
            var menubarControl = (Windows.UI.Xaml.Controls.MenuBar)menuContent.NativeElement;

            menubarControl.Items.Add(menuBarItem);
#endif

I'm aware that it is possible to use menuBars as in Xamarin.Forms: Platform-indepenent application menu, but since I'm requiring a WPF application too (using Xamarin.Forms.WPF) a native view seems looks like the most interesting approach.

score 0 · Accepted Answer · answered Apr 22 '20 at 15:00

I think that problem is that as said in this post you cannot use Menubar directly. You should better create a platform specific renderer and bring it to the Shared project with Dependency Injection and use it like that. See the post for more details.

Native view of a MenuBar (UWP) or Menu (WPF) using Xamarin.Forms?

1 Answers1