Xamarin.Forms IndicatorView

  • [アーティクル]

Download Sampleサンプルのダウンロード

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

Screenshot of a CarouselView and IndicatorView, on iOS and Android

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 です。

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

Screenshot of a templated IndicatorView, on iOS and Android

表示状態を設定する

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 は薄い灰色になります。

Screenshot of IndicatorView selected visual state

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