Some questions about the library

[Denny09310]

I'm currently trying to understand how the library works, because I think it's a very well structured library but I'm missing something and I'd like to improve it.

Auto Binding of '@ref'

I haven't fully understood how the 'ref' property works. With the library's "native" components, it seems to function correctly, but for third-party components, a different solution needs to be applied:

// Navigation.cs

/// <summary>
/// Returns rendered MAUI element from component <typeparamref name="T"/>.
/// This method is exposed for extensibility purposes, and shouldn't be used directly.
/// </summary>
/// <remarks>Experimental API, subject to change.</remarks>
[Experimental("MBB001")]
public async Task<T> BuildElement<T>(Type componentType, Dictionary<string, object> arguments) where T : Element
{
    var (bindableObject, componentTask) = await _renderer.GetElementFromRenderedComponent(componentType, arguments);
    var element = (Element)bindableObject;

    element.ParentChanged += DisposeScopeWhenParentRemoved;

    return element as T
        ?? throw new InvalidOperationException($"The target component of a navigation must derive from the {typeof(T).Name} component.");

    async void DisposeScopeWhenParentRemoved(object _, EventArgs __)
    {
        if (element.Parent is null)
        {
            element.ParentChanged -= DisposeScopeWhenParentRemoved;

            var component = await componentTask;
            _renderer.RemoveRootComponent(component);
        }
    }
}

This function allows you to build the full RenderTree of a third-party component while also handling the 'ref' binding. For example:

public static class NavigationExtensions
{
    public static async Task<object> ShowCommunityToolkitPopupAsync<T>(this INavigation navigation)
    {
        var popup = await ((Navigation)navigation).BuildElement<CommunityToolkit.Maui.Views.Popup>(typeof(T), null);
        return await Application.Current.MainPage.ShowPopupAsync(popup);
    }

    public static async Task<object> ShowMDPopupAsync<T>(this INavigation navigation)
    {
        var popup = await ((Navigation)navigation).BuildElement<Material.Components.Maui.Popup>(typeof(T), null);
        return await popup.ShowAtAsync(Application.Current.MainPage);
    }
}

I don't understand this part because the 'BuildElement' function is never used within the BlazorBindings.Maui library components.

Can't this be auto-detected from the generator or at least specified in some way through the attribute?

Inheritance in Third-Party Components

When creating third-party components, it is not straightforward to inherit from the "Wrap" component because the default properties that are set do not match the ones applied. An example is with the library The49.Maui.BottomSheet. To create a simple BottomSheet, you need to "wrap" it instead of inheriting it, as suggested in the documentation:

Current Implementation

@using BlazorBindings.Maui.Elements.The49.BottomSheet

<BottomSheet @ref="element" HasHandle="true">
    <Detents>
        <RatioDetent IsDefault="true" Ratio="0.5f" />
        <FullscreenDetent />
    </Detents>
    <ChildContent>
        <VerticalStackLayout Padding="16" Spacing="16">
            <VerticalStackLayout>
                <Label>Some content</Label>
            </VerticalStackLayout>
            <BoxView />
            <VerticalStackLayout>
                <Label>More content</Label>
            </VerticalStackLayout>
        </VerticalStackLayout>
    </ChildContent>
</BottomSheet>

@code
{
    private BottomSheet element;
}

Library Documentation

using The49.Maui.BottomSheet;

public class MySheet : BottomSheet
{
    public MySheetPage()
    {
        InitializeComponent();
    }
}

<the49:BottomSheet xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:the49="https://schemas.the49.com/dotnet/2023/maui"
             x:Class="MyApp.MySheet"
             Title="MySheet">
            <!-- ... -->
</the49:BottomSheet>

This is proposed as an inheritance, not a wrap.

Currently, the Detents property has been converted into a RenderFragment, but if it had remained of its original type, we could have extended the object through inheritance:

@using BlazorBindings.Maui.Elements.The49.BottomSheet
@using TMB = The49.Maui.BottomSheet

