carolzbnbr / OnScreenSizeMarkup.Maui

OnScreenSizeMarkup.MAUI is a XAML markup extension that facilitates the control of UI elements (Views) according to the physical screen size category of a device (such as medium-sized, large-sized devices, etc.). This extension provides a flexible way to tailor your interface to various screen dimensions.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

More Screen Category Options

Andy-Donegan opened this issue · comments

Is your feature request related to a problem? Please describe.
For iOS it has been so simple as the size range and Apples device range can be covered quite easily with a small range of device sizes.
Unfortunately for Android we have seen today it is going to be much more complex to cover and make our App appear as best we can with the limited Screen Category options available.

Describe the solution you'd like
My suggestion is to add lots more Screen Categories :)
Currently there are 5 device sizes, something like below would allow for 13 device sizes. Naming can be changed of course (My naming suggestions are just an idea I do not have my hopes pinned on a name of GIANT).
This would greatly cover future growth but primarily for Android Tablets we are struggling to fit them into ranges and have our App adjust in a nice way to cover the ranges.
xxxxxSmall or ExtraTiny
xxxxSmall or Tiny
xxxSmall or ExtraSmall
xxSmall or VerySmall
xSmall or Smaller
Small
Medium
Large
xLarge or Larger
xxLarge or VeryLarge
xxxLarge or ExtraLarge
xxxxLarge or SuperLarge
xxxxxLarge or Giant

Describe alternatives you've considered
I have looked into the scaling function etc, but the nature of our basic app we do require more scaling options/screen category break points.
This is my initial thought on the matter and more than happy to discuss.

Additional context
I am more than happy to implement this work into the project once naming etc is agreed and anything else you want to discuss.
I would just adjust following all of your clean coding and just to the basic work of adding the extra items.
I do understand it might make the project look more complex, but the excellent readme is clear and would not have to change much, you could just note that there are a lot more ScreenCategory classes available for people required to define more size ranges.

@Andy-Donegan

Have you considered separating the categorization based on device types? For example, maintaining the default size settings for smartphones, while customizing (or remapping) the settings for tablets?

For instance:

            if (DeviceInfo.Current.Idiom == DeviceIdiom.Phone)  // smartphones android or apple
            {
                OnScreenSizeMarkup.Maui.Manager.Current.Mappings = OnScreenSizeMarkup.Maui.Mappings.DefaultMappings.MobileMappings;
            }
            else if (DeviceInfo.Current.Idiom == DeviceIdiom.Tablet) // tablets size
            {
                OnScreenSizeMarkup.Maui.Manager.Current.Mappings = new List<SizeMappingInfo>
                {
                    //up to 7.0 inches
                    new SizeMappingInfo(1.0, ScreenCategories.ExtraSmall, ScreenSizeCompareModes.SmallerOrEqualsTo),

                    //between 7"and 8"
                    new SizeMappingInfo(8.9, ScreenCategories.Small, ScreenSizeCompareModes.SmallerOrEqualsTo),

                    //between 8"and 9" inches
                    new SizeMappingInfo(9.0, ScreenCategories.Medium, ScreenSizeCompareModes.SmallerOrEqualsTo),

                    //between 9.1"and 10 inches
                    new SizeMappingInfo(10.0, ScreenCategories.Large, ScreenSizeCompareModes.SmallerOrEqualsTo),

                    //above 10.0 inches
                    new SizeMappingInfo(int.MaxValue, ScreenCategories.ExtraLarge,
                        ScreenSizeCompareModes.SmallerOrEqualsTo),
                };
            }

So that way you remap the sizes for your tablets.

I'm leaving to travel today with my family for Christmas, and I can't analyze your suggestion in depth right now. At first glance, I found it interesting, but I need to think about it more. I should give you a response by the middle of next week, okay?

In the meantime, you can test my code suggestion above, if you haven't done so yet.

Merry Christmas,

Carol

Hi Carol,

Have a lovely Christmas with your Family and Friends, I will read through your suggestion thank you very much :)

Yes we have set up similarly to your suggestion, it could be just us who are not doing things correctly, but Android has so many options over 10" etc the larger the devices get the worse our display becomes. Our users get our App for free and they are on average high end device owners so we get hit with the oh it does not look good on my 14" Samsung Tab S9 Ultra with bells and whistles.

We can discuss in the New Year if that is ok for you, I am also leaving today to go visit my daughter and family for the Holidays :)

Thank you again so much for this excellent repository.

