In this blog, We will create a photo viewer and editor .NET MAUI desktop application and integrate the menu bar in it.
Create photo viewer and editor app
Step 1: First, create a simple .NET MAUI Preview 14 application using Visual Studio.
Step 2: Menus can only appear on Shell and NavigationPage. For this example, I am choosing to use the NavigationPage to display the menu. So, load the MainPage as the NavigationPage.
public partial class App : Application
{
public App()
{
InitializeComponent();MainPage = new NavigationPage(new MainPage());
}
}Step 3: Now, declare the MenuBarItems collection in the Content page to display the menu.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MenuBarUIApplication.MainPage"
BackgroundColor="{DynamicResource SecondaryColor}">
<ContentPage.MenuBarItems></ContentPage.MenuBarItems>
</ContentPage>Step 4: Then, add the necessary items to the MenuBarItems collection to display them on the menu. In this photo viewer and editor application, I am going to add File and Edit menus. File menu will contain the options Open, Save, and Exit, and the Edit menu will contain Rotate, Zoom, and Reset.
Refer to the following code example.
<ContentPage.MenuBarItems>
<MenuBarItem Text="File">
<MenuFlyoutItem Text="Open" Clicked="MenuFlyoutItem_Clicked" />
<MenuFlyoutItem Text="Save" />
<MenuFlyoutItem Text="Exit" />
</MenuBarItem>
<MenuBarItem Text="Edit">
<MenuFlyoutSubItem Text="Rotate">
</MenuFlyoutSubItem>
<MenuFlyoutItem Text="Zoom" Clicked="MenuFlyoutItem_Clicked_5" />
<MenuFlyoutItem Text="Reset" Clicked="MenuFlyoutItem_Clicked_6" />
</MenuBarItem>
</ContentPage.MenuBarItems>Step 5: Now let’s add cascading menu items to the MenuBarItem. First, I add a submenu to the Rotate MenuBarItem. The Rotate menu will have the options Rotate 90, Rotate 180, Rotate 270, and Rotate 360 as cascading menus.
Refer to the following code.
<ContentPage.MenuBarItems>
<MenuBarItem Text="File">
<MenuFlyoutItem Text="Open" Clicked="MenuFlyoutItem_Clicked" />
<MenuFlyoutItem Text="Save" />
<MenuFlyoutItem Text="Exit" />
</MenuBarItem>
<MenuBarItem Text="Edit">
<MenuFlyoutSubItem Text="Rotate">
<MenuFlyoutItem Text="Rotate 90" Clicked="MenuFlyoutItem_Clicked_1"/>
<MenuFlyoutItem Text="Rotate 180" Clicked="MenuFlyoutItem_Clicked_2"/>
<MenuFlyoutItem Text="Rotate 270" Clicked="MenuFlyoutItem_Clicked_3"/>
<MenuFlyoutItem Text="Rotate 360" Clicked="MenuFlyoutItem_Clicked_4"/>
</MenuFlyoutSubItem>
<MenuFlyoutItem Text="Zoom" Clicked="MenuFlyoutItem_Clicked_5" />
<MenuFlyoutItem Text="Reset" Clicked="MenuFlyoutItem_Clicked_6" />
</MenuBarItem>
</ContentPage.MenuBarItems>Step 6: Now, add an Image control as the content of the ContentPage within a grid to clip the bounds. The Image control can be used to view and edit the photos.
Refer to the following code example.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MenuBarUIApplication.MainPage"
BackgroundColor="{DynamicResource SecondaryColor}">
<ContentPage.MenuBarItems>
<MenuBarItem Text="File">
<MenuFlyoutItem Text="Open" Clicked="MenuFlyoutItem_Clicked" />
<MenuFlyoutItem Text="Save" />
<MenuFlyoutItem Text="Exit" />
</MenuBarItem>
<MenuBarItem Text="Edit">
<MenuFlyoutSubItem Text="Rotate">
<MenuFlyoutItem Text="Rotate 90" Clicked="MenuFlyoutItem_Clicked_1"/>
<MenuFlyoutItem Text="Rotate 180" Clicked="MenuFlyoutItem_Clicked_2"/>
<MenuFlyoutItem Text="Rotate 270" Clicked="MenuFlyoutItem_Clicked_3"/>
<MenuFlyoutItem Text="Rotate 360" Clicked="MenuFlyoutItem_Clicked_4"/>
</MenuFlyoutSubItem>
<MenuFlyoutItem Text="Zoom" Clicked="MenuFlyoutItem_Clicked_5" />
<MenuFlyoutItem Text="Reset" Clicked="MenuFlyoutItem_Clicked_6" />
</MenuBarItem>
</ContentPage.MenuBarItems><Grid IsClippedToBounds="True">
<Image x:Name="photoViewerImage"
Source="dotnet_bot.png"
HorizontalOptions="Center" />
</Grid>
</ContentPage>Step 7: Last, add the code-behind logic for the MenuBarItems to perform their respective actions. I am using the FilePicker from .NET MAUI Preview 14, which offers a UI to pick files in desktop platforms. Also, I am using the ViewExtensions.RotateTo and ViewExtensions.ScaleTo methods of the Image control to perform rotate and zoom actions, respectively.
private async void MenuFlyoutItem_Clicked(object sender, EventArgs e)
{
var result = await OpenPicker(PickOptions.Images);
}
async Task<FileResult> OpenPicker(PickOptions imageOption)
{
try
{
var value = await FilePicker.PickAsync(imageOption);
if (value != null)
{
if (value.FileName.EndsWith("png",
StringComparison.OrdinalIgnoreCase) ||
value.FileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase))
{
var stream = await value.OpenReadAsync();
this.photoViewerImage.Source = ImageSource.FromStream(() =>
stream);
}
}
return value;
}
catch (Exception ex)
{
}
return null;
}
private void MenuFlyoutItem_Clicked_1(object sender, EventArgs e)
{
this.photoViewerImage.RotateTo(90, 500, Easing.BounceIn);
}
private void MenuFlyoutItem_Clicked_2(object sender, EventArgs e)
{
this.photoViewerImage.RotateTo(180, 500, Easing.BounceIn);
}
private void MenuFlyoutItem_Clicked_3(object sender, EventArgs e)
{
this.photoViewerImage.RotateTo(270, 500, Easing.BounceIn);
}
private void MenuFlyoutItem_Clicked_4(object sender, EventArgs e)
{
this.photoViewerImage.RotateTo(360, 500, Easing.BounceIn);
}
private void MenuFlyoutItem_Clicked_5(object sender, EventArgs e)
{
this.photoViewerImage.ScaleTo(2, 500, Easing.BounceOut);
}
private void MenuFlyoutItem_Clicked_6(object sender, EventArgs e)
{
this.photoViewerImage.ScaleTo(1, 500, Easing.BounceOut);
this.photoViewerImage.RotateTo(0, 500, Easing.BounceIn);
}Now, the simple .NET MAUI Preview 14 Photo Viewer and Editor is ready, with menus using MenuBarItems.
MenuBarItem using .NET MAUI Preview 14
GitHub reference
Also, you can check out our full example of Creating a Menu Bar UI with .NET MAUI Preview 14 on GitHub.
Syncfusion compatibility with .NET MAUI Preview 14
Syncfusion .NET MAUI controls will be compatible with .NET MAUI Preview 14 in our Essential Studio for .NET MAUI 2022 Volume 1 release. This release is expected to be rolled out by the end of March. You can install our control package from NuGet Gallery and use it in your .NET MAUI Preview 14 application then.
Source: Medium - Rajeshwari Pandinagarajan
The Tech Platform