Xamarin.Forms IndicatorView

Örneği indirme

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

ve IndicatorView

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

• Count, int türü, gösterge sayısı.
• HideSingle, türü, bool göstergenin yalnızca bir tane mevcut olduğunda gizlenip gizlenip gizlenlel olmadığını gösterir. true varsayılan değerdir.
• IndicatorColor, Color türü, göstergelerin rengi.
• IndicatorSize, double türü, göstergelerin boyutu. Varsayılan değer 6.0'dır.
• IndicatorLayouttüründe Layout<View> , işlemek için kullanılan düzen sınıfını IndicatorView tanımlar. Bu özellik tarafından ayarlanır Xamarin.Forms ve genellikle geliştiriciler tarafından ayarlanmaz.
• IndicatorTemplate, DataTemplate türü, her göstergenin görünümünü tanımlayan şablon.
• IndicatorsShape, IndicatorShape türü, her göstergenin şekli.
• ItemsSource, IEnumerable türü, göstergeler için görüntülenecek koleksiyon. Özellik ayar olduğunda bu özellik otomatik CarouselView.IndicatorView olarak ayarlanır.
• MaximumVisible, int türü, en fazla görünür gösterge sayısı. int.MaxValue varsayılan değerdir.
• Position, int türü, şu anda seçili gösterge dizini. Bu özellik bir bağlama TwoWay kullanır. Özellik ayar olduğunda bu özellik otomatik CarouselView.IndicatorView olarak ayarlanır.
• SelectedIndicatorColor, Color türü, içinde geçerli öğeyi temsil eden göstergenin CarouselView rengi.

Bu özellikler nesnelerle BindableProperty desteklene, bu da veri bağlamalarının hedefi ve stile sahip olması anlamına gelir.

IndicatorView oluşturma

Aşağıdaki örnekte, XAML'de bir örneği IndicatorView nasıl örneklendirilmleri 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 öğesinin altında işlenir CarouselView ve içinde her öğe için bir gösterge CarouselView içerir. IndicatorViewözelliği nesnesine ayar tarafından CarouselView.IndicatorView verilerle IndicatorView doldurulur. Her gösterge açık gri bir daireyken, içinde geçerli öğeyi temsil eden gösterge koyu CarouselView gridir.

Gösterge şeklini değiştirme

IndicatorViewsınıfının, IndicatorsShape göstergelerin şeklini belirleyen bir özelliği vardır. Bu özellik, numaralama IndicatorShape üyelerinden biri olarak ayarlanmış olabilir:

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

Aşağıdaki örnekte kare IndicatorView göstergeler kullanmak üzere yapılandırılmış bir örnek yer almaktadır:

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

Gösterge boyutunu değiştirme

sınıfının, IndicatorViewIndicatorSize cihazdan bağımsız double birimlerde göstergelerin boyutunu belirleyen türünde bir özelliği vardır. Bu özelliğin varsayılan değeri 6.0'dır.

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

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

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

sınıfı, IndicatorView en fazla görünür gösterge sayısını belirleyen türünde bir MaximumVisibleint özelliğine sahip.

Aşağıdaki örnekte, en IndicatorView fazla altı gösterge görüntülemek için yapılandırılmış bir gösterilir:

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

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

Her göstergenin görünümü, özelliğinin bir olarak IndicatorView.IndicatorTemplate ayarlandığı şekilde DataTemplate 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 belirtilen öğeler DataTemplate her göstergenin görünümünü tanımlar. Bu örnekte, her gösterge bir yazı Label 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:

Görsel durumları ayarlama

IndicatorView , Selected içinde geçerli konumunun göstergesinde bir görsel değişiklik başlatmak için kullanılan bir görsel durumuna IndicatorView sahip. Bunun yaygın kullanım örneklerden VisualState 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 durum, geçerli konumu temsil eden göstergenin Xamarin_Forms SelectedSelected _Label_TextColor" data-linktype="absolute-path">siyah olarak ayar >TextColor belirtir. Aksi TextColor takdirde gösterge açık gri olur:

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

İlgili bağlantılar

• IndicatorView (örnek)
• Xamarin.Forms CarouselView
• Xamarin.Forms Visual State Manager