Hi @Andy-Donegan,

Hope you enjoyed the holidays with family and friends!

I've pushed a new branch v4.0, adding extended categories for screen sizes as shown below:

/// <summary>
/// Categories that a smartphone or tablet screen size fits in.
/// </summary>
public enum ScreenCategories
{
	/// <summary>
	/// Represents the smallest screens, typically for compact smartphones or wearable devices.
	/// </summary>
	Mini = 1,

	/// <summary>
	/// Extra Small sized screens, common in smaller, more portable smartphones.
	/// </summary>
	ExtraSmall = 2,

	/// <summary>
	/// Small sized screens, typical for budget or older smartphones.
	/// </summary>
	Small = 3,

	/// <summary>
	/// A size slightly larger than 'Small', found in newer smartphone models offering more screen space.
	/// </summary>
	SmallPlus = 4,

	/// <summary>
	/// Medium size screens, common in mid-range smartphones and smaller tablets.
	/// </summary>
	Medium = 5,

	/// <summary>
	/// Slightly larger than 'Medium', bridging the gap between smartphones and tablets.
	/// </summary>
	MediumPlus = 6,

	/// <summary>
	/// Large sized screens, typical for high-end smartphones and mid-sized tablets.
	/// </summary>
	Large = 7,

	/// <summary>
	/// Slightly larger than 'Large', for larger tablets that offer extensive screen real estate.
	/// </summary>
	LargePlus = 8,

	/// <summary>
	/// Extra Large sized screens, common in premium large tablets and hybrids.
	/// </summary>
	ExtraLarge = 9,

	/// <summary>
	/// Larger than 'Extra Large', typically found in tablets designed for professional use or media consumption.
	/// </summary>
	ExtraExtraLarge = 10,

	/// <summary>
	/// Very large tablet screens, often used for specialized applications or as laptop replacements.
	/// </summary>
	Jumbo = 11,

	/// <summary>
	/// Extremely large screens, surpassing traditional tablet sizes, possibly for specialized industrial or commercial use.
	/// </summary>
	SuperJumbo = 12,

	/// <summary>
	/// The largest category, for exceptionally large devices that are more akin to touch-enabled monitors.
	/// </summary>
	Giant = 13,

	/// <summary>
	/// Represents an unset or undefined screen size category.
	/// </summary>
	NotSet = 0
}

I haven't released a NuGet package yet, as I want to test more before publishing a preview.

I found an issue with CollectionView in my initial tests after implementing these changes. As we know, CollectionView has been buggy since MAUI's first version. I've temporarily replaced CollectionView with FlexLayout in the sample app, but I'd like to revert to the original for developers who might face CollectionView issues post-publishing on nuget.org.

