Xaml 如何使用垂直滚动视图显示绑定数据
我想要一个这样的结构: 但通过我的代码,我得到了: 以下是我的xaml代码:Xaml 如何使用垂直滚动视图显示绑定数据,xaml,xamarin,xamarin.forms,Xaml,Xamarin,Xamarin.forms,我想要一个这样的结构: 但通过我的代码,我得到了: 以下是我的xaml代码: <ScrollView Orientation="Horizontal"> <StackLayout Orientation="Horizontal" VerticalOptions="Start"> <Grid x:Name="ImagesListViews" > <Grid.RowDefinitions>
<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>
任何帮助都将不胜感激。谢谢您必须对此进行自定义控制。请检查一下,如果有任何疑问,请告诉我 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;
}
}
3) 使用控制
<control:HorizontalListview Orientation="Horizontal">
<control:HorizontalListview.ItemTemplate>
<DataTemplate>
<ViewCell>
<!....Your Design.....>
</ViewCell>
</DataTemplate>
</control:HorizontalListview.ItemTemplate>
</control:HorizontalListview>
您为什么要在stacklayout中放置一个空网格?正如Depechie提到的,在这个xaml中名为ImagesListViews的网格是空的(可能您已经删除了问题的内容?)。我不确定您对local:BindableStackLayout有什么实现,但您是否尝试将其方向设置为水平?@Dev您是否在
功能deventsList
中添加了子视图?如果是这样,您需要使其方向水平。另外,为什么不删除网格
和父级堆栈布局
,只保留您的BindableStackLayout
?
<control:HorizontalListview Orientation="Horizontal">
<control:HorizontalListview.ItemTemplate>
<DataTemplate>
<ViewCell>
<!....Your Design.....>
</ViewCell>
</DataTemplate>
</control:HorizontalListview.ItemTemplate>
</control:HorizontalListview>
**YourControlName**.ItemsSource = lLstPhotoGallery; // Your List
**YourControlName**.Render();