Maui On Screen size Markup Plugin how to adjust Margin Element within Style File

Question

I am currently using this excellent plugin for MAUI which allows me to put all of my resizing within my style sheets which works ideal for my App.

I am struggling on how to figure out how to set a Margin via the plugin via a stylesheet.

Example of it working below.

XAML Page code for an element

<Image 
    Margin="{DynamicResource StackLayoutSmall}"
    MaximumHeightRequest="{DynamicResource SquareImageHeightHomePageLarge}"
    Source="home_water.png">
</Image>

Style Sheet Code containing the Maximum Height Request - The plugin allows me to put the sizing within the style sheet which works excellently.

<OnPlatform x:Key="SquareImageHeightHomePageLarge" x:TypeArguments="x:Double">
    <OnPlatform.Platforms>
        <On Platform="Android">
            <markups:OnScreenSize FallbackType="{x:Type x:Double}"
                                  Default="110"
                                  ExtraSmall="110"
                                  Small="110"                                              
                                  Medium="110"
                                  Large="110"
                                  ExtraLarge="110" />        
        </On>
        <On Platform="iOS">
            <markups:OnScreenSize FallbackType="{x:Type x:Double}"
                                  Default="110"
                                  ExtraSmall="110"
                                  Small="110"                                              
                                  Medium="110"
                                  Large="110"
                                  ExtraLarge="110" />
        </On>
    </OnPlatform.Platforms>
</OnPlatform>

My problem is for Margin elements I am unsure how to use the plugin to target the style sheet for a Thickness Type. Here is my current styling for the Margin for the above Image code.

<Thickness x:Key="StackLayoutSmall">20,40,20,40</Thickness>

I am struggling to figure out a way or if it is possible using the plugin if this is possible. I know I can within the XML page set it as below.

            <Label Margin="{markups:OnScreenSize Medium='15, 15, 0, 0', Large='20, 20, 0, 0', DefaultSize='10, 10, 0, 0'}" Text="Hello" TextColor="White" />
        </Grid>
    </ContentPage.Content>
</ContentPage>

So if anybody has anyone knowledge of this plugin it would be greatly appreciated if you could point me in the correct direction, as putting the code once in the style sheet is so much preferable to setting it through out every call for the Margin on many many elements.

Thank you very much in advance.

Answer 1

I had another play and figured it out thank god.

<!-- Original Thickness element -->
<Thickness x:Key="StacklayoutSmall">20,40,20,40</Thickness>

<!-- New Thickness element using plugin which works -->
<OnPlatform x:Key="StacklayoutSmall" x:TypeArguments="Thickness">
    <OnPlatform.Platforms>
        <On Platform="Android">
            <markups:OnScreenSize FallbackType="{x:Type Thickness}"
                                  Default="20,40,20,40"
                                  ExtraSmall="20,40,20,40"
                                  Small="20,40,20,40"                                              
                                  Medium="20,40,20,40"
                                  Large="80,40,80,40"
                                  ExtraLarge="20,40,20,40" />
        </On>
        <On Platform="iOS">
            <markups:OnScreenSize FallbackType="{x:Type Thickness}"
                                  Default="20,40,20,40"
                                  ExtraSmall="20,40,20,40"
                                  Small="20,40,20,40"                                              
                                  Medium="20,40,20,40"
                                  Large="20,40,20,40"
                                  ExtraLarge="20,40,20,40" />
        </On>
    </OnPlatform.Platforms>
</OnPlatform>

Now all of my screen adjustments for sizing etc are in my resource files, has saved me a huge amount of code.