Xamarin Forms Rotating Listviewは行幅を調整します

Question

Xamarinフォームでは、水平リストビューを実装したいと考えています（下の図を参照）。回転を介してこれは可能ですが、私は行の幅を変更することはできません。最初のレイアウトの下で2番目のレイアウトが開始される可能性もありますか？ ありがとうございます！

<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 私はまた、リストビューのグリッドを試してみました。同じ問題があります。

<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

私も同じ問題に直面しています。私はListViewの高さと幅を管理するためにxamlコードの下で使用しました。

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

幅とに応じて水平ListViewの高さを管理するXConstraintとYConstraint変更RowHeightとConstant。

以下は、私がListViewアイテムを取り込むために使用したカスタムセルです。各リスト項目に垂直ラベルが表示されました。

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

これは将来のユーザーに役立つことを願っています。

Answer 2

この問題を解決するために私が見つけた最良の解決策は、Fabio Cozzolinoのtutorialに示されているように、Listviewのプロパティを持つCustomScrollViewを作成することです。

彼はコメントにupdated versionがあることに注意してください。 scrollviewレンダリングする方法を作成し

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

：次に

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

を、各プラットフォームにcustomRenderer

彼はカスタムscrollviewを作成しました（ここでは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

あなたはxamarinフォームに簡単に水平方向のリストビューをアーカイブするFlowListViewプラグインを使用することができます。

NuGet - DLToolkit.Forms.Controls.FlowListView