Menu to be in left side instead of top using RadDockLayout

[Daniel]

Hi,

In the current demo I used app shell,

I want the menu to be in left side instead  of top.

Can I use RadDockLayout for that purposes(all code in main page) ?

Thanks,

[Daniel]

Logo up and footer down.

[Daniel]

Please use this demo,

And please see why I do not see the header and footer.

[Lance | Manager Technical Support]

Hello Daniel,

I've familiar with your application's needs of navigation between pages, DockLayout is not appropriate for your situation.

Instead you should choose one of these options

• Shell => .NET MAUI Shell overview - .NET MAUI | Microsoft Docs
• FlyoutPage => FlyoutPage - .NET MAUI | Microsoft Docs
• TabbedPage => TabbedPage - .NET MAUI | Microsoft Docs

I would recommend Shell in your case because it has the navigation and menu system built into it.

Regards,
Lance | Manager Technical Support
Progress Telerik

[Daniel]

1. But all  our apps are look same way.

2. I need the same layout like in attached screenshot(above).

No possible to keep the same layout ?

3. I have login page => setting page => main page(without go back).

In main page have some pages with option to details page where they have grid.

Is it poosible ?

[Lance | Manager Technical Support]

1 & 2. The FlyoutPage has that appearance, you can just have the sidebar permanently expanded (there is a property to keep it open).

In fact, our CRM demo uses this approach and has that appearance:

• You can see the screenshots of the app in the windows Store here https://apps.microsoft.com/store/detail/telerik-crm/9PBNQZ08R0C8 
• You can see the source code here https://github.com/telerik/telerik-xamarin-forms-samples/tree/master/ArtGalleryCRM 

3. The FlyoutPage has a NavigationPage inside it, which lets you have full control over the app navigation. For example, you can have the LoginPage in the navigation stack, but not show it in the FlyoutPage's menu.

Alternatively, you can just replace the entire root frame by setting App.Current.MainPage to the LoginPage when the app opens, then replace it with the FlyoutPage after login.

 

1. when the app launches:

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new LoginPage();
    }
}


// 2. Then in your LoginPage's logic, you can rest the entire app root

App.Current.MainPage = new MyFlyoutPage(); // or MyShellPage

 

Ultimately, Telerik doesn't have any navigation examples or guidance. For help with this, you will want to leverage your other help resources for Xamarin.Forms/MAUI. There are literally hundreds of demos out there that show the myriads of ways to do do FlyoutPage (which used to be called MasterDetailPage) implementation.

[Lance | Manager Technical Support]

Hi Daniel,

I just checked the Microsoft MAUI project templates and they do not yet have a template for FlyoutPage. As I mentioned previously, Progress Telerik support doesn't cover general programming questions or Microsoft-related problems. However, I see a big hole in the resources that you can use... there just isn't anything available for MAUI

Therefore, to benefit both you and the .NET community, I thought it might be worth spending a few hours recreating a brand new .NET MAUI version of a FlyoutPage project.

Important

It is critical for you to first read through the entire tutorial for how NavigationPage works => FlyoutPage - .NET MAUI | Microsoft Docs. Once you're familiar with FlyoutPage (previously known as 'MasterDetailPage'), you can move on to reviewing my demo.

Demo Details

The example has a login page and a few others to show you how you'd use a NavigationPage as the Detail of the FlyoutPage for normal operations, but also to use the LoginPage.  I also fully simulated a complete login/logout lifecycle and navigation using a mock authenticationService.

Please carefully review the following items to understand the setup:

• MyRootPage - This is a FlyoutPage that has a flyout and a detail.
  • The Flyout property is where the MenuPage goes
  • The Detail is where you put the LoginPage or the NavigationPage
  • The page's code behind has the conditional logic that decides whether or not the user needs to go to LoginPage or to NavigationPage(new DashboardPage)
• MenuPage - This has the menu you see on the left. A selection here  triggers av ebent handler in rootPage's code behind. this is how normal navigation occurs

Here are some screenshot from runtime:

1. At first launch

