Maui 屏幕尺寸标记插件如何调整样式文件中的边距元素

Question

我目前正在使用这个优秀的插件 https://github.com/carolzbnbr/OnScreenSizeMarkup.Maui for Maui，它允许我将所有大小调整放在我的样式表中，这非常适合我的应用程序。

我正在努力弄清楚如何通过样式表通过插件设置边距。

下面是其工作示例。

元素的 Xaml 页面代码

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

包含最大高度请求的样式表代码 - 该插件允许我将尺寸调整到样式表中，效果非常好。

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

我的问题是对于边距元素，我不确定如何使用该插件来定位厚度类型的样式表。 这是我当前的上述图像代码的边距样式。

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

我正在努力找出一种方法，或者是否可以使用该插件（如果可能的话）。我知道我可以在 Xml 页面中将其设置如下。

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

因此，如果有人了解这个插件，如果您能指出正确的方向，我将不胜感激，因为将代码一次放入样式表中比在许多情况下对 Margin 的每次调用中设置它要好得多很多元素。

提前非常感谢您。

Answer 1

我又玩了一次，谢天谢地，我明白了。

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

现在我所有的屏幕大小调整等都在我的资源文件中，为我节省了大量的代码。