Example code for Maui Shell

[Jacob_Persson]

I am using the transition from Xamarin forms to Maui as an excuse to start using Shell as well.

Since Shell has been in the Maui previews for a long time now, I thought it would be easy to get started.  But the template does not have Shell as an option, and for some reason I haven't been able to find an example project despite extensive search.

Can anyone point me to a simple example of a Maui Shell 'Hello World' app?

[#2]

The Shell feature has been completed recently for .NET MAUI. I think the templates have to catch up to that. That is probably also the reason why there isn't a lot of content for it yet.

However, the API will be exactly the same between Xamarin.Forms and .NET MAUI. You should be able to learn about Shell in Forms and apply that to .NET MAUI. If you really want to do it in .NET MAUI right now, you might want to create a Forms one and see if you can convert that to .NET MAUI. Then you have also learned how to do that 😄

I get that it's not ideal right now, I hope the templates that you can use for this will be there soon.

[#3]

@jfversluis 

Hi Gerald,
Thank you for the quick response.

I should add that I have done a little development in Shell in other Xamarin Forms apps. So I think/hope I got the API part covered.

The problem is overriding 'CreateWindow' in app.xaml.cs
I get a 'Return type must be Window..' and I cannot seem to get around that problem. Hence the request for a Hello World sample.

And converting a Forms project to Maui I end up in the same situation 🙂

[#4 · Accepted solution]

You can find one such sample for making use of Shell made available in the GitHub repository https://github.com/egvijayanand/dotnet-maui-samples

[#5]

Exactly what I was looking for - thank you both

[#6]

I am using the sample and added an image to the flyout header:

    <Shell.FlyoutHeader>
        <Grid BackgroundColor="{DynamicResource WindowBackgroundColor}"
                  HeightRequest="150"
                  Padding="0, 10">

            <Image Source="dotnet_bot.png"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"
                       HeightRequest="130"
                       WidthRequest="180"/>

        </Grid>
    </Shell.FlyoutHeader>

It works in Android but the image does not display in Windows, what am I missing? The image is in the "resources\images\" folder  dotnet_bot.svg ... as you know MAUI will generate the dotnet_bot.png, but in Windows it looks like the publish folder is different. What do I need to do, so it works in both platforms? Thanks in advance.

[#7]

@Juan Montoya Check for the presence of this attribute windows:Application.ImageDirectory="Assets" in the App.xaml file.

This has been deprecated in Preview 13 Changes, hence needs to be removed.

The sample in GitHub is reflecting the change while it is updated for Preview 13.

[#8]

yes! I removed it and now it is working. Thank you.

[#9]

What would be useful are Cookbook examples. Flutter has them and they make things a lot easier. Most people here know now to program the just need the basics of how something is supposed to work. MSDN examples were often that way. Trying to sort this out off someone's demo app code isn't quite so easy.