Adds FontImage Markup Extension for FontImageSource #6398

SkyeHoefling · 2019-06-04T01:45:40Z

Description of Change

Adds Markup Extension for FontImageSource to simplify usage from verbose XAML

<ImageButton>
    <ImageButton.Source>
        <FontImageSource
            FontFamily="{StaticResource MyFontFamily}"
            Glyph="{StaticResource SmileFace}"
            Color="{StaticResource PrimaryColor}" />
    </Image.Source>
</ImageButton>

<ImageButton Source="{FontImage FontFamily={StaticResource MyFontFamily}, Glyph={StaticResource SmileFace}, Color={StaticResource White}" />

Issues Resolved

fixes [Enhancement] Add Markup Extension for FontImageSource #6376

API Changes

Added MarkupExtension: FontImageExtension to Xamarin.Forms.Xaml

Added:

string FontFamily { get; set; }
string Glyph { get; set; }
Color Color { get; set; }

Platforms Affected

Core/XAML (all platforms)
Any platform that implements FontImageSource

Behavioral/Visual Changes

None

Before/After Screenshots

Not applicable

Testing Procedure

This markup extension has been tested in the Sandbox project and a confidential project I am working on.

I added positive and negative unit tests in the Xamarin.Forms.Xaml.UnitTests project

PR Checklist

Has automated tests
Rebased on top of the target branch at time of PR
Changes adhere to coding standard

…ource into any ImageSource

…istake

StephaneDelcroix · 2019-06-04T11:25:45Z

Xamarin.Forms.Xaml/MarkupExtensionParser.cs

