.NET Maui中如何用Data Template自定义IndicatorView选中项UI

完全可行，.NET MAUI的IndicatorView支持通过数据模板结合绑定逻辑，轻松实现选中项为长条、未选中项为球形的差异化UI效果，以下是两种常用实现方式：

方式一：使用DataTemplateSelector区分样式 #

通过自定义模板选择器，根据IndicatorViewItem的IsSelected属性返回不同模板：

1. 创建模板选择器类

public class IndicatorTemplateSelector : DataTemplateSelector
{
    public DataTemplate SelectedTemplate { get; set; }
    public DataTemplate UnselectedTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var indicatorItem = item as IndicatorViewItem;
        return indicatorItem?.IsSelected == true ? SelectedTemplate : UnselectedTemplate;
    }
}

2. 在XAML中定义模板并使用选择器

<ContentPage.Resources>
    <!-- 选中项模板：长条形状 -->
    <DataTemplate x:Key="SelectedIndicatorTemplate">
        <Frame CornerRadius="4" 
               WidthRequest="24" 
               HeightRequest="8" 
               BackgroundColor="#FF5722"
               Margin="2" />
    </DataTemplate>

    <!-- 未选中项模板：球形 -->
    <DataTemplate x:Key="UnselectedIndicatorTemplate">
        <Frame CornerRadius="8" 
               WidthRequest="8" 
               HeightRequest="8" 
               BackgroundColor="#CCCCCC"
               Margin="2" />
    </DataTemplate>

    <!-- 注册模板选择器 -->
    <local:IndicatorTemplateSelector x:Key="IndicatorTemplateSelector"
                                     SelectedTemplate="{StaticResource SelectedIndicatorTemplate}"
                                     UnselectedTemplate="{StaticResource UnselectedIndicatorTemplate}" />
</ContentPage.Resources>

<!-- 应用到IndicatorView -->
<IndicatorView IndicatorTemplate="{StaticResource IndicatorTemplateSelector}"
               ItemsSource="{Binding CarouselItems}"
               SelectedIndex="{Binding CurrentIndex}" />

方式二：单个DataTemplate内动态切换样式 #

无需额外选择器，通过绑定IsSelected属性结合值转换器，动态修改控件的尺寸和形状：

1. 实现值转换器

// 布尔值转尺寸转换器
public class BoolToSizeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool isSelected = (bool)value;
        var sizes = parameter.ToString().Split(',');
        return isSelected ? double.Parse(sizes[0]) : double.Parse(sizes[1]);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        => throw new NotImplementedException();
}

// 布尔值转圆角转换器
public class BoolToCornerRadiusConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool isSelected = (bool)value;
        var radii = parameter.ToString().Split(',');
        return isSelected ? int.Parse(radii[0]) : int.Parse(radii[1]);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        => throw new NotImplementedException();
}

2. 在XAML中绑定使用

<ContentPage.Resources>
    <local:BoolToSizeConverter x:Key="BoolToSizeConverter" />
    <local:BoolToCornerRadiusConverter x:Key="BoolToCornerRadiusConverter" />
</ContentPage.Resources>

<IndicatorView ItemsSource="{Binding CarouselItems}"
               SelectedIndex="{Binding CurrentIndex}">
    <IndicatorView.IndicatorTemplate>
        <DataTemplate>
            <Frame BackgroundColor="#FF5722"
                   WidthRequest="{Binding IsSelected, Converter={StaticResource BoolToSizeConverter}, ConverterParameter='24,8'}"
                   HeightRequest="8"
                   CornerRadius="{Binding IsSelected, Converter={StaticResource BoolToCornerRadiusConverter}, ConverterParameter='4,8'}"
                   Margin="2" />
        </DataTemplate>
    </IndicatorView.IndicatorTemplate>
</IndicatorView>

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