Horizontale ListView Xamarin.Forms

Ist in keiner Weise zu erstellen ListView mit horizontal scroll im Xamarin.Forms wie Bild

dies ist, was ich getan habe für vertikale

var myListView = new ListView
{
    ItemTemplate = new DataTemplate(typeof(ImageCell))
};

InformationsquelleAutor der Frage Luigi Saggese | 2014-06-20

c#listview xamarin xamarin.forms

Ja, Sie technisch können. Legen Sie die Drehung um 270 (alle VisualElements eine Rotation BindableProperty). Allerdings, das sieht aus wie eine suboptimale Lösung, da sind die weißen Flächen oben und unten und müssen Sie ziehen Sie die Ansicht nach Links und rechts zu sehen, alles voll.

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

Den code oben ist aus der VisualElement Klasse. Der code unten ist ein kleines Beispiel von meiner eigenen.

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

InformationsquelleAutor der Antwort Millie Smith

9

Als jeder andere hat gesagt, Nein - es ist nicht verfügbar, out of the box in Xamarin.Formen.

Allerdings - es hört nicht jeder von schreiben von eigenen custom renderer um diese Art der Kontrolle.

Als Stéphane Delcroix erwähnt hat, können Sie eine ScrollView und dann ein StackLayout als Kind um denselben Effekt zu erzielen.

Werden Sie dann brauchen, um zu implementieren:-

*) bindbare Eigenschaft zu akzeptieren (IEnumerable) ItemsSource Eigenschaft, Bedürfnisse zu schaffen.

*) bindbare Eigenschaft zu akzeptieren (DataTemplate) ItemTemplate Eigenschaft, Bedürfnisse zu schaffen.

*) Bindung - code zum instanziieren von Instanzen der ItemTemplate wobei die spezifische datasource Element, und was diese in der StackLayout. Sie haben zu prüfen, Elemente entfernt etc auch.

*) anfügen von Ereignishandlern /tap-gesten für die item-Auswahl.

*) Umsetzung eines ausgewählten Status ein - /ausschalten anderen ausgewählten Elemente.

... und so weiter, um eine vollständige Umsetzung.

Das problem mit alle der oben genannten ist, dass es in Ordnung ist für relativ kleine posten-Listen.

Jedoch, wenn Sie auf der Suche für eine lange Liste von Einträgen, dann oben wäre ein wenig unerwünscht, da Sie die Erstellung der Ansichten im Voraus.

Selbst wenn Sie verzögerte Belastung von diesen, haben Sie immer noch die Speicherbedarf aller Ansichten zu berücksichtigen.

Dieser führt dann auf eine andere mögliche Implementierung, die sich mit Virtualisierten Elementedas ist eine ganz andere Geschichte zu betrachten.

InformationsquelleAutor der Antwort Pete

Wie oben erwähnt, es gibt keine standard-Weg, dies zu tun, aber es ist ein Weg, um es mit einem standard - ListView und @MillieSmiths Ansatz.

Muss die Lösung mehrere Ebenen von verschachtelten layouts. Beginnend mit der ListViewwe drehen, 270 Grad drehen, jedoch dreht sich auch unser Element Inhalt, so müssen wir drehen das wieder um 90 Grad.

Drehen der ListView erstellt eine Menge von whitespace-Zeichen, durch die Verpackung die ListView in einem absoluten layout, die wir lösen können, (wir benötigen eine zusätzliche contentview in es zu beheben einige clipping-Probleme).

Schließlich in der codebehind-wir brauchen zum Rendern des layout-clipping

Siehe die vollständige Lösung:

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

Für die code-behind-wir brauchen nur zu überprüfen, ob wir die Dinge vor, wenn wir es gehen lassen. Im Grunde finden wir heraus, was die Breite der Seite ist (NameGrid ist nur in voller Breite container irgendwo anders), dann bewegen die direkte ListView-Behälter um die Hälfte des whitespace, und clipping es durch die andere Hälfte auf der Unterseite)

    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;
             //*/
        } 
    }

WARNUNG
VERWENDEN Sie NICHT <FRAMES> für das layout verschieben und drehen. Es stürzt ab auf Windows Phone.

P. S
Ich bin sicher, dass dies sein könnte, verpackt in eine schöne UserControl für jedermann zu benutzen.

InformationsquelleAutor der Antwort Peter

6

