.NET MAUI - 如何绑定到 ObservableCollection 项的属性

Question

我有一个 CollectionView，我想将标签的文本绑定到“RecipeName”。

它不起作用：Text =“{Binding RecipeName}”

现在看起来像：

我的视图看起来像：

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

我的 ViewModel 看起来像：

public MainViewModel()
{
    LoadRecipes();
}

private void LoadRecipes()
{
    Recipes = new ObservableCollection<RecipeModel>
    {
        new RecipeModel
        {
            RecipeName = "Rezept 1", // Here
            Ingredients = "Zutaten 1",
            Steps = "Schritte 1"
        },
        new RecipeModel
        {
            RecipeName = "Rezept 2", // Here
            Ingredients = "Zutaten 2",
            Steps = "Schritte 2"
        }
    };
}

[ObservableProperty]
ObservableCollection<RecipeModel> recipes;

---

编辑：非常感谢您的回答。我给我买了：

Text="{Binding Source={RelativeSource AncestorType={x:Type model:RecipeModel}}, Path=RecipeName}"

Answer 1

这会绑定整个对象

Text="{Binding .}" 

绑定特定属性

Text="{Binding RecipeName}" 

请注意，您只能绑定到公共属性

Answer 2

您不必设置文本的 BindingContext。好像有点复杂。我提供一些建议，以使绑定的使用更适合您的情况。

首先，设置ContentPage的BindingContext，设置为MainViewModel。您可以在 .xaml 文件中设置它：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         .....
         xmlns:viewmodel="clr-namespace:BindBindBind">

    <ContentPage.BindingContext>
        <viewmodel:MainViewModel/>
    </ContentPage.BindingContext>

或在 .cs 文件后面的代码中：

public MainPage()
{
    InitializeComponent();
    this.BindingContext = new MainViewModel();
}

然后对于 CollectionView，将 ItemsSource 绑定到 MainViewModel 中的 Recipes。默认的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:DataTemplate 的数据类型不是必需的。 Recipes是RecipeModel实例的集合，DataTemplate定义了每个实例如何显示。因此，对于每个标签，Text 属性应绑定到每个模型实例的 RecipeName 属性。

希望它对你有用。如果您还有任何疑问，请随时提问。

有关更多信息，您可以参考使用数据填充 CollectionView 和数据绑定。