如何使用垂直滚动视图显示绑定数据 [英] How to use vertical Scroll view to show binding data

问题描述

我想要这样的结构:单击此处查看所需的输出

但是使用我的代码，我得到了这个:单击此查看输出

But with my code i'm getting this : Click this to see the output

这是我的 xaml 代码:

Here is my xaml code :

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

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

Any help would be highly appreciated. Thank you

推荐答案

您必须为此进行自定义控件.请仔细阅读，如有任何疑问请告诉我.

you have to make customize control for this. Please go through this and let me know if any query.

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

1) Extend Scroll view with Customized template.

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) 将命名空间顶部添加到您的页面.

2) Add Namespace top to your page.

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

这篇关于如何使用垂直滚动视图显示绑定数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！