Xamarin.Forms IndicatorView

Stažení ukázky

IndicatorViewJe ovládací prvek, který zobrazuje Indikátory představující počet položek a aktuální pozici v CarouselView :

Snímek obrazovky s pro pro iOS a Android

IndicatorView definuje následující vlastnosti:

• Counttyp int , počet ukazatelů.
• HideSingletyp bool Určuje, zda má být indikátor skryt, pokud existuje pouze jeden. Výchozí hodnota je true.
• IndicatorColortyp Color , Barva indikátorů.
• IndicatorSize, typu double , velikost indikátorů. Výchozí hodnota je 6,0.
• IndicatorLayouttyp Layout<View> definuje třídu rozložení použitou k vykreslení IndicatorView . Tato vlastnost je nastavena Xamarin.Forms na hodnotu a obvykle není nutné ji nastavovat vývojáři.
• IndicatorTemplatetyp šablony, DataTemplate která definuje vzhled každého indikátoru.
• IndicatorsShape, typu IndicatorShape , tvar každého indikátoru.
• ItemsSourcetyp IEnumerable , pro kolekci, pro kterou budou zobrazeny indikátory. Tato vlastnost bude automaticky nastavena, když CarouselView.IndicatorView je nastavena vlastnost.
• MaximumVisible, typu int , maximální počet viditelných indikátorů. Výchozí hodnota je int.MaxValue.
• Position, typu int , aktuálně vybraného indexu indikátoru. Tato vlastnost používá TwoWay vazbu. Tato vlastnost bude automaticky nastavena, když CarouselView.IndicatorView je nastavena vlastnost.
• SelectedIndicatorColortyp Color , barva indikátoru, který představuje aktuální položku v CarouselView .

Tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že mohou být cílem datových vazeb a se styly.

Vytvoření IndicatorView

Následující příklad ukazuje, jak vytvořit instanci IndicatorView 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 je vykreslena pod CarouselView , s indikátorem pro každou položku v CarouselView . IndicatorViewVlastnost je naplněna daty nastavením CarouselView.IndicatorView vlastnosti IndicatorView objektu. Každý indikátor je lehký šedý kruh, zatímco indikátor, který představuje aktuální položku v, CarouselView je tmavě šedá.

Změnit obrazec indikátoru

IndicatorViewTřída má IndicatorsShape vlastnost, která určuje tvar indikátorů. Tato vlastnost může být nastavena na jeden ze IndicatorShape členů výčtu:

• Circle Určuje, že budou obrazce indikátoru kruhové. Toto je výchozí hodnota IndicatorView.IndicatorsShape Vlastnosti.
• Square označuje, že obrazce indikátoru budou čtvercové.

Následující příklad ukazuje, že je IndicatorView nakonfigurováno použití čtvercových indikátorů:

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

Změnit velikost indikátoru

IndicatorViewTřída 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, že je IndicatorView nakonfigurován tak, aby zobrazoval větší indikátory:

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

Omezit počet zobrazených indikátorů

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

Následující příklad ukazuje, že je IndicatorView nakonfigurován tak, aby zobrazoval maximálně šest ukazatelů:

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

Definovat vzhled indikátoru

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 prvku DataTemplate definujte vzhled každého indikátoru. V tomto příkladu je každý ukazatel Label , který zobrazuje ikonu písma.

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

snímek obrazovky se šablonou

Nastavení vizuálních stavů

IndicatorView má Selected vizuální stav, který lze použít k zahájení vizuální změny indikátoru pro aktuální pozici v IndicatorView . Běžným případem použití VisualState je 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 Selected určuje vizuální stav, že indikátor představující aktuální pozici bude mít jeho Xamarin_Forms Selected _Label_TextColor "data-LINKTYPE =" absolutní cesta ">TextColor nastavena na černou. V opačném případě TextColor bude barva indikátoru světle šedá:

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

Související odkazy

• IndicatorView (ukázka)
• Xamarin.Forms CarouselView
• Xamarin.Forms Visual State Manager