.NET MAUI中如何为自定义组件内的SearchBar设置外部样式

在.NET MAUI中，自定义组件的内部控件默认不会自动继承外部页面的样式资源，这就是你之前的样式不生效的核心原因。要实现外部页面控制自定义组件内SearchBar的样式，我们可以通过暴露可绑定的样式属性或者**使用动态资源（DynamicResource）**这两种常用方案来解决，下面分别详细说明：

方案一：给自定义组件添加可绑定的SearchBar样式属性 #

这种方案的核心是让你的LanguageDropdown组件对外暴露一个可绑定的属性，用于接收外部传入的SearchBar样式，这样外部页面就能直接把自定义样式传递给组件内部的SearchBar。

步骤1：在自定义组件的代码-behind中添加可绑定属性 #

打开LanguageDropdown.xaml.cs，添加以下代码：

using Microsoft.Maui.Controls;
using CommunityToolkit.Maui.Views;

namespace PSC.Maui.Components.LanguageDropdown;

public partial class LanguageDropdown : Popup
{
    // 定义可绑定的SearchBar样式属性
    public static readonly BindableProperty SearchBarStyleProperty =
        BindableProperty.Create(
            nameof(SearchBarStyle), 
            typeof(Style), 
            typeof(LanguageDropdown), 
            defaultValue: null);

    public Style SearchBarStyle
    {
        get => (Style)GetValue(SearchBarStyleProperty);
        set => SetValue(SearchBarStyleProperty, value);
    }

    public LanguageDropdown()
    {
        InitializeComponent();
    }

    // 保留你原有的searchBar_TextChanged方法
    private void searchBar_TextChanged(object sender, TextChangedEventArgs e)
    {
        // 你的现有逻辑
    }
}

步骤2：在组件XAML中绑定SearchBar的Style到这个属性 #

修改组件内的SearchBar标签，把Style属性绑定到我们刚定义的SearchBarStyle：

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:ldd="clr-namespace:PSC.Maui.Components.LanguageDropdown;assembly=PSC.Maui.Components.LanguageDropdown"
             x:Class="PSC.Maui.Components.LanguageDropdown.LanguageDropdown">
    <Grid>
        <Grid Margin="10,0,10,0">
            <SearchBar x:Name="searchBar" 
                       Margin="0,0,5,5" 
                       ios:SearchBar.SearchBarStyle="Minimal" 
                       BackgroundColor="White" 
                       Placeholder="Search" 
                       TextChanged="searchBar_TextChanged" 
                       VerticalOptions="FillAndExpand"
                       <!-- 绑定到组件的SearchBarStyle属性 -->
                       Style="{Binding SearchBarStyle, Source={RelativeSource AncestorType={x:Type ldd:LanguageDropdown}}}" />
        </Grid>
    </Grid>
</toolkit:Popup>

步骤3：在外部页面中定义样式并传递给组件 #

现在你可以在使用组件的页面中定义样式，然后通过组件的SearchBarStyle属性传递进去：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ldd="clr-namespace:PSC.Maui.Components.LanguageDropdown;assembly=PSC.Maui.Components.LanguageDropdown"
             x:Class="YourApp.YourPage">
    <ContentPage.Resources>
        <!-- 定义自定义的SearchBar样式 -->
        <Style x:Key="CustomSearchBarStyle" TargetType="SearchBar">
            <Setter Property="TextColor" Value="Black" />
            <!-- 你还可以添加其他样式设置，比如PlaceholderColor、FontSize等 -->
        </Style>
    </ContentPage.Resources>

    <!-- 使用组件并传递样式 -->
    <ldd:LanguageDropdown SearchBarStyle="{StaticResource CustomSearchBarStyle}" />
</ContentPage>

方案二：使用DynamicResource动态资源（适合仅修改单个属性的场景） #

如果你只需要修改SearchBar的单个属性（比如仅修改TextColor），可以用DynamicResource来简化实现，不需要修改组件的C#代码。

步骤1：修改组件内的SearchBar，用DynamicResource绑定TextColor #

在组件的XAML中，把SearchBar的TextColor绑定到一个动态资源键：

<SearchBar x:Name="searchBar" 
           Margin="0,0,5,5" 
           ios:SearchBar.SearchBarStyle="Minimal" 
           BackgroundColor="White" 
           Placeholder="Search" 
           TextChanged="searchBar_TextChanged" 
           VerticalOptions="FillAndExpand"
           <!-- 绑定到动态资源键 -->
           TextColor="{DynamicResource CustomSearchBarTextColor}" />

步骤2：在外部页面中定义动态资源的值 #

在使用组件的页面资源中，定义这个动态资源键对应的颜色值：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ldd="clr-namespace:PSC.Maui.Components.LanguageDropdown;assembly=PSC.Maui.Components.LanguageDropdown"
             x:Class="YourApp.YourPage">
    <ContentPage.Resources>
        <!-- 定义动态资源的颜色值 -->
        <Color x:Key="CustomSearchBarTextColor">Black</Color>
    </ContentPage.Resources>

    <!-- 直接使用组件即可，动态资源会自动生效 -->
    <ldd:LanguageDropdown />
</ContentPage>

为什么你之前的写法不生效？ #

你之前的样式写法存在两个关键问题：

1. x:Key="ldd:LanguageDropdown"的写法错误：x:Key应该是一个字符串标识，而不是命名空间+组件名的组合；
2. 组件内部的SearchBar没有主动引用这个样式：默认情况下，页面的资源不会自动渗透到自定义组件的内部模板中，必须通过组件主动接收或绑定的方式才能应用外部样式。

内容来源于stack exchange