Hide navigation menu on desktop when displaying a specific page #33
Description
Hey, allow me to start by saying that I love the work this package does. From what I've seen Avalonia UI is a rather mature framework and I can't believe that there isn't such a straightforward navigation system by default yet, I hope the development team is inspired by this project.
Onto the issue at hand. I am targeting desktop environments with my Avalonia application and unless I should RTFM harder, I haven't found a way to cleanly hide the navigation menu when rendering a specific page. I have taken heavy inspiration from the sample provided in the repo to get to where I am so hopefully it's easy to follow along.
In my use case, I would like to display a login page when the application starts and this is what I have in my main view:
<ShellView x:Name="MainShellView" DefaultRoute="/login">
<Route Path="login" Page="v:LoginView"/>
</ShellView>
LoginView.axaml
<Page
xmlns="https://github.com/avaloniaui"
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:vm="clr-namespace:App.ViewModels"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="App.Views.LoginView"
x:DataType="vm:LoginViewModel"
NavigationBar.Visible="False"
>
<StackPanel>
<Label Content="Username"/>
<TextBox Text="{Binding Username}"/>
<Label Content="Password"/>
<TextBox Text="{Binding Password}" PasswordChar="*"/>
<Button Content="Login" Command="{Binding LoginCommand}"/>
</StackPanel>
</Page>
This is what I see when I start the application:
Given that I ran the example application before starting with mine, I was expecting NavigationBar.Visible="False" to hide the navigation menu completely, like what you see when you start the example application. On a second examination I see that the navigation bar refers to the actual bar where you have a title, hamburger icon, etc. and that makes sense. But nevertheless it feels like this functionality is missing.
Running the example application again I noticed that when you increase the width of the window to resemble other traditional desktop applications, I run into the same issue:
After thinking for some time I thought I would set the ScreenSideMenuBehave to Closed in my ShellView and override InitialiseAsync in LoginView.axaml.cs to be able to pass the ShellView to my ViewModel.
public override Task InitialiseAsync(CancellationToken cancellationToken)
{
DataContext = new LoginViewModel(Shell!);
return base.InitialiseAsync(cancellationToken);
}
Then, inside my LoginViewModel I have a function which sets the ShellView behaviour so that it can be seen and used after the user's credentials have been validated and they're redirected to the home page.
private void EnableShellSideMenu()
{
shellView.SmallScreenSideMenuBehave = ShellView.SideMenuBehaveType.Default;
shellView.MediumScreenSideMenuBehave = ShellView.SideMenuBehaveType.Default;
shellView.LargeScreenSideMenuBehave = ShellView.SideMenuBehaveType.Keep;
}
While this works for the most part, it destroys any idea of using DI in my ViewModel as I would use something along the lines of IdentityService to log a user in, log them out, get the current user, etc.
So to summarise, is there any way to completely hide the menu when displaying a particular view? And, how would one go about injecting dependencies into the ViewModels, preferrably using Microsoft.Extensions.DependencyInjection, while using this Shell package for navigation?
Thank you for your time