2. After logging in

3. After navigating to the Routes page. this page is a little different than settings or dashboard. Here you'll see the use of "drill down" navigation when you select any route item

5. on the route detail page... after selecting an item on the previous Routes page

6. After logging out

Important Note: There is no Telerik UI for MAUI usage in the demo. I did this intentionally to illustrate that the features being used are pure Microsoft .NET MAUI.

Option 2 - Review a Real Production-Ready Sample

I also just realized that you might want to take a look at our Xamarin.Forms ERP Sample App. It uses a login screen first, then navigates to the "dashboard" page. However it is a bit more advanced because it uses MVVM Cross framework for navigation and services. Regardless, here are the resources:

• First, install the demo from the Microsoft Store so that you can play with it Telerik ERP - Microsoft Store Applications 
• Then, find the source code here telerik-xamarin-forms-samples/ERP at master

Although what I'm about to do is far outside the scope of Telerik support, I thought it would be worth the effort and couple hours of work because Microsoft doesn't have a MAUI project wizard yet (they will have one that lets you choose Shell, FlyoutPage, etc)

[Daniel]

Thank you very much.

I can't open the sample why  with vs 2022 preview?

I tried to build it from scratch:

var success = (Application.Current as App)?.AuthService?.LogOut();

This code not complied(AuthService)

 

[Lance | Manager Technical Support]

I built the project using VS 2022 Preview (v17.3 Preview 1) and .NET MAUI RC3.

As yo why you can't build it, I can't guess. It is a simple MAUI project with no custom dependencies... everything is restore from NuGet.org.

Please review the Errors panel in Visual Studio and make sure you've restored the NuGet packages (do a Rebuild instead of Build). The AuthService is defined in Appxaml.cs and is an instance of the Services/Authentication.cs class. There's nothing special about that either, you can comment it out if you want.

[Lance | Manager Technical Support]

Quick follow up. As I mentioned yesterday, Microsoft has just published a new training course that will teach you many different things about developing with XAML/C# in .NET MAUI. Find it here => Build mobile and desktop apps with .NET MAUI - Learn.

One of the lessons is specifically about how to use Shell to create a multi-page application:

I would highly recommend doing the previous lessons before this one, but here's the direct link to the lesson Create multi-page .NET MAUI apps with tab and flyout navigation - Learn.

[Daniel]

Thanks again.

We will use this way after i check few things more.

I need after login the user fill the setting page once and after he press continue he move to app and see the dashborad first page. I keep in db flag he login.

After if he logout and login he will reach dashboard page and can also fill the setting page. How is can be done ?

 

[Daniel]

2. Does this bug is no longer exist when we move to this sample?

(https://www.telerik.com/forums/raddatagrid-disappeared-when-switching-views)

[Lance | Manager Technical Support]

For #1, you will need to research and work on that yourself. It is a custom business logic and development lifecycle that is not something you can get from the Telerik controls.

For #2, you will know when a bug is fixed when the bug report is marked as Resolved. Right now, the thread is marked as "under review". If you don't know what bug report I am referring to, it is this one DataGrid Won't Render 2nd Instance (telerik.com) 

[Daniel]

I read all tutorials and  your sample code very closely few times.

if you give some tips it will be great.

[Lance | Manager Technical Support]

I'm not sure what to say honestly, I can just give you some general programming advice like

Before you touch any code, don't even open visual Studio, sit back and completely design the entire application lifecycle on paper (literally with a pen and paper). You'll want to write down exactly what needs to happen, for example, :

• 1) App launches, go to page A
• 2) User logs in, go to page B and store authentication token securely
• 3) User users the app by navigating between multiple pages C, D, E, F
• 3) User logs out, go to Page A

Those kinds of things you have to determine for yourself within the context of your business goals.

As far as navigation functionality goes...

• When using a NavigationPage:
  • To go to a another page, you can use Navigation.PushAsync(new PageA)
  • To navigate back, use: Navigation.PopAsync()
• When using Shell you can use the easier Uri-based navigation (this was in the tutorial)

 

