Xamarin.Forms IndicatorView

  • Artículo
  • 3 minutos para leer

Ejemplo de descarga Descarga del ejemplo

es IndicatorView un control que muestra indicadores que representan el número de elementos y la posición actual en CarouselView :

Captura de pantalla de carouselView e IndicatorView, en de iOS y Android

IndicatorView define las siguientes propiedades:

  • Count, de tipo int , el número de indicadores.
  • HideSingle, de tipo bool , indica si el indicador debe estar oculto cuando solo existe uno. El valor predeterminado es true.
  • IndicatorColor, de tipo Color , color de los indicadores.
  • IndicatorSize, de tipo double , el tamaño de los indicadores. El valor predeterminado es 6.0.
  • IndicatorLayout, de tipo Layout<View> , define la clase de diseño utilizada para representar IndicatorView . Esta propiedad se establece mediante y normalmente no es necesario que la Xamarin.Forms establezcan los desarrolladores.
  • IndicatorTemplate, de tipo DataTemplate , la plantilla que define la apariencia de cada indicador.
  • IndicatorsShape, de tipo IndicatorShape , la forma de cada indicador.
  • ItemsSource, de tipo , la colección para la que IEnumerable se mostrarán los indicadores. Esta propiedad se establecerá automáticamente cuando se CarouselView.IndicatorView establezca la propiedad .
  • MaximumVisible, de tipo int , el número máximo de indicadores visibles. El valor predeterminado es int.MaxValue.
  • Position, de tipo int , índice de indicador seleccionado actualmente. Esta propiedad usa un TwoWay enlace. Esta propiedad se establecerá automáticamente cuando se CarouselView.IndicatorView establezca la propiedad .
  • SelectedIndicatorColor, de tipo Color , color del indicador que representa el elemento actual en CarouselView .

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

Creación de un elemento IndicatorView

En el ejemplo siguiente se muestra cómo crear instancias de en IndicatorView 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>

En este ejemplo, se IndicatorView representa debajo de CarouselView , con un indicador para cada elemento de CarouselView . se IndicatorView rellena con datos estableciendo la propiedad en el objeto CarouselView.IndicatorViewIndicatorView . Cada indicador es un círculo gris claro, mientras que el indicador que representa el elemento actual de CarouselView es gris oscuro.

Importante

Al establecer CarouselView.IndicatorView la propiedad, se produce el enlace de propiedad a la propiedad y el enlace de propiedad a la propiedad IndicatorView.PositionCarouselView.PositionIndicatorView.ItemsSourceCarouselView.ItemsSource .

Cambiar la forma del indicador

La IndicatorView clase tiene una propiedad , que determina la forma de los IndicatorsShape indicadores. Esta propiedad se puede establecer en uno de los miembros de IndicatorShape enumeración:

  • Circle especifica que las formas del indicador serán circulares. Este es el valor predeterminado de la propiedad IndicatorView.IndicatorsShape.
  • Square indica que las formas del indicador serán cuadradas.

En el ejemplo siguiente se muestra IndicatorView un configurado para usar indicadores cuadrados:

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

Cambio del tamaño del indicador

La clase tiene una propiedad, de tipo , que determina el tamaño de los indicadores en IndicatorViewIndicatorSizedouble unidades independientes del dispositivo. El valor predeterminado de esta propiedad es 6.0.

En el ejemplo siguiente se muestra IndicatorView un configurado para mostrar indicadores más grandes:

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

Limitar el número de indicadores mostrados

La IndicatorView clase tiene una MaximumVisible propiedad, de tipo , que determina el int número máximo de indicadores visibles.

En el ejemplo siguiente se muestra IndicatorView un configurado para mostrar un máximo de seis indicadores:

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

Definición de la apariencia del indicador

La apariencia de cada indicador se puede definir estableciendo la IndicatorView.IndicatorTemplate propiedad en 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>

Los elementos especificados en definen DataTemplate la apariencia de cada indicador. En este ejemplo, cada indicador es un Label que muestra un icono de fuente.

En las capturas de pantalla siguientes se muestran indicadores representados mediante un icono de fuente:

con plantilla de un elemento IndicatorView conplantilla, en iOS y Android

Establecer estados visuales

IndicatorView tiene un estado visual que se puede usar para iniciar un cambio visual en el Selected indicador de la posición actual en IndicatorView . Un caso de uso común para esto VisualState es cambiar el color del indicador que representa la posición actual:

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

En este ejemplo, el estado visual especifica que el indicador que representa la posición actual tendrá su valor Xamarin_Forms SelectedSelected _Label_TextColor" data-linktype="absolute-path">establecido en TextColor negro. De lo TextColor contrario, el del indicador será gris claro:

Captura de pantalla del estado visual seleccionado de IndicatorView

Para obtener más información sobre los estados visuales, vea Xamarin.Forms Visual State Manager .