Xamarin.Forms IndicatorView

IndicatorView は、項目の数と現在の位置を表すインジケーターを CarouselView に表示するコントロールです。

IndicatorView には、次のプロパティが定義されています。

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

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

IndicatorView を作成する

次の例は、XAML の IndicatorView をインスタンス化する方法を示しています。

<StackLayout>
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
</StackLayout>

この例では、CarouselView 内の各項目のインジケーターで、CarouselView の下で IndicatorView がレンダリングされます。 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 プロパティがあり、これは表示インジケーターの最大数を決定します。

次の例では、最大 6 つのインジケーターを表示するように構成している IndicatorView を示します。

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

インジケーターの外観を定義する

各インジケーターの外観は、IndicatorView.IndicatorTemplate プロパティを DataTemplate に設定して定義できます。

<StackLayout>
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   Margin="0,0,0,40"
                   IndicatorColor="Transparent"
                   SelectedIndicatorColor="Transparent"
                   HorizontalOptions="Center">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                <Label Text="&#xf30c;"
                       FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=12}" />
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>
</StackLayout>

DataTemplate に指定された要素では、各インジケーターの外観を定義します。この例では、各インジケーターはフォントアイコンを表示する Label です。

次のスクリーンショットは、フォントアイコンを使用してレンダリングされたインジケーターを示しています。

表示状態を設定する

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>

    <StackLayout>
        ...
        <IndicatorView x:Name="indicatorView"
                       Margin="0,0,0,40"
                       IndicatorColor="Transparent"
                       SelectedIndicatorColor="Transparent"
                       HorizontalOptions="Center">
            <IndicatorView.IndicatorTemplate>
                <DataTemplate>
                    <Label Text="&#xf30c;"
                           FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=12}"
                           Style="{StaticResource IndicatorLabelStyle}" />
                </DataTemplate>
            </IndicatorView.IndicatorTemplate>
        </IndicatorView>
    </StackLayout>
</ContentPage>

この例では、Selected の表示状態は、現在の位置を表すインジケーターの TextColor が黒に設定されることを指定します。それ以外の場合、インジケーターの TextColor は薄い灰色になります。

IndicatorView で選択されている表示状態のスクリーンショット

ビジュアルの状態の詳細については、「Xamarin.Forms Visual State Manager」をご覧ください。

Last updated on 2021-02-24