如何在ViewModel中编写此代码并与XAML设计页面绑定.Xamarin的c#

Question

我正在尝试在ViewModel中实现此代码，并在XAML页面中设计部分。

下面你可以找到我的代码。现在它在c#页面后面的代码中工作。但我正试图将此代码移动到ViewModel页面并与XAML设计页面绑定。但我不知道该怎么做。你能帮我做这件事吗?

这里我试图绑定XAML页面。

<StackLayout  BindableLayout.ItemsSource="{Binding Coupons}" Spacing="0" HorizontalOptions="FillAndExpand" Margin="5,5,5,0">
<Frame HorizontalOptions="FillAndExpand" Margin="20,10" Padding="20,10" BorderColor="Maroon" BackgroundColor="White" CornerRadius="10" HasShadow="True">
<StackLayout Orientation="Horizontal">
<StackLayout>
<Label Text="{Binding CouponName}" FontSize="Large" HorizontalOptions="Center" FontAttributes="Bold"/>
<BoxView HeightRequest="1" HorizontalOptions="FillAndExpand"/>
<Image Source="{Binding ImageUrl}" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"></Image>
<Label Text="{Binding CouponLimit}" Margin="0,10,0,0" FontSize="Large" HorizontalOptions="Center" />
</StackLayout>
</StackLayout>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding tgr}" />
</Frame.GestureRecognizers>
</Frame>
</StackLayout>

任何帮助都是感激的。谢谢!

Answer 1

您的VM需要公开一个Coupons属性，该属性是List或其他IEnumerable

public List<Coupon> Coupons { get; set; }

那么VM应该用来自服务的数据填充Coupons

那么在XAML中你可以使用可绑定的StackLayout或其他容器

<StackLayout BindableLayout.ItemsSource="{Binding Coupons}">
<BindableLayout.ItemTemplate>
<DataTemplate>
... fill in the layout for a single coupon here
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>

我强烈建议你尽可能简单地开始。将单个Label添加到模板中，并使其与绑定一起工作。然后添加另一个元素。让每一个都能正常工作，然后再添加更多。这样，如果你遇到问题，你可以很容易地把问题缩小到你最近做的改变。