If you want to customize diagonal sizes, adjust them in app.cs before initializecomponent, like so:

  Manager.Current.Mappings = new List<SizeMappingInfo>
	{
		new SizeMappingInfo(3.9, ScreenCategories.Mini, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(4.9, ScreenCategories.ExtraSmall, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(5.5, ScreenCategories.Small, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(6.1, ScreenCategories.SmallPlus, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(7.9, ScreenCategories.Medium, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(8.4, ScreenCategories.MediumPlus, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(10.1, ScreenCategories.Large, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(11.9, ScreenCategories.LargePlus, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(12.9, ScreenCategories.ExtraLarge, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(0, ScreenCategories.ExtraExtraLarge, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(0, ScreenCategories.Jumbo, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(0, ScreenCategories.SuperJumbo, ScreenSizeCompareModes.SmallerOrEqualsTo),
		new SizeMappingInfo(0, ScreenCategories.Giant, ScreenSizeCompareModes.SmallerOrEqualsTo),
	};

Please test the v4.0 branch and help identify/solve the CollectionView issue.

Carol

Just a quick note: I've maintained the legacy categorization (Small, Medium, Large, and ExtraLarge) in this new v4.0 version. This ensures no breaking changes or unexpected behavior for developers upgrading to 4.0. The new categories will only apply if developers explicitly set or override the mappings as I showed above.

Hi Carol and Happy New Year, I hope you also had a nice Christmas and time with family and friends.

Thank you so much for considering and implementing these changes, I would have gladly done this work to try and help out. I have kept away from Collection Views specifically for the reasons you have listed, so many issues and poor performance most people are advised to keep away from them apart from the most simple of user cases, but I am more than happy to do some testing this evening and will get back to you, I have just returned to work today.

Andy,

Indeed, you are correct regarding the CollectionView. However, since the prior version is working well with the CollectionView, I'm concerned that upon releasing v4.0, some developers may raise issues about this. It would not be comfortable to say "it no longer works with CollectionView."

Apologies for implementing the changes so quickly. I spent the entire holidays thinking about your requirements, and I couldn't resist making the adjustments. But be sure, I will definitely consider involving you in the next update. :)

Carol

Carol,
I think I am lacking in the knowledge to even get this built. I have downloaded the original and the version 4.0 version as Zips and also directly into Visual Studio 2022 (Pc).

My project is full of errors, I have played for the past 3 hours attempting to bring it all up to just .Net 7 so I can get it to build so I can run the sample project but I have had no success at all.

I am sorry but I just can not get in a place to even commence testing and I am unsure how to highlight the many issues/ it must be platform issues from our different environments but I have installed every .Net sdk to attempt to get it to work.

I am happy to try anything you suggest, but for the time being I am stuck sorry.

Andy,

I'm away from my computer right now, but tomorrow, if you could, we can schedule a zoom meeting so we can try fixing the problems you are facing. I don't want to share my email address here due to spammers, but if you could add me on my LinkedIn we can arrange and share meeting information.

My LinkedIn is on my GitHub's profile.

But by now, i would attempt to run on net 6, as it is the net version it is based on.

Hope this helps.

Carol

I will have another go today during work to get it working via .Net 6, failing that I will send you a message on Linked In, I followed you before christmas so I can send a quick message through. I will try first though and let you know.

Thanks very much :)

Andy.

I have 4.0.1 installed in a .Net 8 project which is identical to the OnScreenSizeMarkup.Sample
Just going through all elements noticed Frame which is now obsolete so I have tried to implement Border in the Sample as well.

<Frame
    WidthRequest="{markups:OnScreenSize Base='50', Large='2', Default='1'}"
    HeightRequest="{markups:OnScreenSize Base='50', Large='2', Default='1'}"
    CornerRadius="{markups:OnScreenSize Base='25', Large='2', Default='1'}">
</Frame>

I am adding an example for Border

    Stroke="Black"
    StrokeThickness="1"
    WidthRequest="{markups:OnScreenSize Base='50', Large='2', Default='1'}"
    HeightRequest="{markups:OnScreenSize Base='50', Large='2', Default='1'}">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="{markups:OnScreenSize Base='25', Large='2', Default='1'}" />
    </Border.StrokeShape>
</Border>

Frame works with the CornerRadius, using Base, but Border Corner Radius will not work and is just ignored.

I can only add debug comments to your code and then compile and catch debug comments as I run the app.
By doing this I have seen the line in ValueConversionExtensions.shared.cs

In this block on line 85.

        {
			LogHelpers.WriteLine(toType.ToString(), LogLevels.Verbose);
			converter = (TypeConverter)new Microsoft.Maui.Converters.CornerRadiusTypeConverter();
	        ValueConversionExtensions.converter.Add(toType, converter);
			var value1 = converter.ConvertFromInvariantString((string)value!);
			return value1!;
        }

That line is falling over silently and no return happens. (at best whilst I am testing).

Hi Andy, Could you please share your updated MainPage.Xaml file?

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:markups="clr-namespace:OnScreenSizeMarkup.Maui;assembly=OnScreenSizeMarkup.Maui"
             xmlns:mappings="clr-namespace:OnScreenSizeMarkup.Maui.Mappings;assembly=OnScreenSizeMarkup.Maui"
             xmlns:viewModels="clr-namespace:OnScreenSizeMarkup.Sample.ViewModels"
             x:Class="OnScreenSizeMarkup.Sample.MainPage"
             x:DataType="viewModels:MainPageViewModel"
             >
    <ContentPage.Resources>

        <ResourceDictionary>
            <Style x:Key="HeadingLabel" TargetType="Label">
                <Setter Property="FontSize" Value="{markups:OnScreenSize ExtraSmall='14',  Small='20', Medium='22', Large='30', ExtraLarge='50'}"/>
                <Setter Property="HorizontalTextAlignment" Value="Center"/>
            </Style>

            <Style x:Key="ParagraphLabel" TargetType="Label">
                <Setter Property="FontSize" Value="{markups:OnScreenSize ExtraSmall='12',  Small='14',  Medium='14', Large='14', ExtraLarge='28'}"/>
                <Setter Property="HorizontalOptions" Value="Center"/>
            </Style>

            <Style x:Key="TableHeadingLabel" TargetType="Label">
                <Setter Property="FontSize" Value="{markups:OnScreenSize Default='12', Small='14',  Medium='14', Large='16', ExtraLarge='32'}"/>
                <Setter Property="FontAttributes" Value="Bold"/>
                <Setter Property="HorizontalOptions" Value="Center"/>
                <Setter Property="HorizontalTextAlignment" Value="Center"/>

            </Style>

            <Style x:Key="TableDataLabel" TargetType="Label">
                <Setter Property="FontSize" Value="{markups:OnScreenSize Default='11', Small='12',  Medium='12', Large='14', ExtraLarge='28'}"/>
                <Setter Property="HorizontalOptions" Value="Center"/>
                <Setter Property="HorizontalTextAlignment" Value="Center"/>
            </Style>

            <Thickness x:Key="PaddingThickness">10,50,15,5</Thickness>

        </ResourceDictionary>

    </ContentPage.Resources>
    <ScrollView>
        <VerticalStackLayout 
            Spacing="{markups:OnScreenSize Default='20', ExtraSmall='10',   Small='14', Medium='14', Large='20',  ExtraLarge='30'}" 
            Padding="{markups:OnScreenSize Default='30, 0', ExtraSmall='5',  Small='7',  Medium='9', Large='13', ExtraLarge='30, 15, 30, 15'}" 
            VerticalOptions="Center">


            <Image
                Source="dotnet_bot.png"
                HeightRequest="{StaticResource ImageSize}"
                WidthRequest="{StaticResource ImageSize}"
                HorizontalOptions="Center" />

            <Border
                Stroke="Black"
                StrokeThickness="1"
                WidthRequest="{markups:OnScreenSize Base='50', Large='2', Default='1'}"
                HeightRequest="{markups:OnScreenSize Base='50', Large='2', Default='1'}">
                <Border.StrokeShape>
                    <!--<RoundRectangle CornerRadius="{markups:OnScreenSize Default='25,25,25,25', Large='50,50,50,50'}" />-->
                    <RoundRectangle CornerRadius="{markups:OnScreenSize Base='25', Large='2', Default='1'}" />
                </Border.StrokeShape>
            </Border>

            <!-- The Frame class existed in Xamarin.Forms and is present in .NET MAUI for users who are migrating their apps from Xamarin.Forms to .NET MAUI. If you're building a new .NET MAUI app it's recommended to use Border instead, and to set shadows using the Shadow bindable property on VisualElement. For more information, see Border and Shadow. -->
            <Frame
                WidthRequest="{markups:OnScreenSize Base='50', Large='2', Default='1'}"
                HeightRequest="{markups:OnScreenSize Base='50', Large='2', Default='1'}"
                CornerRadius="{markups:OnScreenSize Base='25', Large='2', Default='1'}">
            </Frame>

            <Label
                    Style="{StaticResource HeadingLabel}"
                 >
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="You are seeing " />

                        <Span Text="{markups:OnScreenSize ExtraSmall='Green',  Small='Red', Medium='Blue', Large='Pink', ExtraLarge='Purple', Mini='Orange', SmallPlus='Yellow', LargePlus='Brown', Giant='Black', Jumbo='Gray', Default='Gray'}"
                                  TextColor="{markups:OnScreenSize ExtraSmall='Green',  Small='Red', Medium='Blue', Large='Pink', ExtraLarge='Purple', Mini='Orange', SmallPlus='Yellow', LargePlus='Brown', Giant='Black', Jumbo='Gray', Default='Gray'}"/>

                        <Span Text=" because your device was categorized as " />

                        <Span Text="{markups:OnScreenSize ExtraSmall='ExtraSmall', Small='Small', Medium='Medium', Large='Large', ExtraLarge='ExtraLarge', Mini='Mini', SmallPlus='SmallPlus', LargePlus='LargePlus', Giant='Giant', Jumbo='Jumbo', Default='Default'}"
                                  TextColor="White"
                                  BackgroundColor="{markups:OnScreenSize ExtraSmall='Green',  Small='Red', Medium='Blue', Large='Pink', ExtraLarge='Purple', Mini='Orange', SmallPlus='Yellow', LargePlus='Brown', Giant='Black', Jumbo='Gray', Default='Gray'}" />
                    </FormattedString>
                </Label.FormattedText>
            </Label>

            <Label 
                        Style="{StaticResource ParagraphLabel}"
                        HorizontalOptions="Center" >
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="Your device was categorized according to the table below. " />
                        <Span Text="To learn how to customize/override category mappings, see " />
                        <Span Text="documentation"
                                  TextColor="Blue"
                                  TextDecorations="Underline">
                            <Span.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding SeeDocumentationCommand}" />
                            </Span.GestureRecognizers>
                        </Span>

                    </FormattedString>

                </Label.FormattedText>
            </Label>

            <Grid
                      Padding="{markups:OnScreenSize Default=20, Medium={StaticResource PaddingThickness}}" 
                      RowDefinitions="{markups:OnScreenSize Default='*, 3*', Medium='30, 0.8*', Large='45, *', ExtraLarge='80, *'}"
                      ColumnDefinitions="{markups:OnScreenSize Default='*, *, *', ExtraLarge='2*, *, *'}">


                <Label Grid.Row="0" Grid.Column="0"
                           Text="Compare mode"
                           Style="{StaticResource TableHeadingLabel}"  />


                <Label Grid.Row="0" Grid.Column="1"
                        Text="Diagonal Size"
                        Style="{StaticResource TableHeadingLabel}" />

                <Label Grid.Row="0" Grid.Column="2"
                           Text="Category"
                           Style="{StaticResource TableHeadingLabel}"  />

                <!--<FlexLayout
                          Grid.Row="1"
                          Grid.ColumnSpan="3"
            Direction="Row"
            AlignItems="Start"
             Wrap="Wrap"
            BindableLayout.ItemsSource="{Binding Mappings}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate >
                            <Grid x:DataType="mappings:SizeMappingInfo"
                          ColumnDefinitions="{markups:OnScreenSize Default='150, 70, 150', ExtraLarge='2*, *, *'}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="{markups:OnScreenSize ExtraSmall=30, Small=30, Medium=35, Large=45, ExtraLarge=80, Default=40}" />
                                </Grid.RowDefinitions>
                                <Label Grid.Column="0"
                               Text="{Binding CompareMode}"
                               Style="{StaticResource TableDataLabel}"
                               HorizontalOptions="Center" />

                                <Label Grid.Column="1"
                               Text="{Binding DiagonalSize, StringFormat='{0}&quot;'}"
                               Style="{StaticResource TableDataLabel}"
                               HorizontalOptions="Center" />

                                <Label  Grid.Column="2"
                                Text="{Binding Category}"
                                Style="{StaticResource TableDataLabel}"
                                HorizontalOptions="Center" />
                            </Grid>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </FlexLayout>-->

                 
                 <CollectionView  
                                 Grid.Row="1" 
                                 Grid.ColumnSpan="3" 
                                 ItemsSource="{Binding Mappings}"> 
                     <CollectionView.ItemsLayout> 
                         <LinearItemsLayout Orientation="Vertical" /> 
                     </CollectionView.ItemsLayout> 
                     <CollectionView.ItemTemplate> 
                         <DataTemplate > 
                             <Grid x:DataType="mappings:SizeMappingInfo" 
                                   ColumnDefinitions="{markups:OnScreenSize Default='150, 70, 150', ExtraLarge='2*, *, *'}"> 
                                 <Grid.RowDefinitions> 
                                     <RowDefinition Height="{markups:OnScreenSize ExtraSmall=30, Small=30, Medium=30, Large=45, ExtraLarge=80, Default=40}" /> 
                                 </Grid.RowDefinitions> 
                                 <Label Grid.Column="0" 
                                        Text="{Binding CompareMode}" 
                                        Style="{StaticResource TableDataLabel}" 
                                        HorizontalOptions="Center" /> 
                              
                                 <Label Grid.Column="1" 
                                        Text="{Binding DiagonalSize, StringFormat='{0}&quot;'}" 
                                        Style="{StaticResource TableDataLabel}" 
                                        HorizontalOptions="Center" /> 
                              
                                 <Label  Grid.Column="2" 
                                         Text="{Binding Category}" 
                                         Style="{StaticResource TableDataLabel}" 
                                         HorizontalOptions="Center" /> 
                             </Grid> 
                         </DataTemplate> 
                     </CollectionView.ItemTemplate> 
                 </CollectionView> 

            </Grid>


        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

I just sent a message on Linkedin at same time, I have the collectionView working and can not see any problems with it at all currently.

Could you let me know what the specific issue is so that I can test against that scenario please.

I'm unsure of the cause, but when I modify the targetframeworks in the sample's csproj file, I encounter the following error:

"Error NETSDK1045: The current .NET SDK does not support targeting .NET 8.0. Either target .NET 6.0 or lower, or use a version of the .NET SDK that supports .NET 8.0. (NETSDK1045)"

Consequently, I am unable to run the sample app on .NET 8.

Additionally, my machine has been exhibiting unusual behavior since I installed .NET 8.

It is not anything to do with your global is it ? as that will override everything.

I had to create my sample App outside your project, and then I just target the dll from your source project obj/debug folder for the platform I am testing. The development environments are so much harder to setup/work with than writing the actual solutions :(

Yes, you are absolutely correct. I completely overlooked the global.json file I had created. After removing it, the app successfully built.

I also found the problem you are facing on the sample app in .NET 8...

It appears that the issue is related to a difference in how .NET 8 and earlier versions interpret a value, specifically "25". In .NET 8, it is treated as a double, whereas in earlier versions it is treated as a string, leading to a System.InvalidCastException.

image

To resolve this, you can modify the code to ensure consistent interpretation across different .NET versions. This could involve explicitly casting or converting the value to the desired type, or handling the value differently based on the .NET version. By doing so, you'll be able to maintain compatibility and avoid the InvalidCastException.

I believe I've resolved the issues related to the Border CornerRadius.

Here is the NuGet package for you to test:

OnScreenSizeMarkup.Maui.4.0.2-preview.nupkg.zip

Tested on Medium and Large, CornerRadius is working :)

Great! Let's test it for a few more days, and if everything is okay, we can publish a preview NuGet package.

I will do more testing this weekend. I am going with my daughter shortly to meet her new boyfriend and scare him :)
I will integrate the test package into my full project and test the sizes out etc as well.
I hope you have a good weekend and thank you again !

Don't worry about testing it over the weekend, no rush!

By the way, I know what you mean about your daughter... my wife and I are going through the process of in vitro fertilization, and we will probably (and fortunately) face the same situations as you.

Good luck with your daughter :D

Oh wow, good luck to the both of you. I know it is a very expensive process, hopefully in years to come your son/daughter will be looking back over your work thinking wow my Mum did that !

My daughter is looking forward to it, she is 20 now and will laugh at anything stupid I say :)

Hi Carol,

I hope you have had a good weekend.

I have played with the demo and our code as well and everything is working well, no problems or no debug messages coming through unexpectedly. I check the pattern through from the Debug messages and have not seen any element which does not scale/change correctly. This does look good to go.

I am now fully implementing 4.0.2 into our project and after updating all of our resource files etc, will then begin the testing and setting new sizes for all 13 scales we have sent.

Obviously I will not release until you have a full release nuget, this is no rush at all. Just letting you know testing has and is still going very well.

Thank you.

Andy.

Hi Carolina, I have found a small problem and managed to find the fix as well. Corner Radius element works on 1st page, but on 2nd page it falls over and does not update. Going through when you add the Corner Radius to the Converter you convert the value prior to a string (its comes through as an number).

I have pasted my code for the fix below, I have tested this thoroughly and it is working well.

This same action needs to happen within the code within Line 42 of ValueConversionExtensions.shared.cs

Line 42 (current code). CornerRadius comes through as a number so this fails and no return is sent.

 if (ValueConversionExtensions.converter.TryGetValue(toType, out var converter))
 {
     returnValue = converter.ConvertFromInvariantString((string)value!)!;
     return returnValue;
 }

Suggested Fix (this checks if value is a string and if not converts it to string). This should work for everything if any other item is not a string in future.

        if (ValueConversionExtensions.converter.TryGetValue(toType, out var converter))
        {
			if(!(value is string))
			{
				string valueAsString = ConvertNumberToString(value);
				returnValue = converter.ConvertFromInvariantString((string)valueAsString!)!;
				return returnValue;
			}
			returnValue = converter.ConvertFromInvariantString((string)value!)!;
			return returnValue;
        }

This is based on your code fix for corner radius below.

        if (toType == typeof(CornerRadius))
        {
	        converter = (TypeConverter)new Microsoft.Maui.Converters.CornerRadiusTypeConverter();
	        ValueConversionExtensions.converter.Add(toType, converter);
	        string valueAsString = ConvertNumberToString(value);
	        var value1 = converter.ConvertFromInvariantString(valueAsString);
	        return value1!;
        }

Hi Andre, I totally understood the problem and your fix.

I just pushed the changes (fix) to the v4 code base