Xamarin Forms Rotation Listview ajuster la largeur de la ligne

Question

Dans Xamarin Forms, je veux implémenter une vue de liste horizontale (comme montré dans l'image ci-dessous). Via la rotation c'est possible, mais je ne peux pas changer la largeur de la rangée. Y a-t-il aussi une possibilité que la deuxième mise en page commence sous la première? Merci d'avance!

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     x:Class="Recipe.Pages.SearchPage" 
     Title="Search"> 
<ContentPage.Content> 
<StackLayout Spacing="5" x:Name="layout" Orientation="Vertical" > 
    <StackLayout x:Name="layoutButtons" HorizontalOptions="FillAndExpand" Orientation="Horizontal" Spacing="5" BackgroundColor="Red"> 
    <Button x:Name="btn1" BackgroundColor="White" Image="@drawable/scan" /> 
    <Button x:Name="btn2" BackgroundColor="White" Image="@drawable/menu" /> 
    <Button x:Name="btn3" BackgroundColor="White" Image="@drawable/search" /> 
    </StackLayout> 
    <StackLayout x:Name="layoutList" > 
    <ListView x:Name="listView" Rotation="270" RowHeight="75" > 
     <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell> 
      <StackLayout BackgroundColor="#eee" Orientation="Vertical" > 
       <StackLayout Orientation="Horizontal" > 
       <Button BackgroundColor="White" Rotation="90" Image="{Binding Recipe}" /> 
       </StackLayout> 
      </StackLayout> 
      </ViewCell> 
     </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
    </StackLayout> 
</StackLayout> 
</ContentPage.Content> 
</ContentPage> 

EDIT J'ai aussi essayé avec une grille dans le listview. Avoir le même problème.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     x:Class="Recipe.Pages.SearchPage" 
     Title="Search"> 
<ContentPage.Content> 
<StackLayout Spacing="5" x:Name="layout" Orientation="Vertical" > 
    <StackLayout x:Name="layoutButtons" HorizontalOptions="FillAndExpand" Orientation="Horizontal" Spacing="5" BackgroundColor="Red"> 
    <Button x:Name="btn1" BackgroundColor="White" Image="@drawable/scan" /> 
    <Button x:Name="btn2" BackgroundColor="White" Image="@drawable/menu" /> 
    <Button x:Name="btn3" BackgroundColor="White" Image="@drawable/search" /> 
    </StackLayout> 
    <StackLayout x:Name="layoutList" > 
    <ListView x:Name="listView" Rotation="270" RowHeight="75" > 
     <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell> 
      <Grid> 
       <Grid.RowDefinitions> 
       <RowDefinition Height="Auto" /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="75" /> 
       </Grid.ColumnDefinitions> 
       <Button Grid.Column="0" BackgroundColor="White" Rotation="90" Image="{Binding Recipe}" /> 
      </Grid> 
      </ViewCell> 
     </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
    </StackLayout> 
</StackLayout> 
</ContentPage.Content> 
</ContentPage> 

Answer 1

J'ai aussi le même problème. J'ai utilisé ci-dessous code xaml pour gérer la hauteur et la largeur de ListView.

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="VCRoom.HorizontalScroll"> 
    <ContentPage.Content > 
    <RelativeLayout> 
     <ListView x:Name="TestListView" 
       RowHeight="80" 
       Rotation="270" 
       RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-40}" 
       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=-0.5, Constant=40}" 
       RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=80}" 
       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
       > 
     </ListView> 
    </RelativeLayout> 
    </ContentPage.Content> 
</ContentPage> 

changement RowHeight et Constant dans XConstraint et YConstraint pour gérer la largeur et la hauteur de horizontale ListView en conséquence.

Juste pour la référence Ci-dessous est la cellule personnalisée que j'ai utilisé pour remplir ListView articles. J'ai affiché des étiquettes verticales dans chaque élément de la liste.

<?xml version="1.0" encoding="UTF-8"?> 
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="VCRoom.TestCell"> 
    <ViewCell.View> 

     <StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions ="Center"> 
     <Label Rotation="90" Text="{Binding Day}" TextColor="#000000" HorizontalOptions="StartAndExpand" VerticalOptions="Start"/> 
     <Label Rotation="90" Text="{Binding mDate}" TextColor="#000000" HorizontalOptions="StartAndExpand" VerticalOptions="Start"/> 
     </StackLayout> 

    </ViewCell.View> 
</ViewCell> 

Espérons que cela aidera les futurs utilisateurs.

Answer 2

La meilleure solution que j'ai trouvée pour résoudre ce problème est de créer un CustomScrollView avec les propriétés de Listview, comme cela est montré dans le tutorial du Fabio Cozzolino.

Faites attention qu'il ait un updated version dans les commentaires.

Il a créé un scrollview personnalisé:

