Xamarin.Forms IndicatorView

  • Článek

Download Sample Stažení ukázky

Jedná se IndicatorView o ovládací prvek, který zobrazuje indikátory představující počet položek a aktuální pozici v :CarouselView

Screenshot of a CarouselView and IndicatorView, on iOS and Android

IndicatorView definuje následující vlastnosti:

  • Count, typu int, počet ukazatelů.
  • HideSingle, typu booloznačuje, zda má být indikátor skrytý, pokud existuje pouze jeden. Výchozí hodnota je true.
  • IndicatorColor, typu Color, barva indikátorů.
  • IndicatorSize, typu double, velikost ukazatelů. Výchozí hodnota je 6,0.
  • IndicatorLayout, typu Layout<View>, definuje třídu rozložení použitou k vykreslení IndicatorView. Tato vlastnost je nastavena pomocí Xamarin.Formsa obvykle nemusí být nastavena vývojáři.
  • IndicatorTemplate, typu DataTemplate, šablona, která definuje vzhled každého ukazatele.
  • IndicatorsShape, typu IndicatorShape, tvar každého ukazatele.
  • ItemsSource, typu IEnumerable, kolekce, pro které budou zobrazeny indikátory. Tato vlastnost se automaticky nastaví při CarouselView.IndicatorView nastavení vlastnosti.
  • MaximumVisible, typu int, maximální počet viditelných ukazatelů. Výchozí hodnota je int.MaxValue.
  • Position, typu int, aktuálně vybraný index indikátoru. Tato vlastnost používá TwoWay vazbu. Tato vlastnost se automaticky nastaví při CarouselView.IndicatorView nastavení vlastnosti.
  • SelectedIndicatorColor, typu Color, barva indikátoru, který představuje aktuální položku v objektu CarouselView.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Vytvoření zobrazení indikátoru

Následující příklad ukazuje, jak vytvořit IndicatorView instanci v JAZYCE XAML:

<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>

V tomto příkladu IndicatorView se zobrazí pod CarouselViewznakem , s indikátorem pro každou položku v objektu CarouselView. Naplní se IndicatorView daty nastavením CarouselView.IndicatorView vlastnosti na IndicatorView objekt. Každý indikátor je světle šedý kruh, zatímco indikátor, který představuje aktuální položku v CarouselView šedé barvě.

Důležité

CarouselView.IndicatorView Nastavením vlastnosti vznikne IndicatorView.Position vazba vlastnosti na CarouselView.Position vlastnost a IndicatorView.ItemsSource vazba vlastnosti na CarouselView.ItemsSource vlastnost.

Změnit obrazec ukazatele

Třída IndicatorView má IndicatorsShape vlastnost, která určuje tvar indikátorů. Tuto vlastnost lze nastavit na jeden z členů výčtu IndicatorShape :

  • Circle určuje, že obrazce ukazatele budou kruhové. Toto je výchozí hodnota IndicatorView.IndicatorsShape vlastnosti.
  • Square označuje, že obrazce ukazatele budou čtvercové.

Následující příklad ukazuje nakonfigurované IndicatorView použití čtvercových indikátorů:

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

Změnit velikost ukazatele

Třída IndicatorView má IndicatorSize vlastnost typu double, která určuje velikost indikátorů v jednotkách nezávislých na zařízení. Výchozí hodnota této vlastnosti je 6,0.

Následující příklad ukazuje nakonfigurované IndicatorView zobrazení větších indikátorů:

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

Omezení počtu zobrazených indikátorů

Třída IndicatorView má MaximumVisible vlastnost typu int, která určuje maximální počet viditelných indikátorů.

Následující příklad ukazuje nakonfigurovaný IndicatorView tak, aby zobrazoval maximálně šest indikátorů:

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

Definování vzhledu ukazatele

Vzhled každého indikátoru lze definovat nastavením IndicatorView.IndicatorTemplate vlastnosti na 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>

Prvky zadané v definici DataTemplate vzhledu každého indikátoru. V tomto příkladu je každý indikátor, Label který zobrazuje ikonu písma.

Následující snímky obrazovky ukazují indikátory vykreslené pomocí ikony písma:

Screenshot of a templated IndicatorView, on iOS and Android

Nastavení stavů vizuálů

IndicatorViewSelected má vizuální stav, který lze použít k zahájení vizuální změny indikátoru aktuální pozice v objektu IndicatorView. Běžným případem použití je VisualState změna barvy indikátoru, který představuje aktuální pozici:

<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>

V tomto příkladu určuje stav vizuálu Selected , že indikátor představující aktuální pozici bude mít nastavenou TextColor na černou. TextColor Jinak bude indikátor světle šedý:

Screenshot of IndicatorView selected visual state

Další informace o vizuálních stavech najdete v tématu Xamarin.Forms Visual State Manager.