如何在MAUI样式文件中使用OnScreenSizeMarkup插件设置Margin

方法1：直接在Style的Setter中配置动态Thickness #

先确保你的样式文件（比如Styles.xaml）已经引入OnScreenSizeMarkup的命名空间：

xmlns:onScreen="clr-namespace:OnScreenSizeMarkup.Maui;assembly=OnScreenSizeMarkup.Maui"

接着在Style里通过OnScreenSize标记扩展直接生成适配不同屏幕的Thickness值：

<Style TargetType="ContentView">
    <Setter Property="Margin">
        <Setter.Value>
            <onScreen:OnScreenSize x:TypeArguments="Thickness"
                                   Small="10,15,10,15"
                                   Medium="15,20,15,20"
                                   Large="20,25,20,25" />
        </Setter.Value>
    </Setter>
</Style>

方法2：定义可复用的动态Thickness资源 #

如果需要在多个样式中复用同一套Margin适配规则，可以先把动态Thickness定义为资源，再在Style中引用：

<!-- 在ResourceDictionary中定义全局动态Margin资源 -->
<onScreen:OnScreenSize x:Key="GlobalDynamicMargin" x:TypeArguments="Thickness"
                       Small="8,12,8,12"
                       Medium="12,16,12,16"
                       Large="16,20,16,20" />

<!-- 在样式中引用该资源 -->
<Style TargetType="Button">
    <Setter Property="Margin" Value="{StaticResource GlobalDynamicMargin}" />
</Style>

<Style TargetType="Label">
    <Setter Property="Margin" Value="{StaticResource GlobalDynamicMargin}" />
</Style>

关键注意点 #

• 按照你的插件配置（默认断点或自定义断点）填写对应尺寸的Thickness值，格式为left,top,right,bottom
• 这种方式完全替代静态Thickness资源，所有引用该样式的控件会自动根据屏幕尺寸应用对应Margin，实现统一配置

内容的提问来源于stack exchange，提问作者Andy Donegan