Add Shell component

[Eilon]

No description provided.

[Eilon]

Initial work done here: 14641a1

Blazor Native Xaminals sample started, with Shell, here: 18f510b

[Dreamescaper]

Thanks for a great work!

Is there any way I could currently set TabBarIsVisible property for Shell?

[Eilon]

Hi @Dreamescaper thanks! It seems that TabBarIsVisible is an "attached property", meaning it isn't a direct property of Shell. I haven't figured out a good way to support attached properties directly in the Blazor markup.

Fortunately, in Mobile Blazor Bindings there's an "escape hatch" to get to the Xamarin.Forms controls via the NativeControl property, described in the docs here.

For example, in the Xaminals Shell sample's BearPage I changed the code to this:

@inject ShellNavigationManager NavigationManager

<ContentPage @ref="bearPage">
    <ScrollView>
        <StackLayout>
            @foreach (var animal in BearData.Bears)
            {
                <AnimalTemplate Animal="animal" OnClick="AnimalClicked"></AnimalTemplate>
            }
        </StackLayout>
    </ScrollView>
</ContentPage>

@code {
    Microsoft.MobileBlazorBindings.Elements.ContentPage bearPage;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {
            Xamarin.Forms.Shell.SetTabBarIsVisible(bearPage.NativeControl, false);
        }
    }

    async Task AnimalClicked(Animal animal)
    {
        await NavigationManager.NavigateToAsync($"/beardetails/{animal.Name}");
    }
}

On the first "render" of this page (think of that as the first time the Xamarin.Forms controls are made to show up), it takes a reference to the current ContentPage and calls SetTabBarIsVisible on it with false so that the tab bar is not visible on the BearsPage.

[Eilon]

Oh, and yes, this is kind of cumbersome. I'll have to think about how to make this easier. Attached Properties are a very XAML-ish thing, and they do work well from regular C# (as they do in my example above), but they're not great in Blazor syntax.

[Dreamescaper]

@Eilon
What do you think about creating component ShellProperties with handler implementing INonPhysicalChild, which sets Shell attached properties for parent?
Something like that:

<ContentPage Title="Page Title">
    <ShellProperties NavBarIsVisible="false" 
                     TabBarIsVisible="false" />

    <StackLayout>
    ...
    </StackLayout>
</ContentPage>

(I would prefer it to be nested Shell type, so it would be <Shell.Properties />, but blazor does not support that dotnet/aspnetcore#20765)

[Eilon]

That is a very interesting idea!!! That is a very clever way to simulate attached properties. Definitely worth exploration!

[lachlanwgordon]

I like what I see here. If it works I'll copy it for FlexLayout.

[Eilon]

The attached properties idea from @Dreamescaper is in!

Thank you: https://twitter.com/original_ejl/status/1334253894772244482