web-dev-qa-db-fra.com

Comment afficher en carrousel dans Xamarin.forms

Existe-t-il un moyen de créer une vue Carousel au lieu d'une page Carousel afin que seule une partie de la page glisse à gauche ou à droite. Aussi, je veux créer ce contrôle dans les formulaires Xamarin et non spécifique à la plate-forme.

Si nous devons créer ce contrôle personnalisé dans xamarin.Android ou xamarin.iOS, quels sont les avantages réels de l’utilisation de Xamarin.forms lorsque ces exigences simples ne sont pas satisfaites?.

xamarincarouselxamarin.forms
6
Vimal Patel

Il y a un projet bien documenté CarouselView hébergé sur github:

https://github.com/chrisriesgo/xamarin-forms-carouselview et http://chrisriesgo.com/xamarin-forms-carousel-view-recipe/

5
Daniel Luberda

Le paquet de nuget pour CarouselView est maintenant disponible (v2.3.0-pre1): https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

2
Alexander

Le Xamarin.Forms V2.2.0-pre1CarouselView a maintenant été ajouté à Xamarin.Forms.

CarouselView

CarouselView est destiné à remplacer complètement CarouselPage. CarouselPage Sera obsolète dans une version ultérieure. CarouselView est supérieur à À bien des égards, y compris sa capacité à être virtualisé et imbriqué dans des mises en page de .

Voir https://forums.xamarin.com/discussion/63983/xamarin-forms-2-2-0-pre1-released#latest

Malheureusement, il n'y a pas encore de documentation à ce sujet.

EDIT:

CarouselView a été supprimé pour Xamarin.Forms V2.2.0.31 car il n'était pas prêt pour une version stable. Mais à première vue, il sera bientôt fusionné.

Pour l'instant, vous pouvez trouver le package de nuget CarouselView séparé ici: https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

et vous pouvez l'utiliser comme ceci:

Espace de noms:

xmlns:cv="clr-namespace:Xamarin.Forms;Assembly=Xamarin.Forms.CarouselView"

Ensuite, nous pouvons simplement ajouter le CarouselView en haut de notre page:

<Grid RowSpacing="0">
  <Grid.RowDefinitions>
    <RowDefinition Height=".3*"/>
    <RowDefinition Height=".7*"/>
  </Grid.RowDefinitions>
  <cv:CarouselView ItemsSource="{Binding Zoos}" x:Name="CarouselZoos">
    <cv:CarouselView.ItemTemplate>
      <DataTemplate>
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>
          <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
          <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
            <Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
          </StackLayout>
        </Grid>
      </DataTemplate>
    </cv:CarouselView.ItemTemplate>
  </cv:CarouselView>
  <!--List of Monkeys below-->
</Grid>

plus d'infos: https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/

1
user1

Si vous utilisez Xamarin.Forms V2.2.0-pre1 et que vous devez afficher différentes vues pour chaque page, vous pouvez utiliser une classe dérivée comme celle-ci:

public class CarouselViewMultiPage : CarouselView
{
    List<View> _children = new List<View> { };
    public List<View> Children {
        get { return _children; }
        set {
            _children = value;
            OnPropertyChanged();
        }
    }
    public CarouselViewMultiPage ()
    {
        this.ItemTemplate = new CarouselTemplateSelector();
        this.ItemsSource = Children;
        this.SetBinding(CarouselView.ItemsSourceProperty, "Children");
        BindingContext = this;
    }
}
public class CarouselTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        DataTemplate dt = new DataTemplate();
        View civ = (View)item;
        return new DataTemplate(() =>
        {
            return civ;
        });
    }
}

afin que vous puissiez l'appeler en passant Vues:

public App()
{
    // The root page of your application
    MainPage = new ContentPage {
        Content = new CarouselViewMultiPage
        {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand,
            Children =
                       {
                            new Label() { Text="Page 1"},
                            new Label() { Text="Page 2"},
                            new Label() { Text="Page 3"},
                        }
        }
    };
}
1
Renzo Ciot

Je viens de mettre en œuvre une chose similaire. Pour créer la vue carrousel, je viens de créer un Stacklayout horizontal, enveloppé dans une vue de défilement horizontal.

Dans mon exemple particulier, je devais créer une galerie d'images. J'ai utilisé le contrôle Caméra du projet Xamarin.Labs pour obtenir l'image à partir du rouleau de la caméra ou de la caméra elle-même. J'ai ensuite ajouté ceci en tant qu'enfant à la Stacklayout.

J'espère que cela t'aides.

1
Mike