如何使用垂直滚动视图显示绑定数据答案

【问题标题】：How to use vertical Scroll view to show binding data如何使用垂直滚动视图显示绑定数据
【发布时间】：2018-11-01 15:22:16
【问题描述】：

我想要这样的结构： Click this to see the desired output

但是使用我的代码，我得到了这个：Click this to see the output

这是我的 xaml 代码：

<ScrollView Orientation="Horizontal">
   <StackLayout Orientation="Horizontal" VerticalOptions="Start">
     <Grid  x:Name="ImagesListViews" >
         <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
    </Grid>

    <local:BindableStackLayout x:Name="featuredEventsList">
       <local:BindableStackLayout.ItemDataTemplate>
         <DataTemplate>

          <StackLayout Orientation="Vertical" Padding="0" Margin="-5,0,5,0" HorizontalOptions="Center" >
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer  NumberOfTapsRequired="1" />
            </StackLayout.GestureRecognizers>
            <Image Source="{Binding ImageThumbURL}" Margin="0,0,0,0" WidthRequest="140" />
            <Label Margin="0" Text="{Binding TitleInPrimaryLang}" FontSize="12" TextColor="Black" LineBreakMode="TailTruncation" WidthRequest="100"/>

         </StackLayout>
       </DataTemplate>
     </local:BindableStackLayout.ItemDataTemplate>
   </local:BindableStackLayout>
 </StackLayout>
</ScrollView>

任何帮助将不胜感激。谢谢

【问题讨论】：

你有什么理由在stacklayout中放置一个空网格吗？
正如 Depechie 提到的，在这个 xaml 中名为 ImagesListViews 的网格是空的（也许您已经删除了问题的内容？）。我不确定您对 local:BindableStackLayout 有什么实现，但是您是否尝试过将其 Orientation 设置为水平？
@Dev 您是否将您的子视图添加到您的featuredEventsList 中？如果是这样，您需要使其方向水平。另外，你为什么不删除Grid 和父Stacklayout，只留下你的BindableStackLayout？

标签： xaml xamarin xamarin.forms

【解决方案1】：

您必须为此进行自定义控制。如果有任何疑问，请仔细阅读。

1) 使用自定义模板扩展滚动视图。

public class HorizontalListview : ScrollView
{
    public static readonly BindableProperty ItemsSourceProperty =
        BindableProperty.Create("ItemsSource", typeof(IEnumerable), typeof(HorizontalListview), default(IEnumerable));

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

    public static readonly BindableProperty ItemTemplateProperty =
        BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(HorizontalListview), 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(HorizontalListview), null);

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

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

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


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

        var layout = new StackLayout();
        layout.Spacing = 0;

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

2) 在页面顶部添加命名空间。

xmlns:control="clr-namespace:**Projectname**.CustomControls"

3) 使用控制，

 <control:HorizontalListview  Orientation="Horizontal">
            <control:HorizontalListview.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <!....Your Design.....>
                    </ViewCell>
                </DataTemplate>
            </control:HorizontalListview.ItemTemplate>
 </control:HorizontalListview>

4) 绑定你的数据。

**YourControlName**.ItemsSource = lLstPhotoGallery; // Your List
**YourControlName**.Render();

【讨论】：