<VerticalStackLayout Padding="16" Spacing="16">
    <VerticalStackLayout>
        <Label>Some content</Label>
    </VerticalStackLayout>
    <BoxView />
    <VerticalStackLayout>
        <Label>More content</Label>
    </VerticalStackLayout>
</VerticalStackLayout>

@code
{
    public ApplicationBottomSheet() // Alternatively, a Loaded/Initialized method
    {
        HasHandler = true;
        Detents = 
        [
            new TMB.RatioDetent { IsDefault = true, Ratio = 0.5f },
            new TMB.FullScreenDetent()
        ];
    }
}

In this case, the issue is the properties not being updated after binding, leaving the default values instead.

The same applies with this function for third party components, I need to create manually a partial class just to specify this method on the render fragments elements:

protected override void RenderAdditionalPartialElementContent(RenderTreeBuilder builder, ref int sequence)
{
    base.RenderAdditionalPartialElementContent(builder, ref sequence);
    RenderTreeBuilderHelper.AddListContentProperty<TMB.BottomSheet, TMB.Detent>(builder, sequence++, Detents, x => x.Detents);
}

[Dreamescaper]

I'm not sure how your question is related to @ref attribute.

BuildElement method was created to handle the case when you need an element without any parent in razor tree. For example, Popup element from CommunityToolkit. You can't put it as a child of page or contentView:

<NavigationPage>
<Popup>  // Will not work
///
</Popup>
</NavigationPage>

