ListView Horizontal Xamarin.Forme

Est un moyen de créer ListViewhorizontal scrollXamarin.Forms image

ListView Horizontal

c'est ce que j'ai fait pour vertical

var myListView = new ListView
{
    ItemTemplate = new DataTemplate(typeof(ImageCell))
};
24
demandé sur Bas 2014-06-20 18:39:20
la source

11 ответов

oui, vous pouvez techniquement. Réglez la Rotation à 270 (tous les éléments Visuelsont une propriété de Rotation à lier). Cependant, cela ressemble à une solution sous-optimale car il y a des espaces blancs en haut et en bas et vous devez faire glisser la vue à gauche et à droite pour voir tout pleinement.

public static readonly BindableProperty RotationProperty;
public static readonly BindableProperty RotationXProperty;
public static readonly BindableProperty RotationYProperty;

le code ci-dessus est de la classe VisualElement. Le code ci-dessous est un petit échantillon du mien.

                                              ∨∨∨                                                  
<ListView x:Name="MessagesListView" Rotation="270" ItemsSource="{Binding Items}" RowHeight="40">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>
          <StackLayout>
            <!--mylayouthere-->
          </StackLayout>
        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>
11
répondu Millie Smith 2014-06-21 01:43:55
la source

comme tout le monde l'a dit, Non - il n'y en a pas une Disponible en Xamarin.Les formes.

cependant - cela n'empêche personne d'écrire son propre renderer personnalisé pour réaliser ce type de contrôle.

Stephane Delcroix a mentionné, vous pouvez créer un ScrollView et StackLayout comme un enfant pour créer le même effet.

vous devrez alors implémenter: -

*) propriété liable d'accepter le ( IEnumerable) ItemsSource propriété à créer.

*) propriété liable d'accepter le ( DataTemplate) ItemTemplate propriété à créer.

*) liaison code pour instancier les instances de ItemTemplate prendre l'élément source de données spécifique et le rendre dans le StackLayout. Vous devez considérer les articles enlevés, etc. aussi.

*) attacher les manipulateurs d'événements / gestes de robinet pour la sélection des articles.

*) implémentation d'un état sélectionné / désactivation d'autres éléments sélectionnés.

... et ainsi de suite pour obtenir une mise en œuvre complète.

le problème avec tout ce qui précède est qu'il est bon pour des listes d'articles relativement petites.

cependant, si vous êtes à la recherche d'une longue liste d'entrées, alors ci-dessus serait un peu indésirable que vous sont en train de créer tous les Vues d'avance.

Même si vous chargement retardé de ces, vous avez encore le mémoire tous les Vues à prendre en compte.

ceci mène alors à une autre implémentation possible qui traite de Virtualisé Éléments

comme indiqué ci-dessus, il n'y a pas de méthode standard pour faire cela, mais il y a une façon de contourner cela en utilisant une norme

la solution nécessite plusieurs couches de mises en page imbriquées. En commençant par la liste, nous allons tourner que 270 degrés, mais qui fait aussi tourner notre contenu de l'article, donc nous avons besoin de faire tourner ce retour de 90 degrés.

la rotation de la ListView crée beaucoup d'espace, en enveloppant la ListView dans une mise en page absolue nous pouvons résoudre cela (nous avons besoin d'une vue de contenu supplémentaire pour résoudre certains problèmes de découpage).

enfin dans le codebehind nous avons besoin de rendre le découpage de mise en page

Voici la solution complète:

<AbsoluteLayout x:Name="MessagesLayoutFrame" Padding="0" HorizontalOptions="FillAndExpand">
  <ContentView x:Name="MessagesLayoutFrameInner"  Padding="0"  HorizontalOptions="FillAndExpand">
    <ListView x:Name="MessagesListView"
              ItemsSource="{Binding Images}"
              RowHeight="240"
              VerticalOptions="Start"
              HeightRequest="240"
              WidthRequest="240"
              SeparatorVisibility="None"
              Rotation="270"
              HorizontalOptions="Center">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ContentView Rotation="90" Padding="12">
              <Image Source="{Binding Source}" Aspect="AspectFill" />
            </ContentView>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </ContentView>
</AbsoluteLayout>

