Xamarin.Forms IndicatorView

  • Makale
  • Okumak için 2 dakika

Download Sample Örneği indirme

, IndicatorView içindeki öğe sayısını ve geçerli konumu temsil eden göstergeleri görüntüleyen bir CarouselViewdenetimdir:

Screenshot of a CarouselView and IndicatorView, on iOS and Android

IndicatorView aşağıdaki özellikleri tanımlar:

  • Count, türündeki intgöstergelerin sayısıdır.
  • HideSingle, türünde bool, göstergenin yalnızca bir tane mevcut olduğunda gizlenip gizlenmeyeceğini gösterir. true varsayılan değerdir.
  • IndicatorColor, türündeki Colorgöstergelerin rengidir.
  • IndicatorSize, türündeki doublegöstergelerin boyutu. Varsayılan değer 6,0'dır.
  • IndicatorLayout, türündeki Layout<View>, öğesini işlemek için kullanılan düzen sınıfını IndicatorViewtanımlar. Bu özellik tarafından Xamarin.Formsayarlanır ve genellikle geliştiriciler tarafından ayarlanması gerekmez.
  • IndicatorTemplate, türünde DataTemplate, her göstergenin görünümünü tanımlayan şablon.
  • IndicatorsShape, türündeki IndicatorShapeher göstergenin şeklidir.
  • ItemsSource, türünde IEnumerable, göstergelerin görüntüleneceği koleksiyon. Özellik ayarlandığında CarouselView.IndicatorView bu özellik otomatik olarak ayarlanır.
  • MaximumVisible, türündeki intgörünür gösterge sayısı üst sınırıdır. int.MaxValue varsayılan değerdir.
  • Position, türüne intgöre seçili durumdaki gösterge dizinidir. Bu özellik bir TwoWay bağlama kullanır. Özellik ayarlandığında CarouselView.IndicatorView bu özellik otomatik olarak ayarlanır.
  • SelectedIndicatorColor, türündeki Color, içindeki geçerli öğeyi temsil eden göstergenin CarouselViewrengidir.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

IndicatorView oluşturma

Aşağıdaki örnek, XAML'de bir IndicatorView örneği oluşturma işlemini gösterir:

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

Bu örnekte, IndicatorView altında , içindeki her öğe CarouselViewiçin bir gösterge ile işlenirCarouselView. IndicatorView özelliği IndicatorView nesnesine ayarlanarak CarouselView.IndicatorView verilerle doldurulur. Her gösterge açık gri bir daireyken, içindeki CarouselView geçerli öğeyi temsil eden gösterge koyu gridir.

Önemli

Özelliğin CarouselView.IndicatorView ayarlanması özelliğine IndicatorView.Position özellik bağlamasına CarouselView.Position ve özelliğine IndicatorView.ItemsSource özellik bağlamasına neden olur CarouselView.ItemsSource .

Gösterge şeklini değiştir

sınıfı IndicatorView , göstergelerin şeklini belirleyen bir IndicatorsShape özelliğine sahiptir. Bu özellik, numaralandırma üyelerinden IndicatorShape birine ayarlanabilir:

  • Circle gösterge şekillerinin dairesel olacağını belirtir. Bu özelliğin varsayılan değeridir IndicatorView.IndicatorsShape .
  • Square gösterge şekillerinin kare olacağını gösterir.

Aşağıdaki örnekte kare göstergeleri kullanacak şekilde yapılandırılmış bir IndicatorView örnek gösterilmektedir:

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

Gösterge boyutunu değiştirme

sınıfıIndicatorView, cihazdan bağımsız birimlerdeki göstergelerin boyutunu belirleyen türünde doublebir IndicatorSize özelliğine sahiptir. Bu özelliğin varsayılan değeri 6.0'dır.

Aşağıdaki örnek, daha büyük göstergeleri görüntülemek için yapılandırılmış bir IndicatorView örneği gösterir:

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

Görüntülenen gösterge sayısını sınırlama

sınıfıIndicatorView, görünür gösterge sayısı üst sınırını belirleyen türünde intbir MaximumVisible özelliğine sahiptir.

Aşağıdaki örnek, en fazla altı göstergeyi görüntülemek için yapılandırılmış bir örneği gösterir IndicatorView :

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

Gösterge görünümünü tanımlama

Her göstergenin görünümü, özelliği olarak DataTemplateayarlanarak IndicatorView.IndicatorTemplate tanımlanabilir:

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

içinde DataTemplate belirtilen öğeler her göstergenin görünümünü tanımlar. Bu örnekte, her gösterge bir Label yazı tipi simgesi görüntüleyen bir göstergedir.

Aşağıdaki ekran görüntüleri, yazı tipi simgesi kullanılarak işlenen göstergeleri gösterir:

Screenshot of a templated IndicatorView, on iOS and Android

Görsel durumları ayarlama

IndicatorViewSelected, içindeki geçerli konumun IndicatorViewgöstergesinde görsel bir değişiklik başlatmak için kullanılabilecek bir görsel duruma sahiptir. Bunun VisualState yaygın kullanım örneklerinden biri, geçerli konumu temsil eden göstergenin rengini değiştirmektir:

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

Bu örnekte görsel durumu, Selected geçerli konumu temsil eden göstergenin siyah olarak ayarlandığını TextColor belirtir. TextColor Aksi takdirde gösterge açık gri olur:

Screenshot of IndicatorView selected visual state

Görsel durumlar hakkında daha fazla bilgi için bkz Xamarin.Forms . Visual State Manager.