@@ -24,6 +24,8 @@ public object Parse(string match, ref string remaining, IServiceProvider service
 				markupExtension = new OnIdiomExtension();
 			else if (match == "DataTemplate")
 				markupExtension = new DataTemplateExtension();
+			else if (match == "FontImage")


not required. I'm not even sure we save any measurable time doing this

I can remove this, no problem

StephaneDelcroix · 2019-06-04T11:26:18Z

Xamarin.Forms.Xaml/MarkupExtensions/FontImageExtension.cs

+
+namespace Xamarin.Forms.Xaml
+{
+	[AcceptEmptyServiceProvider]


I'd add the Glyph as ContentProperty attribute

Suggested change

[AcceptEmptyServiceProvider]

[AcceptEmptyServiceProvider]

[ContentProperty("Glyph")]

This is not my first MarkupExtension and I noticed the other platform ones have [ContentProperty] but I am not sure exactly what it is for. How is it used?

Adding this change is not a problem at all

SkyeHoefling · 2019-06-04T13:03:23Z

@StephaneDelcroix I have the Xamarin.Forms.Sandbox project working with this change but didn't commit it. Should I commit that change as well to make it easier for you to see this change in action?

ChaseFlorell · 2019-06-04T14:43:14Z

ContentProperty makes it so that you don't have to define Glyph=.

SkyeHoefling · 2019-06-05T16:38:54Z

@samhouts @StephaneDelcroix
Is there a tipping point on adding too many properties on the markup extension and how much we really gain? I am using this in one of my projects and came to a point where I really wanted to use Size.

I am thinking about adding the property (Size) in because it is really simple but want to check with everyone before I do that.

ChaseFlorell · 2019-06-05T16:42:44Z

@samhouts @StephaneDelcroix
Is there a tipping point on adding too many properties on the markup extension and how much we really gain? I am using this in one of my projects and came to a point where I really wanted to use Size.

I am thinking about adding the property (Size) in because it is really simple but want to check with everyone before I do that.

I think all options need to be there, or the extension isn't fully useful. (side note: default 30 for size is absurd).

I also put together a proposal whereby we could set some defaults in order to keep verbosity down.
#6421

SkyeHoefling · 2019-06-05T16:44:12Z

I left it out originally because my target use case was for the Shell TabBar but now I am using it in another part of my app and found it really needs Size.

StephaneDelcroix · 2019-06-05T19:42:40Z

@ahoefling having all properties exposed adds versatility. that's what we want (see Binding). If all the options were mandatory, that would be verbose, but that's not the case here

ChaseFlorell · 2019-06-06T14:33:57Z

I gave this a try and got a strange result.

<!-- works good -->
<ImageButton Source="{FontImage FontFamily={StaticResource MyFontFamily}, Glyph={x:Static xml:Images.SmileFace}, Color={StaticResource White}" />

but

<!-- doesn't properly set Glyph -->
<ImageButton Source="{FontImage {x:Static xml:Images.SmileFace}, FontFamily={StaticResource MyFontFamily}, Color={StaticResource White}" />

In other words, the ContentProperty doesn't pick up the path the same way

SkyeHoefling · 2019-06-06T14:37:36Z

Could it be because we are using

[ContentProperty(nameof(Glyph))]

instead of

[ContentProperty("Glyph")]

I don't think this would cause that, but I don't know much about how the ContentProperty works except what we discussed earlier

…rkup extension

SkyeHoefling · 2019-06-06T14:57:05Z

I just added more unit tests to cover this and did some manually testing as well. It appears that [ContentProperty] is not properly picking up the markup extension of x:Static in the usage you demonstrated (@ChaseFlorell). When I attached the debugger to the unit test is shows the string literal of

{x:Static xml:Images.SmileFace

Yes, that is correct and it is missing the trailing } (curly brace). I then updated the code to pass in a hardcoded Glyph and it all appears to work.

@ChaseFlorell I think you discovered a bug with how the [ContentProperty] works with nesting usage of markup extensions.

ChaseFlorell · 2019-06-06T15:17:20Z

I'm going to be submitting a proposal today that will require that the [ContentProperty(nameof(Glyph))] not be included on this markup extension.

Once the proposal is in, I will link back to this for further discussion.

SkyeHoefling · 2019-06-06T15:47:54Z

After running several tests today I don't see a lot of value in [ContentProperty(nameof(Glyph)] since you can't use a markup extension with it to access your static reference. #6398 (comment).

I'm recommending that we remove the [ContentProperty(nameof(Glyph))] attribute so we can add a more useful [ContentProperty] in the future that won't be a breaking change.

StephaneDelcroix · 2019-06-06T18:18:24Z

Xamarin.Forms.Xaml/MarkupExtensions/FontImageExtension.cs

+		public string FontFamily { get; set; }
+		public string Glyph { get; set; }
+		public Color Color { get; set; }
+		public double Size { get; set; } = 30d;


not sure about setting a default. does FontImageSource requires a Size ?

Size already defaults to 30 on FontImageSource, but if you don't set the default here, it'll revert to 0.

Perhaps you can use FontImageSource.SizeProperty.DefaultValue

alternatively, I don't know if FontImageSource has a concept of a magic value -1 to roll over to default.

My thought process behind this is the default size for FontImageSource is 30d. If someone uses this markup extension it will default to 0 unless they explicitly provide a size.

Perhaps we add a static default in FontImageSource and that way both the markup extension and FontImageSource can reference the default size.

FontImageSource

public class FontImageSource : ImageSource { // ... public static double DefaultSize = 30d; // ... }

FontImageExtension

public class FontImageExtension : IMarkupExtension<ImageSource> { // ... public double Size { get; set; } = FontImageSource.DefaultSize; // ... }

You can access it directly off of the SizeProperty

public double Size { get; set; } = (double)FontImageSource.SizeProperty.DefaultValue;

That is a great suggestion, I'll go an update that to use the FontImageSource.SizeProperty.DefaultValue

…alue. This will keep it in sync if that value ever changes

StephaneDelcroix · 2019-06-07T09:55:13Z

The ContentProperty has to be a literal, not another markup extension. I don't think it's bug

SkyeHoefling · 2019-06-07T12:45:55Z

Is there a reason why ContentProperty doesn't support MarkupExtensions? Is this something that should be included in a proposal and feature request?

StephaneDelcroix · 2019-06-07T13:03:17Z

Is there a reason why ContentProperty doesn't support MarkupExtensions? Is this something that should be included in a proposal and feature request?

Here are the reasons I can think of:

the need never showed up
I have no idea if it's supported in other XAML variants,
It would be very-very odd to write {Binding {StaticResource path}}

Now, if 2. is false and the syntax is supported in WPF or UWP (and it's supported by the XLS (/cc @mgoertz-msft)) we could consider it, but we're not going to make a precedent because of 1.

I suggested adding a ContentProperty not to support StaticResource for the Glyph, but for the cases when you prefer to use the glyph code instead of a resource.

SkyeHoefling · 2019-06-07T14:01:09Z

@StephaneDelcroix thanks for the detailed explanation, I am not as familiar with the reasoning behind it and wanted to understand better.

At this point I am in agreement with adding [ContentProperty(nameof(Glyph))] because it requires a string literal and we can't use a markup extension. Considering the proposal that @ChaseFlorell is working on I don't think ContentProperty would create any breaking changes as we would have to use the declarative syntax of

 <ImageButton Source="{FontImage Glyph={x:Static xml:Images.SmileFace}}" />

The ContentProperty is added here as a convenience utility for people that want to use a string literal

jamesmontemagno · 2019-08-22T19:35:56Z

Question...
It looks like this doesn't work with DynamicResources in the FontFamily?

Source="{FontImage FontFamily={DynamicResource MaterialFontFamily},
                                    Glyph={StaticResource IconUpNext}, 
                                    Color={StaticResource PrimaryColor},
                                    Size=15}"

            <OnPlatform x:Key="MaterialFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS" Value="Material Design Icons" />
                <On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
                <On Platform="UWP" Value="Assets/Fonts/materialdesignicons-webfont.ttf#Material Design Icons" />
            </OnPlatform>

Compiler gives error about FontFamily:
. No property, bindable property, or event found for 'FontFamily', or mismatching type between value and property.
1>Done building project "Hanselman.csproj" -- FAILED.

if I changeto StaticResource compiles, but throws an exception at runtime.

StephaneDelcroix · 2019-08-22T19:38:47Z

the extension is fully resolved at the time it's parsed, that's why DynamicResource won't work

jamesmontemagno · 2019-08-22T19:42:04Z

Gotcha... any way to solve this to clean it up? Suggestions?

jamesmontemagno · 2019-08-22T19:42:25Z

Something like:

FontFamily={OnPlatform 
                        iOS={StaticResource MaterialFontFamilyiOS},
                        Android={StaticResource MaterialFontFamilyAndroid}}

?

StephaneDelcroix · 2019-08-22T19:44:59Z

@jamesmontemagno don't use the markup extension, it doesn't provide a lot of benefits as it doesn't save a lot of precious keystrokes

jamesmontemagno · 2019-08-22T19:47:38Z

Yeah, but it looks better! Can i define a StaticResource and update it in the App.xaml.cs?

jamesmontemagno · 2019-08-22T20:03:24Z

NM it all works with StaticResource in place :) yay... for some reason Xamarin.Forms didn't update when I updated Xamarin.Forms.Visual.Material... weird.

SkyeHoefling added 4 commits June 3, 2019 20:23

Added FontImage markup extension which simplifies usage of FontImageS…

2374916

…ource into any ImageSource

Added unit tests to cover TabBar which is used in Shell

afb77fd

Cleaned up xaml for test code

c7618cd

Removed class references from unit test project which were added by m…

01a9595

…istake

SkyeHoefling requested a review from StephaneDelcroix as a code owner June 4, 2019 01:45

StephaneDelcroix suggested changes Jun 4, 2019

View reviewed changes

SkyeHoefling added 2 commits June 4, 2019 09:08

Removed FontImageExtension from markup parser

6c7a2aa

Added ContentProperty to markup extension

d81e477

samhouts added this to In Progress in v4.2.0 Jun 4, 2019

samhouts added proposal-accepted t/enhancement ➕ a/Xaml </> labels Jun 4, 2019

samhouts self-requested a review June 4, 2019 23:38

samhouts assigned samhouts and StephaneDelcroix Jun 4, 2019

samhouts requested a review from StephaneDelcroix June 5, 2019 16:54

Added Size to FontImageExtension

ba40962

SkyeHoefling added 2 commits June 6, 2019 10:43

Updated unit tests for new properties

0525f1f

added unit tests to certify each property was set correctly by the ma…

14fef76

…rkup extension

SkyeHoefling added 2 commits June 6, 2019 10:57

Added content property test to certify that Glyph is being set correctly

6a86a88

Flipped order in unit tests of expected and actual

31e4873

StephaneDelcroix reviewed Jun 6, 2019

View reviewed changes

Updated default value for Size to use the FontImageSource default's v…

4be9b50

…alue. This will keep it in sync if that value ever changes

samhouts requested a review from StephaneDelcroix June 7, 2019 20:35

samhouts added the API-change Heads-up to reviewers that this PR may contain an API change label Jun 25, 2019

samhouts approved these changes Jun 25, 2019

View reviewed changes

StephaneDelcroix approved these changes Jun 25, 2019

View reviewed changes

samhouts added the approved Has two approvals, no pending reviews, and no changes requested label Jun 25, 2019

samhouts merged commit efa9cf4 into xamarin:master Jun 28, 2019

v4.2.0 automation moved this from In Progress to Done Jun 28, 2019

samhouts removed this from Done in v4.2.0 Jul 4, 2019

samhouts added this to the 4.2.0 milestone Jul 16, 2019

samhouts added this to Done in v4.2.0 Jul 16, 2019

samhouts added the F100 label Jul 25, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds FontImage Markup Extension for FontImageSource #6398

Adds FontImage Markup Extension for FontImageSource #6398

SkyeHoefling commented Jun 4, 2019

StephaneDelcroix Jun 4, 2019

SkyeHoefling Jun 4, 2019

StephaneDelcroix Jun 4, 2019

StephaneDelcroix Jun 4, 2019

SkyeHoefling Jun 4, 2019

SkyeHoefling commented Jun 4, 2019

ChaseFlorell commented Jun 4, 2019

SkyeHoefling commented Jun 5, 2019

ChaseFlorell commented Jun 5, 2019

SkyeHoefling commented Jun 5, 2019

StephaneDelcroix commented Jun 5, 2019

ChaseFlorell commented Jun 6, 2019

SkyeHoefling commented Jun 6, 2019 •

edited

Loading

SkyeHoefling commented Jun 6, 2019

ChaseFlorell commented Jun 6, 2019

SkyeHoefling commented Jun 6, 2019

StephaneDelcroix Jun 6, 2019

ChaseFlorell Jun 6, 2019

ChaseFlorell Jun 6, 2019

SkyeHoefling Jun 6, 2019

ChaseFlorell Jun 6, 2019

SkyeHoefling Jun 6, 2019

StephaneDelcroix commented Jun 7, 2019

SkyeHoefling commented Jun 7, 2019

StephaneDelcroix commented Jun 7, 2019

SkyeHoefling commented Jun 7, 2019

jamesmontemagno commented Aug 22, 2019 •

edited

Loading

StephaneDelcroix commented Aug 22, 2019

jamesmontemagno commented Aug 22, 2019

jamesmontemagno commented Aug 22, 2019

StephaneDelcroix commented Aug 22, 2019

jamesmontemagno commented Aug 22, 2019

jamesmontemagno commented Aug 22, 2019

	[AcceptEmptyServiceProvider]
	[AcceptEmptyServiceProvider]
	[ContentProperty("Glyph")]

Adds FontImage Markup Extension for FontImageSource #6398

Adds FontImage Markup Extension for FontImageSource #6398

Conversation

SkyeHoefling commented Jun 4, 2019

Description of Change

Issues Resolved

API Changes

Platforms Affected

Behavioral/Visual Changes

Before/After Screenshots

Testing Procedure

PR Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SkyeHoefling commented Jun 4, 2019

ChaseFlorell commented Jun 4, 2019

SkyeHoefling commented Jun 5, 2019

ChaseFlorell commented Jun 5, 2019

SkyeHoefling commented Jun 5, 2019

StephaneDelcroix commented Jun 5, 2019

ChaseFlorell commented Jun 6, 2019

SkyeHoefling commented Jun 6, 2019 • edited Loading

SkyeHoefling commented Jun 6, 2019

ChaseFlorell commented Jun 6, 2019

SkyeHoefling commented Jun 6, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

StephaneDelcroix commented Jun 7, 2019

SkyeHoefling commented Jun 7, 2019

StephaneDelcroix commented Jun 7, 2019

SkyeHoefling commented Jun 7, 2019

jamesmontemagno commented Aug 22, 2019 • edited Loading

StephaneDelcroix commented Aug 22, 2019

jamesmontemagno commented Aug 22, 2019

jamesmontemagno commented Aug 22, 2019

StephaneDelcroix commented Aug 22, 2019

jamesmontemagno commented Aug 22, 2019

jamesmontemagno commented Aug 22, 2019

SkyeHoefling commented Jun 6, 2019 •

edited

Loading

jamesmontemagno commented Aug 22, 2019 •

edited

Loading