.NET Maui中如何在统一按钮样式中应用阴影效果？

你之前的两种Setter写法都不符合.NET Maui的语法规则：

• <Setter Property="Shadow" HasShadow="True"/>：Shadow属性是一个Shadow类型的对象，不是布尔值，不能这么赋值
• <Setter Property="Shadow" x:Key="Shadow"/>：x:Key是用来标记资源的，不能用在Setter内部

两种可行的解决方式 #

方式一：直接在样式里定义Shadow #

在UnifiedButtonStyle的Setter列表里添加这段代码，直接给Shadow属性赋值：

<Setter Property="Shadow">
    <Setter.Value>
        <Shadow Brush="Black"
                Offset="20,20"
                Radius="40"
                Opacity="0.8" />
    </Setter.Value>
</Setter>

方式二：复用已定义的Shadow资源 #

如果你想重复使用之前定义好的Shadow资源，用StaticResource引用它就行：

<Setter Property="Shadow" Value="{StaticResource Shadow}" />

修改后的完整样式代码 #

<ContentPage.Resources>
    <ResourceDictionary>
        <!-- Shadows -->
        <Shadow Brush="Black"
                x:Key="Shadow"
                Offset="20,20"
                Radius="40"
                Opacity="0.8" />
        <!-- Unified Button Style -->
        <Style x:Key="UnifiedButtonStyle" TargetType="Button">
            <Setter Property="BackgroundColor" Value="#4169E1"/>
            <Setter Property="TextColor" Value="White"/>
            <Setter Property="CornerRadius" Value="15"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="FontFamily" Value="Poppins-Medium"/>
            <!-- 引用已定义的Shadow资源 -->
            <Setter Property="Shadow" Value="{StaticResource Shadow}" />
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="TranslationY" Value="0"/>
                                <Setter Property="Opacity" Value="1"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <VisualState.Setters>
                                <Setter Property="Scale" Value="0.98" />
                                <Setter Property="TranslationY" Value="2"/>
                                <Setter Property="Opacity" Value="0.9"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="#4169E1" Offset="0.0" />
                        <GradientStop Color="#4169E1" Offset="0.5" />
                        <GradientStop Color="#4169E1" Offset="1.0" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

额外优化建议 #

• 因为你的按钮用了渐变背景，要确保CornerRadius的圆角和阴影的圆角匹配，避免阴影出现直角
• 可以在Pressed视觉状态里调整阴影的偏移量或透明度，让按压反馈更真实，比如：

<VisualState x:Name="Pressed">
    <VisualState.Setters>
        <Setter Property="Scale" Value="0.98" />
        <Setter Property="TranslationY" Value="2"/>
        <Setter Property="Opacity" Value="0.9"/>
        <Setter Property="Shadow.Offset" Value="10,10" />
    </VisualState.Setters>
</VisualState>

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