[Solved] XAML Extension for GravatarImageSource

[egvijayanand]

Though it might be a simple extension, it simplifies the XAML to a greater extent and improves readability.

Before:

<Image>
  <Image.Source>
    <mct:GravatarImageSource Email="[email protected]" />
  </Image.Source>
</Image>

After:

<Image Source="{mct:GravatarImage '[email protected]'}" />

Implementation:

namespace CommunityToolkit.Maui.Extensions
{
    [ContentProperty(nameof(Email))]
    public class GravatarImageExtension : GravatarImageSource, IMarkupExtension<GravatarImageSource>, IMarkupExtension
    {
        public GravatarImageSource ProvideValue(IServiceProvider serviceProvider)
        {
            ArgumentNullException.ThrowIfNull(serviceProvider);

            if (BindingContext == null && !IsSet(BindingContextProperty))
            {
                if (serviceProvider.GetService(typeof(IProvideValueTarget)) is IProvideValueTarget val)
                {
                    SetBinding(BindingContextProperty, new Binding(nameof(BindingContext), BindingMode.Default, null, null, null, val.TargetObject));
                }
            }

            return this;
        }

        object IMarkupExtension.ProvideValue(IServiceProvider serviceProvider)
            => ProvideValue(serviceProvider);
    }
}

[TheCodeTraveler]

@bijington @GeorgeLeithead - what do you think?

[pictos]

Hey, @egvijayanand, thanks for your proposal.
This isn't needed, you can already do that in .NET MAUI, as you can see in the screenshot below.

Let's say that .NET MAUI has a secret gem that allows you to describe any control using markups, so you don't need to create markup for these types, for example, let's say that you want to do a rounded border, you can do that in two ways:

			<Border
				StrokeThickness="4">
				<Border.StrokeShape>
					<RoundRectangle CornerRadius="40,0,0,40" />
				</Border.StrokeShape>
				<Label  Text="Hello, World!" />
			</Border>

or

<Border
	StrokeShape="{RoundRectangle CornerRadius='40,0,0,40'}"
	StrokeThickness="4">
	<Label
		FontSize="32"
		HorizontalOptions="Center"
		SemanticProperties.HeadingLevel="Level1"
		Text="Hello, World!" />
</Border>

[TheCodeTraveler]

Oh cool! Could you update the docs to add this info, @pictos? https://learn.microsoft.com/dotnet/communitytoolkit/maui/imagesources/gravatarimagesource

Right now, the docs only specify how Vijay demonstrated in his Before example.

[egvijayanand]

Let's say that .NET MAUI has a secret gem that allows you to describe any control using markups, so you don't need to create markup for these types, for example, let's say that you want to do a rounded border, you can do that in two ways:

Pro Tip, have used the Border the way it is described in the sample and thought a XAML extension is defined in the framework itself. But this is definitely a much-needed feature as it'll save so many keystrokes and avoid unnecessary nesting.

[egvijayanand]

@brminnick Since the special feature of .NET MAUI makes it super easy to define the Source without any need for an explicit extension, this discussion can be marked as resolved/answered.

[CliffAgius]

Closed and answered