pour le code derrière nous avons juste besoin de vérifier si nous avons mis en place les choses avant, si nous avons, laissez tomber. Fondamentalement, on découvre ce que la largeur de la page (NameGrid est juste un conteneur de pleine largeur ailleurs), puis déplacement du conteneur ListView direct vers le haut par la moitié de l'espace, et la coupure par l'autre moitié sur le fond)

    bool hasAppearedOnce = false;
    protected override void OnAppearing() {
        base.OnAppearing();

        if (!hasAppearedOnce) {

            hasAppearedOnce = true;
            var padding = (NameGrid.Width - MessagesListView.Height) / 2;

            MessagesListView.HeightRequest = MessagesLayoutFrame.Width;
            MessagesLayoutFrameInner.WidthRequest = MessagesLayoutFrame.Width;
            MessagesLayoutFrameInner.Padding = new Thickness(0);
            MessagesLayoutFrame.Padding = new Thickness(0);
            MessagesLayoutFrame.IsClippedToBounds = true;
            Xamarin.Forms.AbsoluteLayout.SetLayoutBounds(MessagesLayoutFrameInner, new Rectangle(0, 0 - padding, AbsoluteLayout.AutoSize, MessagesListView.Height - padding));
            MessagesLayoutFrameInner.IsClippedToBounds = true;
             // */
        } 
    }

avertissement NE PAS UTILISER <FRAMES> pour la disposition mobile et rotative. Il va s'écraser sur Windows Phone.

P. S Je suis sûr que cela pourrait être enveloppé dans un contrôle d'utilisation agréable pour tout le monde à utiliser.

9
répondu Peter 2015-03-18 17:04:24
la source

comme les autres l'ont dit, pas possible avec ListView et je pense que C'est un gros oubli de Xamarin avec des formulaires. Nous avons besoin d'afficher dynamiquement des objets de données dans plus qu'une simple liste....venez sur ya'll!!

cependant, dans le projet Xamarin Labs il y a GridView que vous pouvez utiliser. Il est encore un peu difficile et les gens travaillent à travers quelques bugs maintenant avec la sélection de la article.

https://github.com/XForms/Xamarin-Forms-Labs

Quelqu'un ne semble pas avoir un travail autour de ce problème:

https://github.com/XForms/Xamarin-Forms-Labs/issues/236

7
répondu Daniel Nelson 2014-08-28 17:16:18
la source

à partir de la forme xamarine 2.3 CarouselView fait exactement cela, et plus. En savoir plus ici.

<ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  <CarouselView ItemsSource="{Binding MyDataSource}">
    <CarouselView.ItemTemplate>
      <DataTemplate>
        <Label Text="{Binding LabelText}" />
      </DataTemplate>
    </CarouselView.ItemTemplate>
  </CarouselView>
</ContentView>
7
répondu Korayem 2017-06-19 23:38:14
la source

Non, il n'y a pas moyen d'avoir un horizontal ListView. Vous pouvez envelopper un StackLayout horizontal dans un ScrollView horizontal pour obtenir le même résultat visuel, mais ce n'est pas tout à fait la même chose, car vous n'aurez pas Dataemplating.

6
répondu Stephane Delcroix 2014-06-20 22:22:33
la source

Je ne l'ai pas essayé, mais cela pourrait être la peine de vérifier.

https://github.com/Cheesebaron/Cheesebaron.HorizontalListView

3
répondu Damien Sawyer 2014-08-23 19:55:26
la source

j'ai essayé la solution "rotative" mentionnée et en plus d'être une solution "laide", elle vient aussi avec plusieurs limitations:

  1. Vue de la liste WidthRequest doit être le même que HeightRequest
  2. listView hauteur de la ligne ne fonctionne plus correctement en raison de la largeur de la cellule
  3. verticalalalign devient horizontalalign etc, pas très maintenable.

Une meilleure option est de faire votre propre contrôle personnalisé ou, comme je l'ai fait, utilisez une vue horizontale existante: https://www.nuget.org/packages/HorizontalListView1.1/ celui-ci est facile à utiliser. Vous pouvez trouver le code source et la documentation ici

mise en oeuvre:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="test.ListPage" 
    xmlns:Controls="clr-namespace:HorizontalList;assembly=HorizontalList"> 

<Controls:HorizontalListView ItemsSource="{Binding Categories}" ListOrientation="Horizontal"> 
  <Controls:HorizontalListView.ItemTemplate> 
    <DataTemplate> 
    <Label Text="{Binding Name}" /> 
    </DataTemplate> 
  </Controls:HorizontalListView.ItemTemplate> 
  </Controls:HorizontalListView>
</ContentPage>
2
répondu Niels 2017-01-16 10:26:31
la source

ce paquet nuget conviendra parfaitement à votre cas. J'ai utilisé celui-ci avant et je l'aime vraiment:

https://github.com/SuavePirate/DynamicStackLayout

