[英].NET MAUI - How to bind on a property of an ObservableCollection Item
I have a CollectionView and I would like to bind the Text of the Label to the 'RecipeName'.我有一个 CollectionView,我想将标签的文本绑定到“RecipeName”。
It is not working to do: Text="{Binding RecipeName}"这样做是行不通的:Text="{Binding RecipeName}"
Now it looks like:现在它看起来像:
My View looks like:我的观点看起来像:
<CollectionView ItemsSource="{Binding Recipes}"
SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="{x:Type x:String}">
<SwipeView>
<Grid>
<Frame>
<Frame.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}}, Path=TapCommand}"
CommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
<Label Text="{Binding .}" <!-- Here -->
FontSize="24"/>
</Frame>
</Grid>
</SwipeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
My ViewModel looks like:我的 ViewModel 看起来像:
public MainViewModel()
{
LoadRecipes();
}
private void LoadRecipes()
{
Recipes = new ObservableCollection<RecipeModel>
{
new RecipeModel
{
RecipeName = "Pizza", // Here
Ingredients = "Teig, Belag",
Steps = "Belag auf Teig und danach in den Ofen"
},
new RecipeModel
{
RecipeName = "Burger", // Here
Ingredients = "Brötchen, Fleisch, Belag",
Steps = "Belag und Fleisch auf das Brötchen"
}
};
}
[ObservableProperty]
ObservableCollection<RecipeModel> recipes;
This binds the entire object这将绑定整个对象
Text="{Binding .}"
To bind a specific property绑定特定属性
Text="{Binding RecipeName}"
Note that you can only bind to public properties请注意,您只能绑定到公共属性
You don't have to set the BindingContext of the Text.您不必设置文本的BindingContext 。 It seems a little complicated.
好像有点复杂。 I give some suggestions to make the use of bindings more clear for your case.
我给出了一些建议,使绑定的使用更适合您的情况。
First, set the BindingContext of the ContentPage, set it MainViewModel .首先,设置 ContentPage 的BindingContext ,设置MainViewModel 。 You could set it in.xaml file:
你可以在 .xaml 文件中设置它:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
.....
xmlns:viewmodel="clr-namespace:BindBindBind">
<ContentPage.BindingContext>
<viewmodel:MainViewModel/>
</ContentPage.BindingContext>
or in code behind.cs file:或者在代码 behind.cs 文件中:
public MainPage()
{
InitializeComponent();
this.BindingContext = new MainViewModel();
}
Then for the CollectionView, bind the ItemsSource to the Recipes in the MainViewModel .然后对于 CollectionView,将 ItemsSource 绑定到MainViewModel中的 Recipes。 The default BindingContext is the same as its parent, that is MainViewModel which is set before.
默认的BindingContext与其父级相同,即之前设置的MainViewModel 。
<CollectionView ItemsSource="{Binding Recipes}"
SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate>
<SwipeView>
<Grid>
<Frame>
<Frame.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}}, Path=TapCommand}"
CommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
<Label Text="{Binding RecipeName}" FontSize="24"/>
</Frame>
</Grid>
</SwipeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
x:DataType for DataTemplate is not necessary.不需要DataTemplate的 x:DataType。 Recipes is the Collection of RecipeModel instance and DataTemplate defines each instance how to display.
Recipes是 RecipeModel 实例的集合, DataTemplate定义了每个实例如何显示。 So for each label, Text property should binds to the RecipeName property of each model instance.
因此对于每个标签,Text 属性应该绑定到每个模型实例的 RecipeName 属性。
Hope it works for you.希望对你有效。 If you still have any question, feel free to ask.
如果您还有任何问题,请随时提问。
For more info, you could refer to Populate a CollectionView with data and Data binding .有关更多信息,您可以参考使用数据填充 CollectionView和数据绑定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.