如何为特定父元素下的子元素自动应用XAML样式？

我有一个包含若干输入字段的ContentPage（page1），在页面顶部定义了字段的Style，为所有输入字段应用相同样式：

<ContentPage x:Name="page1">
    <ContentPage.Resources>
        <Style TargetType="StackLayout">
            <Setter Property="Spacing" Value="4"/>
        </Style>
        <Style TargetType="Border">
            <Setter Property="Padding" Value="10,0"/>
        </Style>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="Medium"/>
            <Setter Property="Margin" Value="0,0,0,4"/>
        </Style>
    </ContentPage.Resources>

    <!-- input field-->
    <StackLayout>
        <Label Text="Name"/>
        <Border>
            <Entry Text="{Binding UserName}"
                   Placeholder="Enter name..."/>
        </Border>
    </StackLayout>

    <!-- more fields here -->
</ContentPage>

还有另一个ContentPage（page2），输入字段用了相同的Style设置。为避免代码重复，想在App.xaml这类全局位置一次性定义Style并复用。

我知道一种方案是给Style定义键，比如：

<Style TargetType="StackLayout" x:Key="InputFieldStyle">

但这需要给每个要应用样式的元素手动设键，连StackLayout下的所有子元素都要操作一遍。我想知道有没有办法仅当子元素位于特定元素下时才自动应用样式，比如Border位于特定StackLayout下时，自动应用Style X。

解决方案1：使用StyleClass（推荐） #

通过给全局样式添加Class属性，只需给父容器设置StyleClass，其下的目标元素就能自动匹配并应用对应样式，无需逐个元素设置键。

步骤1：在App.xaml中定义全局样式 #

<Application.Resources>
    <!-- 父容器StackLayout的样式 -->
    <Style TargetType="StackLayout" Class="InputContainer">
        <Setter Property="Spacing" Value="4"/>
    </Style>
    <!-- 仅当Label在标记为InputContainer的StackLayout下时应用 -->
    <Style TargetType="Label" Class="InputContainer">
        <Setter Property="FontSize" Value="Medium"/>
        <Setter Property="Margin" Value="0,0,0,4"/>
    </Style>
    <!-- 仅当Border在标记为InputContainer的StackLayout下时应用 -->
    <Style TargetType="Border" Class="InputContainer">
        <Setter Property="Padding" Value="10,0"/>
    </Style>
</Application.Resources>

步骤2：在页面中给父StackLayout设置StyleClass #

<!-- input field-->
<StackLayout StyleClass="InputContainer">
    <Label Text="Name"/>
    <Border>
        <Entry Text="{Binding UserName}"
               Placeholder="Enter name..."/>
    </Border>
</StackLayout>

这样只要StackLayout的StyleClass设为InputContainer，其下的Label和Border就会自动应用对应的全局样式，无需单独配置每个子元素。

解决方案2：封装自定义输入控件 #

如果输入字段的结构固定（Label + Border + Entry），可以直接把样式和结构封装成自定义控件，页面中直接调用即可，彻底避免重复代码。

步骤1：创建自定义输入控件（InputField.xaml） #

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.InputField">
    <ContentView.Resources>
        <Style TargetType="StackLayout">
            <Setter Property="Spacing" Value="4"/>
        </Style>
        <Style TargetType="Border">
            <Setter Property="Padding" Value="10,0"/>
        </Style>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="Medium"/>
            <Setter Property="Margin" Value="0,0,0,4"/>
        </Style>
    </ContentView.Resources>
    <StackLayout>
        <Label x:Name="TitleLabel"/>
        <Border>
            <Entry x:Name="InputEntry"/>
        </Border>
    </StackLayout>
</ContentView>

步骤2：在后台代码添加绑定属性 #

public partial class InputField : ContentView
{
    public static readonly BindableProperty TitleProperty =
        BindableProperty.Create(nameof(Title), typeof(string), typeof(InputField));

    public static readonly BindableProperty TextProperty =
        BindableProperty.Create(nameof(Text), typeof(string), typeof(InputField), defaultBindingMode: BindingMode.TwoWay);

    public static readonly BindableProperty PlaceholderProperty =
        BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(InputField));

    public string Title
    {
        get => (string)GetValue(TitleProperty);
        set => SetValue(TitleProperty, value);
    }

    public string Text
    {
        get => (string)GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    public string Placeholder
    {
        get => (string)GetValue(PlaceholderProperty);
        set => SetValue(PlaceholderProperty, value);
    }

    public InputField()
    {
        InitializeComponent();
        TitleLabel.SetBinding(Label.TextProperty, new Binding(nameof(Title), source: this));
        InputEntry.SetBinding(Entry.TextProperty, new Binding(nameof(Text), source: this));
        InputEntry.SetBinding(Entry.PlaceholderProperty, new Binding(nameof(Placeholder), source: this));
    }
}

步骤3：在页面中使用自定义控件 #

<local:InputField Title="Name" Text="{Binding UserName}" Placeholder="Enter name..."/>

这种方式不仅复用了样式，连布局结构都统一维护，后续修改样式或结构只需修改自定义控件即可，代码最简洁。

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