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