Using Style Sheet for a Margin Element

[Andy-Donegan]

This is not a bug or feature request, it is support I guess. Sorry I have posted on Stack Overflow but if you do know the Answer, it might be worthwhile adding it to the Front Page documentation. It is how to set elements like a thickness (for margins/padding) via a style sheet.

I have posted this on Stack Overflow as well.

The Plugin is working excellently and has saved me hours of time, I have just come across a use case scenario I am unsure how to work with/around.

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

My Resource File containing the Margin reads as below, I have played and tried to guess as to how I would code using the plugin to allow me to call a thickness element or how to even begin to code it like your example to be able to call these values using style sheets.

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

Standard items for values work so well like below for the MaximumHeightRequest

    <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>

Thank you in advance if you do get time to look into this, if I do figure out a way around I will post back here.

Merry Christmas.

[Andy-Donegan]

Hi Carol,

After posting my stack overflow questions, I figured out where I was going wrong and have managed to refence an object type. So sorry to have bothered you, excellent plugin. I will close this now.

// Example of original Key
<Thickness x:Key="StacklayoutSmall">20,40,20,40</Thickness>

// New OnScreenSizeMarkup Key working
<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>

[carolzbnbr]

Glad you managed to solve the issue.

Good luck on your app.

:D