IndicatorView

[アーティクル]
02/13/2024

.NET Multi-platform App UI (.NET MAUI) IndicatorView は、項目の数と現在の位置を表すインジケーターを CarouselView に表示するコントロールです。

Screenshot of a CarouselView and IndicatorView.

IndicatorView は次の特性を定義します。

int 型の Count は、インジケーターの数です。
bool 型の HideSingle は、インジケーターが 1 つだけ存在する場合に非表示にする必要があるかどうかを示します。既定値は true です。
Color 型の IndicatorColor は、インジケーターの色です。
double 型の IndicatorSize は、インジケーターのサイズです。既定値は 6.0 です。
Layout<View> 型の IndicatorLayout は、IndicatorView のレンダリングに使用するレイアウトクラスを定義します。このプロパティは .NET MAUI によって設定されるため、通常は開発者が設定する必要はありません。
DataTemplate 型の IndicatorTemplate は、各インジケーターの外観を定義するテンプレートです。
IndicatorShape 型の IndicatorsShape は、各インジケーターの形状です。
IEnumerable 型の ItemsSource は、インジケーターが表示されるコレクションです。このプロパティは、CarouselView.IndicatorView プロパティが設定されると自動的に設定されます。
int 型の MaximumVisible は、表示されるインジケーターの最大数です。既定値は int.MaxValue です。
int 型の Position は、現在選択されているインジケーターインデックスです。このプロパティは、TwoWay バインディングを使用します。このプロパティは、CarouselView.IndicatorView プロパティが設定されると自動的に設定されます。
Color 型の SelectedIndicatorColor は、CarouselView 内の現在の項目を表すインジケーターの色です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データバインディングの対象にすることができ、スタイルを設定できます。

IndicatorView を作成する

ページにインジケーターを追加するには、IndicatorView オブジェクトを作成し、IndicatorColor と SelectedIndicatorColor のプロパティを設定します。さらに、IndicatorView オブジェクトの名前に CarouselView.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 内の各項目のインジケーターが表示されます。 IndicatorView には、CarouselView.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 プロパティがあります。

次の例では、最大 6 つのインジケーターを表示するように構成された 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.

ビジュアルの状態の詳細については、「表示状態」をご覧ください。