Xamarin.Forms Widok wskaźnika

  • Artykuł

Download Sample Pobieranie przykładu

Jest to kontrolka IndicatorView , która wyświetla wskaźniki reprezentujące liczbę elementów i bieżącą pozycję w elemencie CarouselView:

Screenshot of a CarouselView and IndicatorView, on iOS and Android

IndicatorView definiuje następujące właściwości:

  • Count, typu int, liczba wskaźników.
  • HideSingle, typu bool, wskazuje, czy wskaźnik powinien być ukryty, gdy istnieje tylko jeden. Domyślna wartość to true.
  • IndicatorColor, typu Color, kolor wskaźników.
  • IndicatorSize, typu double, rozmiar wskaźników. Wartość domyślna to 6.0.
  • IndicatorLayout, typu Layout<View>, definiuje klasę układu używaną do renderowania IndicatorViewelementu . Ta właściwość jest ustawiana przez Xamarin.Formsprogram i zazwyczaj nie musi być ustawiana przez deweloperów.
  • IndicatorTemplate, typu DataTemplate, szablon, który definiuje wygląd każdego wskaźnika.
  • IndicatorsShape, typu IndicatorShape, kształt każdego wskaźnika.
  • ItemsSource, typu IEnumerable, kolekcja, dla którego będą wyświetlane wskaźniki. Ta właściwość zostanie automatycznie ustawiona po ustawieniu CarouselView.IndicatorView właściwości.
  • MaximumVisible, typu int, maksymalna liczba widocznych wskaźników. Domyślna wartość to int.MaxValue.
  • Position, typu int, aktualnie wybrany indeks wskaźnika. Ta właściwość używa TwoWay powiązania. Ta właściwość zostanie automatycznie ustawiona po ustawieniu CarouselView.IndicatorView właściwości.
  • SelectedIndicatorColor, typu Color, kolor wskaźnika, który reprezentuje bieżący element w elemencie CarouselView.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Tworzenie kontrolki IndicatorView

W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu IndicatorView w języku 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>

W tym przykładzie element IndicatorView jest renderowany pod CarouselViewelementem , ze wskaźnikiem dla każdego elementu w elemencie CarouselView. Obiekt IndicatorView jest wypełniany danymi, ustawiając CarouselView.IndicatorView właściwość na IndicatorView obiekt. Każdy wskaźnik jest jasnoszarym okręgiem, a wskaźnik reprezentujący bieżący element w kolorze ciemnoszarym CarouselView .

Ważne

CarouselView.IndicatorView Ustawienie właściwości powoduje IndicatorView.Position powiązanie właściwości z właściwością CarouselView.Position i IndicatorView.ItemsSource powiązanie właściwości z właściwościąCarouselView.ItemsSource.

Zmienianie kształtu wskaźnika

Klasa IndicatorView ma IndicatorsShape właściwość, która określa kształt wskaźników. Tę właściwość można ustawić na jeden z elementów IndicatorShape członkowskich wyliczenia:

  • Circle określa, że kształty wskaźnika będą cykliczne. Jest to wartość domyślna IndicatorView.IndicatorsShape właściwości.
  • Square wskazuje, że kształty wskaźnika będą kwadratowe.

Poniższy przykład przedstawia skonfigurowany do używania IndicatorView wskaźników kwadratowych:

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

Zmienianie rozmiaru wskaźnika

Klasa IndicatorView ma IndicatorSize właściwość typu double, która określa rozmiar wskaźników w jednostkach niezależnych od urządzenia. Wartość domyślna tej właściwości to 6.0.

W poniższym przykładzie pokazano skonfigurowane do wyświetlania IndicatorView większych wskaźników:

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

Ogranicz liczbę wyświetlanych wskaźników

Klasa IndicatorView ma właściwość typu int, która określa maksymalną MaximumVisible liczbę widocznych wskaźników.

Poniższy przykład przedstawia skonfigurowany do IndicatorView wyświetlania maksymalnie sześciu wskaźników:

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

Definiowanie wyglądu wskaźnika

Wygląd każdego wskaźnika można zdefiniować, ustawiając IndicatorView.IndicatorTemplate właściwość na DataTemplatewartość :

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

Elementy określone w definicji DataTemplate wyglądu każdego wskaźnika. W tym przykładzie każdy wskaźnik jest wskaźnikiem Label , który wyświetla ikonę czcionki.

Na poniższych zrzutach ekranu przedstawiono wskaźniki renderowane przy użyciu ikony czcionki:

Screenshot of a templated IndicatorView, on iOS and Android

Ustawianie stanów wizualizacji

IndicatorViewSelected ma stan wizualny, którego można użyć do zainicjowania zmiany wizualizacji na wskaźnik bieżącej pozycji w elemencie IndicatorView. Typowym przypadkiem VisualState użycia jest zmiana koloru wskaźnika reprezentującego bieżącą pozycję:

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

W tym przykładzie Selected stan wizualizacji określa, że wskaźnik reprezentujący bieżącą pozycję będzie miał ustawiony TextColor na czarny. TextColor W przeciwnym razie wskaźnik będzie jasnoszary:

Screenshot of IndicatorView selected visual state

Aby uzyskać więcej informacji na temat stanów wizualizacji, zobacz Xamarin.Forms Visual State Manager.