wake-up-neo.com

Karussellansicht in Xamarin.forms

Gibt es eine Möglichkeit, eine Karussellansicht anstelle der Karussellseite zu erstellen, so dass nur ein Teil der Seite nach links oder rechts streicht. Außerdem möchte ich dieses Steuerelement in den Xamarin-Formularen erstellen und nicht plattformspezifisch.

Wenn Sie dieses benutzerdefinierte Steuerelement in xamarin.Android oder xamarin.iOS erstellen müssen, was sind die wirklichen Vorteile der Verwendung von Xamarin.forms, wenn diese einfachen Anforderungen nicht erfüllt werden.

xamarincarouselxamarin.forms
6
Vimal Patel

Auf github befindet sich ein gut dokumentiertes CarouselView-Projekt:

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

5
Daniel Luberda

Das Nuget-Paket für CarouselView ist jetzt verfügbar (v2.3.0-pre1): https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

2
Alexander

Ab Xamarin.Forms V2.2.0-pre1 wurde CarouselView jetzt zu Xamarin.Forms hinzugefügt.

Karussellansicht

CarouselView soll CarouselPage vollständig ersetzen. CarouselPage Wird in einer zukünftigen Version nicht mehr unterstützt. CarouselView ist in In vielerlei Hinsicht überlegen, einschließlich seiner Fähigkeit, in Layouts virtualisiert und verschachtelt zu werden.

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

Leider gibt es dazu noch keine Dokumentation.

EDIT:

CarouselView wurde für Xamarin.Forms V2.2.0.31 entfernt, da es nicht zur stabilen Veröffentlichung bereit war. Aber so wie es aussieht, wird es bald wieder zusammengeführt.

Zur Zeit finden Sie hier das separate CarouselView-Nuget-Paket: https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1

und du kannst es gerne so benutzen:

Namensraum:

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

Dann können wir einfach die CarouselView oben auf unserer Seite hinzufügen:

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

weitere Informationen: https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/

1
user1

Wenn Sie Xamarin.Forms V2.2.0-pre1 verwenden und für jede Seite unterschiedliche Ansichten anzeigen müssen, können Sie eine abgeleitete Klasse wie diese verwenden:

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;
        });
    }
}

sie können es also als Views aufrufen:

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

Ich habe gerade eine ähnliche Sache implementiert. Um eine Karussellansicht zu erstellen, habe ich gerade ein horizontales Stacklayout erstellt, das in eine horizontale Bildlaufansicht eingebettet ist.

In meinem speziellen Beispiel musste ich eine Bildergalerie erstellen. Ich habe das Camera-Steuerelement aus dem Xamarin.Labs-Projekt verwendet, um das Bild entweder von der Kamerarolle oder von der Kamera selbst abzurufen. Das habe ich dann als Kind zum Stacklayout hinzugefügt.

Hoffe das hilft.

1
Mike