pour rendre les choses encore meilleures téléchargez ces 3 paquets Nuget pour avoir un chargement d'image, la mise en cache et la transformation sur vos photos. Les photos seront en forme de cercle mais ce nuget a d'autres types de transformations:

Xamarin.FFImageLoading (https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-API)
Xamarin.FFImageLoading.Forms
Xamarin.FFImageLoading.Transformations (https://github.com/luberda-molinet/FFImageLoading/wiki/Transformations-Guide)

Voici un bout de code pour vous aider à démarrer:

<!--Add this code to the top of your page-->
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
xmlns:dynamicStackLayout="clr-namespace:SuaveControls.DynamicStackLayout;assembly=SuaveControls.DynamicStackLayout"


<!-- Here is your control inside a ScrollView. The property Photos is a list of images address (Urls)  -->

<ScrollView Orientation="Horizontal" HorizontalOptions="FillAndExpand">
    <dynamicStackLayout:DynamicStackLayout ItemsSource="{Binding Photos}" HorizontalOptions="Fill" Orientation="Horizontal" Padding="10, -0, 100, 10">
        <dynamicStackLayout:DynamicStackLayout.ItemTemplate>
            <DataTemplate>
                <StackLayout BackgroundColor="Transparent" >
                    <ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="Center" DownsampleToViewSize="true" Aspect="AspectFit" Source="{Binding .}">
                        <ffimageloading:CachedImage.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding Path=PhotoCommand}" CommandParameter="{Binding .}" NumberOfTapsRequired="1" />
                        </ffimageloading:CachedImage.GestureRecognizers>
                        <ffimageloading:CachedImage.HeightRequest>
                            <OnPlatform x:TypeArguments="x:Double">
                                <On Platform="iOS" Value="50" />
                                <On Platform="Android" Value="60" />
                            </OnPlatform>
                        </ffimageloading:CachedImage.HeightRequest>
                        <ffimageloading:CachedImage.WidthRequest>
                            <OnPlatform x:TypeArguments="x:Double">
                                <On Platform="iOS" Value="50" />
                                <On Platform="Android" Value="60" />
                            </OnPlatform>
                        </ffimageloading:CachedImage.WidthRequest>
                        <ffimageloading:CachedImage.Transformations>
                            <fftransformations:CircleTransformation BorderHexColor="#eeeeee">
                                <fftransformations:CircleTransformation.BorderSize>
                                    <OnPlatform x:TypeArguments="x:Double">
                                        <On Platform="iOS" Value="10" />
                                        <On Platform="Android" Value="10" />
                                    </OnPlatform>
                                </fftransformations:CircleTransformation.BorderSize>
                            </fftransformations:CircleTransformation>
                        </ffimageloading:CachedImage.Transformations>
                    </ffimageloading:CachedImage>
                </StackLayout>
            </DataTemplate>
        </dynamicStackLayout:DynamicStackLayout.ItemTemplate>
    </dynamicStackLayout:DynamicStackLayout>
</ScrollView>

j'espère que cela aide :)

1
répondu Ricardo de Assuncao Goncalves 2018-05-27 20:52:37
la source

autant que je sache, il y a 3 façons de mettre en oeuvre ceci:

  1. Rotation (comme mentionné par d'autres gars)
    • Pas besoin d'en faire plus que la norme de contrôle ListView
    • ItemTemplate est disponible à
    • mauvaise solution!
  2. Rendu Personnalisé (RecyclerView dans Android et (je pense) UICollectionView dans iOS)
    • cellule Personnalisé est disponible (je suis sûr que sur Android, mais ne sont pas sûr à ce sujet iOS)
    • a besoin de plus de travail et de code
  3. grille et ScrollView Horizontal ( en utilisant l'horizontale comme valeur pour l'orientation prop dans ScrollView )
    • la mise en page personnalisée est disponible
    • il n'y a pas de CachingStrategy disponible dans cette solution, donc pour une liste énorme cela peut causer une énorme utilisation de RAM pour votre application
0
répondu Mehdi Dehghani 2018-04-10 07:31:44
la source

ceci a été résolu avec une classe personnalisée appelée ItemsView (à ne pas confondre avec ItemsView de Xamarin pour les Templiers de données dans un ListView) qui implémente un modèle ScrollView/StackPanel mentionné ci-dessus pour lequel l'exemple a déjà été demandé. Veuillez voir le code: https://gist.github.com/fonix232/b88412a976f67315f915

-1
répondu Gregory Morse 2016-03-26 14:32:19
la source

Autres questions sur