You need to create this element without any parent, and then invoke method ShowAtAsync on Popup control (not just a CommunityToolkit's component).

This method was created for this rare case when you can't put element as some other element child. Per my understanding, that's will happen mostly in navigation scenarios, therefore this method is in Navigation type.

[Dreamescaper]

Ah. So that does seem like this scenario, where you'd need BuildElement.

How do you invoke ShowAsync method? How do you do what that component type you've shared?

[Denny09310]

<ContentPage>
    <Button HorizontalOptions="LayoutOptions.Center" VerticalOptions="LayoutOptions.Center" OnClick="ShowBottomSheetAsync">
        Bottom Sheet
    </Button>
</ContentPage>

@code
{
    private async Task ShowBottomSheetAsync()
    {
        if (OperatingSystem.IsAndroid() || OperatingSystem.IsIOS())
        {
            var sheet = new ApplicationBottomSheet();
            await sheet.ShowAsync();
        }
        else
        {
            await Application.Current.MainPage.DisplayAlert(
                title: "Error", 
                message: $"{nameof(ApplicationBottomSheet)} not supported on the current OS",
                cancel: "OK");
        }
    }
}

This is a sample code I've made to trying different situations with Mobile Blazor Bindings, but as per documentation this is how I should call the BottomSheet:

const sheet = new MySheet();

// Show the sheet
sheet.ShowAsync();

// Alternatively, pass the window in which the sheet should show. Usually accessible from any other page of the app.
sheet.ShowAsync(Window);

// Call to programatically close the sheet
sheet.DismissAsync();

If I use the Navigation.BuildElement obviously works, but I'd like to understand how to make it work separately

[Dreamescaper]

Yeah, that's the problem.
Unlike with MAUI, where XAML actually represents your objects, in Blazor components and render tree don't have much of value on their own.
You can't simply create a component by new-ing it, it needs to be processed by a Renderer. For most components - they are processed by renderer simply because they are a child elements of some other elements. Not the case here.
That's why that BuildElement is needed - because you can't simply new it.

I'll be able to help, but later.

[Denny09310]

Understood thanks for the clarifications

[Dreamescaper]

@Denny09310
I've added a small sample for The49.Maui.BottomSheet:
#162

[Dreamescaper]

Inheritance in Third-Party Components

Yes, it's a bit different paradigm with Blazor components. You don't usually inherit from other components in day-to-day usage (unless you're building your own component library). In most case - you build component based on other component.

In MAUI - it's the opposite. You need to have a new page - you inherid from NavigationPage. Etc.

Still, let me know if you have any issues with it, as I'm not sure what causes you troubles.

Regarding Detents. In Blazor, you can only create nested razor tree when the property has RenderFragment type. So this wouldn't be possible:

    <Detents>
        <RatioDetent IsDefault="true" Ratio="0.5f" />
        <FullscreenDetent />
    </Detents>

[Denny09310]

Ok, if it's not possible good to know. I'll make the components the MAUI way 😁😁

[Denny09310]

Sorry but I need guidance. I'm trying to add "Scoped" styles using XAML. I have this Component:

@namespace BlazorBindings.Maui.Elements

<ContentView Resources="@Resources">
    <VerticalStackLayout>
        <FlexLayout AlignItems="FlexAlignItems.Center" JustifyContent="FlexJustify.SpaceAround" Padding="new Thickness(0, 40)">
            <RoundedActionButton Icon="MaterialIcons.Bookmark" Label="Save" />
            <RoundedActionButton Icon="MaterialIcons.Shuffle" Label="Remix" />
            <RoundedActionButton Icon="MaterialIcons.QrCode" Label="QR Code" />
        </FlexLayout>

        <BoxView HeightRequest="1" Color="@Colors.LightGray" />

        <Button Icon.Value="@FavouritesIcon"
                Text="Add to favourite" />

        <Button Icon.Value="@PersonRemoveIcon"
                Text="Unfollow"/>

        <BoxView HeightRequest="1" Color="@Colors.LightGray" />

        <Button Icon.Value="@HideSourceIcon"
                Text="Hide this post"/>

        <Button Icon.Value="@InfoOutlineIcon"
                Text="More about this account" />

        <Button Icon.Value="@ReportIcon"
                Text="Report" />
    </VerticalStackLayout>
</ContentView>

I'm trying to set the resources on the partial class of it:

public partial class MoreOptionsBottomSheet
{
    private static readonly ResourceDictionary Resources = [];

    static MoreOptionsBottomSheet()
    {
        Resources.Scoped("Elements/BottomSheet/MoreOptionsBottomSheet.razor.xaml");
    }
}

And this is the extension:

public static class ResourceDictionaryLoader
{
    public static ResourceDictionary Scoped(this ResourceDictionary dictionary, string resourcePath, Assembly? containingAssembly = null)
    {
        var uri = new Uri(resourcePath, UriKind.Relative);
        var assembly = containingAssembly ?? Assembly.GetCallingAssembly();
        dictionary.SetAndLoadSource(uri, resourcePath, assembly, null);
        return dictionary;
    }
}

I expect the button to have a transparent background, but instead they are set with the primary color. I'm sorry if this is a stupid question but I'm just learning MAUI and XAML and don't know if this is possible in Blazor Bindings or not

[Dreamescaper]

Frankly, I'm not sure what you're trying to achieve.
Do you have a separate XAML file with some styles, which you're trying to apply to your component?

In that case, could you share that XAML?

[Denny09310]

Yes, I'd like to have a separate XAML when are needed scoped styles and I thought to use the same file structure of Blazor, with the separate "{filename}.razor.css" in this case with XAML. The file is just a simple style for a button, the Dictionary is loaded correctly, but the styles are not applied. If I do the same thing to the Application Dictionary that works, but it's no more scoped.

<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Style TargetType="Button">
        <Setter Property="HorizontalOptions" Value="Start" />
        <Setter Property="BackgroundColor" Value="Transparent" />
        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
    </Style>

</ResourceDictionary>

This is a copy of the Styles.xaml that comes with the new MAUI templates, only replaced the styles with mine.

You can see the complete code in my repo

[Dreamescaper]

For whatever reason, XAML styles are always causing me troubles. Not sure if that's due to MAUI bugs or me doing something wrong.

Anyway, I've merged a small sample with styles created via https://github.com/CommunityToolkit/Maui.Markup:
https://github.com/Dreamescaper/BlazorBindings.Maui/blob/main/samples/StylingSample/Resources/AppStyles.cs

[Denny09310]

Perfect, thanks a lot