public class TLScrollView : ScrollView 
{ public static readonly BindableProperty ItemsSourceProperty = 
     BindableProperty.Create("ItemsSource", typeof(IEnumerable), typeof(CustomScrollView), default(IEnumerable), 
           BindingMode.Default, null, new BindableProperty.BindingPropertyChangedDelegate(HandleBindingPropertyChangedDelegate)); 

    private static object HandleBindingPropertyChangedDelegate(BindableObject bindable, object value) 
    { 
     throw new NotImplementedException(); 
    } 

    public IEnumerable ItemsSource 
    { 
     get { return (IEnumerable)GetValue(ItemsSourceProperty); } 
     set { SetValue(ItemsSourceProperty, value); } 
    } 

    public static readonly BindableProperty ItemTemplateProperty = 
     BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(CustomScrollView), default(DataTemplate)); 

    public DataTemplate ItemTemplate 
    { 
     get { return (DataTemplate)GetValue(ItemTemplateProperty); } 
     set { SetValue(ItemTemplateProperty, value); } 
    } 

    public event EventHandler<ItemTappedEventArgs> ItemSelected; 

    public static readonly BindableProperty SelectedCommandProperty = 
     BindableProperty.Create("SelectedCommand", typeof(ICommand), typeof(CustomScrollView), null); 

    public ICommand SelectedCommand 
    { 
     get { return (ICommand)GetValue(SelectedCommandProperty); } 
     set { SetValue(SelectedCommandProperty, value); } 
    } 

    public static readonly BindableProperty SelectedCommandParameterProperty = 
     BindableProperty.Create("SelectedCommandParameter", typeof(object), typeof(CustomScrollView), null); 

    public object SelectedCommandParameter 
    { 
     get { return GetValue(SelectedCommandParameterProperty); } 
     set { SetValue(SelectedCommandParameterProperty, value); } 
    } 

    static void HandleBindingPropertyChangedDelegate(BindableObject bindable, object oldValue, object newValue) 
    { 
     var isOldObservable = oldValue?.GetType().GetTypeInfo().ImplementedInterfaces.Any(i => i == typeof(INotifyCollectionChanged)); 
     var isNewObservable = newValue?.GetType().GetTypeInfo().ImplementedInterfaces.Any(i => i == typeof(INotifyCollectionChanged)); 

     var tl = (CustomScrollView)bindable; 
     if (isOldObservable.GetValueOrDefault(false)) 
     { 
      ((INotifyCollectionChanged)oldValue).CollectionChanged -= tl.HandleCollectionChanged; 
     } 

     if (isNewObservable.GetValueOrDefault(false)) 
     { 
      ((INotifyCollectionChanged)newValue).CollectionChanged += tl.HandleCollectionChanged; 
     } 

     if (oldValue != newValue) 
     { 
      tl.Render(); 
     } 
    } 

    private void HandleCollectionChanged(object sender, NotifyCollectionChangedEventArgs e) 
    { 
     Render(); 
    } 
} 

a créé une méthode pour rendre le scrollview:

public void Render() 
{ if (ItemTemplate == null || ItemsSource == null) 
     { 
      Content = null; 
      return; 
     } 

     var layout = new StackLayout(); 
     layout.Orientation = Orientation == ScrollOrientation.Vertical ? StackOrientation.Vertical : StackOrientation.Horizontal; 

     foreach (var item in ItemsSource) 
     { 
      var command = SelectedCommand ?? new Command((obj) => 
      { 
       var args = new ItemTappedEventArgs(ItemsSource, item); 
       ItemSelected?.Invoke(this, args); 
      }); 
      var commandParameter = SelectedCommandParameter ?? item; 

      var viewCell = ItemTemplate.CreateContent() as ViewCell; 
      viewCell.View.BindingContext = item; 
      viewCell.View.GestureRecognizers.Add(new TapGestureRecognizer 
      { 
       Command = command, 
       CommandParameter = commandParameter, 
       NumberOfTapsRequired = 1 
      }); 

      layout.Children.Add(viewCell.View); 
     } 

     Content = layout; } 

Ensuite, un CustomRenderer à chaque plate-forme (Ici iO S):

[assembly: ExportRenderer(typeof(TLScrollView), typeof(TLScrollViewRenderer))] 

namespace TitiusLabs.Forms.iOS.Controls 
{ 
class CustomScrollViewRenderer : ScrollViewRenderer 
{ 
    protected override void OnElementChanged(VisualElementChangedEventArgs e) 
    { 
     base.OnElementChanged(e); 

     var element = e.NewElement as CustomScrollView; 
     element?.Render(); 
    } 
} } 

Answer 3

Vous pouvez utiliser le plugin FlowListView pour archiver listview horizontal facilement sur les formes de Xamarin.

NuGet - DLToolkit.Forms.Controls.FlowListView