Markup for controlling Views according to a category a screen size fits in

[carolzbnbr]

I've recently published on my Github a markup extension OnScreenSizeMarkup and also a Nuget which helps controlling UI elements (Views) based on a screen category (ExtraSmall, Small, Medium, Large, ExtraLarge) a device fits in.

Some months ago I've published about this markup on my Blog and people told me that it should be pushed to a larger development community such as Xamarin/Maui Community Toolkit.

At that time I didn't know how to do it, but some days ago, when I published/announced on my LinkedIn about this project, I was lucky to have Gerald Versluis (thanks @jfversluis) commenting in my publication and providing me the initial instructions I needed to make it available on Maui Community toolkit, wether you guys aproves it.

Here is a sample code of the Markup in action:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:markups="clr-namespace:OnScreenSizeMarkup.Forms;assembly=OnScreenSizeMarkup.Forms" >

    <Grid Margin="{markups:OnScreenSize  DefaultSize='8, 0, 8, 0', Large='16, 0, 16, 0'}">
        <Grid.RowDefinitions>
            <RowDefinition Height="{markups:OnScreenSize 
                                                         DefaultSize='60', 
                                                         ExtraSmall='7', 
                                                        Small='8', 
                                                        Medium='60', 
                                                        Large='10', 
                                                        ExtraLarge='13'}" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
            <Label Text="List of Animals" Grid.Row="0" TextColor="Black" HorizontalOptions="CenterAndExpand" FontSize="{markups:OnScreenSize 
                                                                  DefaultSize='16', 
                                                                  Large='25', 
                                                                  ExtraLarge='30'}" VerticalOptions="CenterAndExpand"/>
          
       
    </Grid>
 
</ContentPage>

It enables you to use it not only on FontSizes or RowDefinitions, but on most Visual Element's properties.

It's not ready for MAUI yet, but wether you aproves it, I can finish developing the Maui version (it is just a matter of implementing the markup itself, most of the code we already have will be used as is).

[pictos]

Hey @carolzbnbr thanks for the proposal, do you have the API spec for you markup implementation? If so, can you add here?

[carolzbnbr]

Hi @pictos, I would love to provide the info you need, but help me, what do you mean by "API spec" ?

[pictos]

How will be the surface API, something like this
just the public members

[carolzbnbr]

Here is the public members from OnScreenSize's markup extension:

    OnScreenSize();
    object DefaultSize {get;set;}
    object ExtraSmall {get;set;}
    object Small {get;set;}
    object Medium {get;set;}
    object Large {get;set;}
    object ExtraLarge {get;set;}
    object ProvideValue(IServiceProvider serviceProvider)

[pictos]

I took a look into your current implementation, I've some suggestions that we can make during the implementation here. It makes sense to have this kind of feature!

@carolzbnbr, right we just use absolute values, do you know if we can use proportional values, like the * values in the grid? No need to have this implemented for version 1.0, we can create an enhancement ticket later.

I'm very excited to have a Brazilian contributor here 😄 !

I approve this feature ✅

[carolzbnbr]

Hi Jesus, yeap, actually it works quite well for proportional values.

Actually it works for any kind of values, not only for rowdefinitions or columndefinitions, but for most types of property values on most views (image, grid, label, carouselview, button, and etc).

Sorry about the sample code I provided. I’m kind of embarrassed for providing a fixed grid values as sample code, as we all know that fixed row/column values are not fully responsive for every screen - the main purpose the markup im trying to push to the community is help developers write codes in a more responsive way. Actually I picked it randomly, but for the sample project i can provide maybe a login page with proportional grid values (i can't escape asterisk as markdown here. Can't write proportional values examples).

Im so excited about your approval, thanks for that. I'm sure it will help the community a lot.

And by the way, we need more Brazilian people publishing cool stuffs to the community. I also would like to contribute a bit more to Maui Community Toolkit not only by pushing my own stuffs, but also implementing features other people asks. No idea how to become a "permanent" contributor.

Whats next regarding the markup, Jesus?

Thanks a lot!

[pictos]

@carolzbnbr not sure if we're talking about the same. My question was if it's possible to use proportional values in your markup implementation, so I can do something like

<Label Text="List of Animals"  HeightRequest="{markups:OnScreenSize 
                                                                  DefaultSize='*', 
                                                                  Large='1.5*', 
                                                                  ExtraLarge='3*'}" 
                                                                  VerticalOptions="CenterAndExpand"/>

If it's not possible no worries at all.

The next step is to write a proposal, you can use this one as a sample

[pictos]

No idea how to become a "permanent" contributor.

It's very easy! You just need to participate in the project, reviewing PRs, answering issues/discussions, doing PRs, and helping with docs.

[carolzbnbr]

Well, your example used a label with proportional values for Height. Actually, I'm talking about proportional values for RowDefinitions and ColumnDefinitions only, as far as I'm aware, Xamarin and also MAUI does not support porportional values for labels or other controls. But if does, yes, you can apply proportional values on then too, but as I told you, I'm not sure.

Take a look at this: https://github.com/carolzbnbr/OnScreenSizeMarkup#getting-started

You will see this:

 <Grid RowDefinitions="{markups:OnScreenSize Large='200, *, 200', 
                                                     ExtraLarge='300, *, 300',
                                                     DefaultSize='100, *, 100'}">

Which for Row and column Definitions, it works like a charm.

Hope to be answered your question, if not, please let me know.

[CliffAgius]

Closed as per the Community Stand-up discussion here: https://youtu.be/N9wMcBP4jtg?t=2889