IndicatorView

项目
2025-02-25

.NET Multi-platform App UI (.NET MAUI) IndicatorView 是一个控件，它在 CarouselView 中显示表示项数量和当前位置的指示器：

Screenshot of a CarouselView and IndicatorView.

IndicatorView 定义以下属性:

Count，类型为 int，表示指示器的数量。
HideSingle，类型为 bool，指示当只存在一个指示器时是否应隐藏该指示器。默认值为 true。
IndicatorColor，类型为 Color，表示指示器的颜色。
IndicatorSize，类型为 double，表示指示器的大小。默认值为 6.0。
IndicatorLayout，类型为 Layout<View>，定义用于呈现 IndicatorView 的布局类。此属性由 .NET MAUI 设置，通常不需要由开发人员设置。
IndicatorTemplate，类型为 DataTemplate，用于定义每个指示器外观的模板。
IndicatorsShape，类型为 IndicatorShape，表示每个指示器的形状。
ItemsSource，类型为 IEnumerable，表示将为其显示指示器的集合。设置 CarouselView.IndicatorView 属性时，将自动设置此属性。
MaximumVisible，类型为 int，表示可见指示器的最大数量。默认值为 int.MaxValue。
Position，类型为 int，表示当前选定的指示器索引。此属性使用 TwoWay 绑定。设置 CarouselView.IndicatorView 属性时，将自动设置此属性。
SelectedIndicatorColor，类型为 Color，表示 CarouselView 中当前项的指示器的颜色。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

创建 IndicatorView

若要向页面添加指示器，需创建 IndicatorView 对象，并设置其 IndicatorColor 和 SelectedIndicatorColor 属性。此外，将 CarouselView.IndicatorView 属性设置为 IndicatorView 对象的名称。

下面的示例展示了如何在 XAML 中创建 IndicatorView：

<Grid RowDefinitions="*,Auto">
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   Grid.Row="1"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
</Grid>

在此示例中，IndicatorView 呈现在 CarouselView 下面，CarouselView 中的每一项都有一个指示器。通过将 CarouselView.IndicatorView 属性设置为 IndicatorView 对象，可以用数据填充 IndicatorView。每个指示器都是浅灰色的圆圈，而 CarouselView 中表示当前项的指示器是深灰色的。

重要

设置 CarouselView.IndicatorView 属性会导致 IndicatorView.Position 属性绑定到 CarouselView.Position 属性，而 IndicatorView.ItemsSource 则绑定到 CarouselView.ItemsSource。

更改指示器形状

IndicatorView 类具有 IndicatorsShape 属性，该属性确定指示器的形状。可以将此属性设置为 IndicatorShape 枚举成员之一：

Circle 指定指示器形状为圆形。这是 IndicatorView.IndicatorsShape 属性的默认值。
Square 指示指示器形状为方形。

以下示例展示了配置为使用方形指示器的 IndicatorView：

<IndicatorView x:Name="indicatorView"
               IndicatorsShape="Square"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

更改指示器大小

IndicatorView 类具有类型为 double 的 IndicatorSize 属性，该属性以设备无关单位确定指示器的大小。该属性的默认值为 6.0。

以下示例展示了配置为显示较大指示器的 IndicatorView：

<IndicatorView x:Name="indicatorView"
               IndicatorSize="18" />

限制显示的指示器数量

IndicatorView 类具有类型为 int 的 MaximumVisible 属性，该属性可确定可见指示器的最大数量。

以下示例展示了配置为最多显示六个指示器的 IndicatorView：

<IndicatorView x:Name="indicatorView"
               MaximumVisible="6" />

定义指示器外观

可以通过将 IndicatorView.IndicatorTemplate 属性设置为 DataTemplate 来定义每个指示器的外观：

<Grid RowDefinitions="*,Auto">
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   Grid.Row="1"
                   Margin="0,0,0,40"
                   IndicatorColor="Transparent"
                   SelectedIndicatorColor="Transparent"
                   HorizontalOptions="Center">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                <Label Text="&#xf30c;"
                       FontFamily="ionicons"
                       FontSize="12" />
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>
</Grid>

DataTemplate 中指定的元素定义了每个指示器的外观。在此示例中，每个指示器都是显示字体图标的 Label。

下面的屏幕截图展示了使用字体图标呈现的指示器：

Screenshot of a templated IndicatorView.

设置视觉状态

IndicatorView 具有 Selected 视觉状态，可用于启动对 IndicatorView 中当前位置的指示器的视觉更改。此 VisualState 的常见用例是更改表示当前位置的指示器的颜色：

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="IndicatorLabelStyle"
               TargetType="Label">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="LightGray" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="Black" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>

    <Grid RowDefinitions="*,Auto">
        ...
        <IndicatorView x:Name="indicatorView"
                       Grid.Row="1"
                       Margin="0,0,0,40"
                       IndicatorColor="Transparent"
                       SelectedIndicatorColor="Transparent"
                       HorizontalOptions="Center">
            <IndicatorView.IndicatorTemplate>
                <DataTemplate>
                    <Label Text="&#xf30c;"
                           FontFamily="ionicons"
                           FontSize="12"
                           Style="{StaticResource IndicatorLabelStyle}" />
                </DataTemplate>
            </IndicatorView.IndicatorTemplate>
        </IndicatorView>
    </Grid>
</ContentPage>

在此示例中，Selected 视觉状态指定将表示当前位置的指示器的 TextColor 设置为黑色。否则，指示器的 TextColor 将呈浅灰色：

Screenshot of IndicatorView selected visual state.

要详细了解视觉状态，请参阅视觉状态。

通过