Fliegen Sie weiter mit Xamarin.Forms 4.4

Wir haben mit unseren Entwicklern gesprochen, die jedes Jahr viele mobile Anwendungen erstellen, und sie sagten: "Wir können uns nicht erinnern, wann wir das letzte Mal eine mobile Anwendung erstellt haben, die KEIN Karussell enthält." Wir freuen uns, ein neues Steuerelement einzuführen CarouselView in Xamarin.Forms 4.4.0. Darüber hinaus präsentieren wir IndicatorView für die Anzeige von Seiten und Elementen mit einem Karussell. Ebenso wie SwipeView zum Bereitstellen von Kontextaktionen für beliebige SwipeView in CollectionView . Das Karussell-Thema wäre ohne eine Demonstration der neuen Unterstützung für GIF-Animationen für Bilder nicht vollständig. Fangen wir an.

Funktionen Xamarin.Forms 4.4

Mit GIF-Animationen können Sie Ihrer Anwendung auf einfache Weise Animationen hinzufügen, um die Kommunikation mit dem Benutzer zu verbessern und bestimmte Aktionen oder Details zu berücksichtigen. Das ist natürlich auch toll für Katzen-Gifs. Sie benötigen IsAnimationPlaying Image die IsAnimationPlaying Eigenschaft, um die IsAnimationPlaying zu aktivieren oder zu deaktivieren.

Die Animationsschleife wird standardmäßig ausgeführt. Um die Animation zu stoppen, setzen Sie IsAnimationPlaying auf False.



Das war's, du hast Animationen! Dies ist ideal für kleine Bilder, insbesondere solche, die in Ihre Anwendung integriert sind. Die Einstellungen für die GIF-Bildschleifen werden beachtet. Stellen Sie sicher, dass Sie für eine bessere Benutzererfahrung schnelle Renderings auf Android verwenden.

KarussellView und IndicatorView

Das neue CarouselView basiert auf der gleichen Grundsteuerung wie CollectionView und ermöglicht es, Ihrer Anwendung auf einfache Weise multifunktionale Karussells hinzuzufügen, unabhängig davon, ob Sie horizontal oder vertikal scrollen. Mit CollectionView Sie:

• ItemsLayout
• ItemsSource
• ItemTemplate
• EmptyTemplate

 <CarouselView HeightRequest="160">    <CarouselView.ItemsSource>        <x:Array Type="{x:Type x:String}">            <x:String>h01.jpg</x:String>            <x:String>h02.jpg</x:String>            <x:String>h03.jpg</x:String>            <x:String>h04.jpg</x:String>        </x:Array>    </CarouselView.ItemsSource>    <CarouselView.ItemTemplate>        <DataTemplate>            <Image Source="{Binding .}"/>        </DataTemplate>    </CarouselView.ItemTemplate> </CarouselView> 

Sie erhalten auch einige karussellspezifische Eigenschaften zum Verwalten von Dingen wie der Entfernung, in die das vorherige und das nächste Element sehen sollen.

 <CarouselView PeekAreaInsets="50"              ...> 

Erweiterter Tipp: Im obigen Beispiel werden Sie auch feststellen, dass das vorherige und das nächste Element skaliert und verschoben werden. Sie können dies jetzt erreichen, indem Sie das Verhalten verwenden und das Layout während des Bildlaufs ändern. In Version 4.5 können Sie visuelle Zustände verwenden, um dies zu vereinfachen.

Um eine IndicatorView hinzuzufügen, platzieren Sie sie an einer beliebigen Stelle und verknüpfen sie dann mit dem Namen CarouselView :

 <CarouselView x:Name="walletCarousel"> // implementation here </CarouselView> <IndicatorView  IndicatorColor="LightGray"  SelectedIndicatorColor="Black"  IndicatorSize="10" HorizontalOptions="Center"  IndicatorView.ItemsSourceBy="walletCarousel"/> 

Weitere Informationen zu allen Funktionen von CarouselView und IndicatorView finden Sie in der Dokumentation .

Hinweis: Das zuvor veröffentlichte NuGet Xamarin.Forms.CarouselView (Vorschau) wird archiviert und nicht mehr freigegeben. Wenn Sie dieses Steuerelement verwendet haben, können Sie NuGet entfernen und den Code-Namespace aktualisieren. Wir haben uns bemüht, die Konsistenz in der API aufrechtzuerhalten, aber Sie müssen möglicherweise einige Dinge konfigurieren. Github

Swipeview

Dieses Steuerelement befindet sich normalerweise in der Liste der Elemente, sodass der Benutzer in eine beliebige Richtung wischen kann, um Kontextschaltflächen für allgemeine Aktionen wie Bearbeiten oder Löschen zu öffnen. Um dieses Steuerelement zu verwenden, schließen Sie es einfach um ein Element, dem Sie Verhalten hinzufügen möchten. Standardmäßig erhält SwipeItem den Titel und das Symbol sowie den Befehls- oder Klick-Handler. Wenn Sie etwas Komplexeres hinzufügen möchten, können Sie dies mit einer Vorlage tun.

 <SwipeView>        <SwipeView.RightItems>                <SwipeItems Mode="Execute">                        <SwipeItem Text="Favourite" Command="{Binding Favourite}">                                <SwipeItem.Icon>                                        <FontIconSource Glyph=""/>                                </SwipeItem.Icon>                        </SwipeItem>                </SwipeItems>        </SwipeView.LeftItems>        <!-- Swipeable content -->        <Frame>          // content here        </Frame> </SwipeView> 

Das obige Beispiel und vieles mehr wurde auf dem Blog unseres talentierten Teammitglieds Javier Suarez Ruiz veröffentlicht.

Sie können den Swipe-Modus auch plattformspezifisch unter Android und iOS steuern. Weitere Informationen zu SwipeView Sie in der SwipeView .

Beginnen Sie noch heute mit Xamarin.Forms 4.4

Um mit Xamarin.Forms 4.4 zu beginnen, aktualisieren oder installieren Sie es über den NuGet-Paketmanager. Wenn Sie ein Upgrade von einer früheren Version durchführen, müssen Sie berücksichtigen, dass Xamarin.Forms und Xamarin.Essentials jetzt von der Unterstützung von Android 28.0.0.3 abhängig sind. Daher sollten Sie sie zusammen mit allen anderen Paketen aktualisieren, die Sie verwenden. Dies hängt möglicherweise von den Android-Unterstützungsbibliotheken ab.

Denken Sie daran, neue Vorschaufunktionen mit SetFlags wenn Sie diese verwenden möchten. App.xaml.cs Ihrer App.xaml.cs Folgendes hinzu, um dies global für alle Plattformen in Ihrer Lösung zu App.xaml.cs :

 public App() {    InitializeComponent();    Device.SetFlags(new[] {        "CarouselView_Experimental",        "IndicatorView_Experimental",        "SwipeView_Experimental"    } );    MainPage = new AppShell(); }