Wie die anderen schon sagten, nicht möglich mit ListView und ich denke, es ist ein großes versehen von Xamarin Forms. Wir brauchen die dynamische Darstellung von Daten getrieben Objekte in mehr als nur einer Liste unten mache....komm ya werde!!

Jedoch in der Xamarin-Labs-Projekt gibt es GridView, die Sie nutzen könnten. Es ist immer noch ein wenig rau und die Leute sind einige bugs nun mit der Auswahl der Elemente.

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

Jemand scheint zu haben, eine Arbeit um für dieses problem:

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

InformationsquelleAutor der Antwort Daniel Nelson

Als von Xamarin Forms 2.3 CarouselView tut genau das, und mehr. Lesen Sie mehr hier.

<ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  <CarouselView ItemsSource="{Binding MyDataSource}">
    <CarouselView.ItemTemplate>
      <DataTemplate>
        <Label Text="{Binding LabelText}" />
      </DataTemplate>
    </CarouselView.ItemTemplate>
  </CarouselView>
</ContentView>

InformationsquelleAutor der Antwort Korayem

5

Nein, es gibt keine Möglichkeit, eine horizontale ListView. Sie können Textumbrüche in einer horizontalen StackLayout in eine horizontale ScrollView, um die gleiche visuelle Ergebnis, aber das ist nicht ganz das gleiche, da Sie nicht haben DataTemplating.

InformationsquelleAutor der Antwort Stephane Delcroix
2

Ich habe es nicht ausprobiert, aber vielleicht lohnt sich.

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

InformationsquelleAutor der Antwort Damien Sawyer
2

Habe ich versucht, die genannten "drehen" - Lösung und außerdem ist es eine "hässliche" Lösung, es kommt auch mit mehreren Einschränkungen:
1. Liste anzeigen WidthRequest hat die gleichen sein wie HeightRequest
2. listView Zeilenhöhe funktioniert nicht mehr richtig, weil es wird Zelle Breite
3. verticalalign wird horizontalalign etc, nicht sehr haltbar.
Eine bessere option ist, um Ihre eigenen benutzerdefinierten Steuerelement-oder, wie ich es Tat, verwenden Sie eine vorhandene HorizontalListView: https://www.nuget.org/packages/HorizontalListView1.1/ Dieser ist einfach zu bedienen. Sie finden den Quellcode und die Dokumentation hier

Umsetzung:
```
<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>
```
InformationsquelleAutor der Antwort Niels

Dieses nuget-Paket passt perfekt für Ihren Fall. Ich habe diese vor und ich mag es wirklich sehr:

https://github.com/SuavePirate/DynamicStackLayout

Dinge selbst zu machen und besser laden Sie diese 3 Nuget-Pakete, um ein Bild laden, caching & transformation auf Ihre Fotos. Die Fotos werden geformt in einem Kreis, aber dieses nuget hat andere Arten von Transformationen:

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)

Hier ist ein Stück code, um Ihnen zu helfen zu starten:

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

Ich hoffe, es hilft 🙂

InformationsquelleAutor der Antwort Ricardo de Assuncao Goncalves

0

Soweit ich weiß, gibt es 3 Möglichkeiten, dies umzusetzen:
1. Rotation (wie erwähnt von anderen Jungs)
  - Keine Notwendigkeit mehr zu machen, die standard-ListView
  - ItemTemplate verfügbar ist
  - Hässliche Lösung!
2. Benutzerdefinierte Render (RecyclerView in Android und (ich glaube) UICollectionView in iOS)
  - Benutzerdefinierte Zelle verfügbar ist (ich bin mir sicher, dass über Android, aber nicht sicher über iOS)
  - Braucht mehr Arbeit und code
3. Raster und Horizontale ScrollView (mit horizontaler als Wert für die Orientierung prop in ScrollView )
  - Benutzerdefinierte layout
  - Es gibt keine CachingStrategy in diese Lösung, so für riesige Liste kann dies dazu führen, riesige RAM-Auslastung für Ihre app
InformationsquelleAutor der Antwort Mehdi Dehghani
-1

Wurde dieses Problem gelöst mit einer benutzerdefinierten Klasse namens ItemsView (nicht zu verwechseln mit Xamarin ist ItemsView für Daten-Template in einer ListView), die implementiert eine ScrollView/StackPanel Muster oben erwähnten Beispiel hat bereits beantragt wurde. Bitte sehen Sie sich den code: https://gist.github.com/fonix232/b88412a976f67315f915

InformationsquelleAutor der Antwort Gregory Morse

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.