Xamarin Forms Rotating Listview調整行寬

Question

在Xamarin Forms中，我想實現一個水平列表視圖（如下圖所示）。通過旋轉這是可能的，但我不能改變行寬。是否有可能讓第二個佈局在第一個佈局下開始？ 在此先感謝！

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

編輯 我也試圖與在ListView的網格。有同樣的問題。

<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

我也面臨同樣的問題。我使用下面的xaml代碼來管理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> 

變化RowHeight和XConstraintConstant和YConstraint管理寬度和相應的水平ListView高度。

僅供參考下面是我用來填充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

我發現解決此問題的最佳解決方案是使用Listview中的屬性製作CustomScrollView，如Fabio Cozzolino的tutorial中所示。

請注意，他在評論中有updated version。

他創造了一個自定義的滾動視圖：

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到每個平臺（這裏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

可以使用FlowListView插件上xamarin形式存檔輕鬆水平列表視圖。

NuGet - DLToolkit.Forms.Controls.FlowListView