If you would like more tips about this kind of stuff, you will be able to ask for help in the Microsoft forums or on StackOverflow. Here are the links:

• Microsoft now has a dedicated dotnet-maui tag! Post your questions here dotnet-maui - Microsoft Q&A
• For StackOverflow, you can use both xamarinforms and dotnetmaui https://stackoverflow.com 

Professional Services Note

As a rule I avoid mentioning these services in a forum post because it's not the right place. However, I thought you should at least be aware of it as an option.

If you happen to have a budget for a consultant, you can contact the Professional Services team (select "Telerik"). They can help you design and implement your application lifecycle, storage and state persistence. In fact, it's their dedicated purpose to help you build such things.

[Daniel]

I have this idea, this pseudo code.

It seem that when I login and check if need to move to setting page.

In login, I need to add more condition as follow:

private void LoginClicked(object sender, EventArgs e)
    {
        if (string.IsNullOrEmpty(UsernameEntry.Text) || string.IsNullOrEmpty(PasswordEntry.Text))
        {
            this.DisplayAlert("Incomplete", "You must enter a value for both username and password.", "ok");
            return;
        }
        
        var success = (Application.Current as App)?.AuthService?.LogIntoSomeApiWithCredentials(UsernameEntry.Text, PasswordEntry.Text);

        ((App.Current.MainPage as MyRootPage).Flyout.BindingContext as MenuPageViewModel).IsUserLoggedIn = success.Value;
        
        if (success == true))
       {  if(isFirstSettingTime)// caculate condition
          {
            (App.Current.MainPage as MyRootPage).ShowSettingState();
          }
       else{
           (App.Current.MainPage as MyRootPage).ShowNormalState();
             }
    }
     
        else
        {
            this.DisplayAlert("Access Denied", "that was not the correct username and password. try again.", "ok");
        }
    }
}

In MyRootPage  add another state.

public void ShowSettingState()
    {
        // replace the Detail with a new NavigationPage that has SettingsPage as its first page
        this.Detail = new NavigationPage(new SettingsPage());

     //   NavigationPage.SetHasBackButton(Detail, true); // this is handy if you want to be able to drill down into more pages //from the DashBoardPage

       // MyMenuPage.MenuListView.SelectedItem = null;

        // show the menu flyout (this seems to be a bug in MAUI right now, you cant change the value)
        //this.IsPresented = false;
    }

and from setting page i have button continue move to show normal state.

 (App.Current.MainPage as MyRootPage).ShowNormalState();

[Lance | Manager Technical Support]

That's not bad. Using that approach you can encapsulate the important functionality within a dedicated method. This will ensure a clean stack history whenever the user changes between main views.

The only time that will fall apart is if you need to drill down to a nested "details" page. For those kinds of pages that the user will need to navigate from the details page back up to the top-level page, you should use the Navigation.Push/Pop approach like I do in my example's Routes page

[Daniel]

1. How do i set header and footer to FlyoutPage?

2. In  Telerik ERP - Microsoft Store Applications =>

when you select Vendors menu the app frill down see:

[Lance | Manager Technical Support]

Probably the title property of ContentPage, not sure. You will need to ask these types of questions in the Microsoft forums because FlyoutPage it theirs.

[Daniel]

No the Title is string.

When I customized the Menu Page is not look ok with the Detail page?
Can you please give sample code how is can be done?

[Lance | Manager Technical Support]

Daniel, there are no Telerik resources that can help you with your general app XAML styling and/or general MAUI API use.

At this point, for any additional assistance along this line of questioning, I need to refer you to the Microsoft Q&A help forum where you can ask for assistance with components like the FlyoutPage, NavigationPage and ContentPage.

In case you lost it, here is the link again => dotnet-maui - Microsoft Q&A

[Daniel]

Thanks,

I use this ticket to https://docs.microsoft.com/en-us/answers/questions/858923/how-i-set-header-and-footer-to-flyoutpage.html?childToView=859525#answer-859525

Customized the MenuPage, so that it looks like the header and footer.