如何将ViewModel绑定到另一个XAML文件的ListView中的XAML文件？

Question

I genuinely was unsure how to search for this, so I'm hoping someone can understand my problem and either help or clarify if my approach is incorrect.

I have 2 XAML files ( ItemsPage and ItemTemplatePage ) and I'm wanting to bind each XAML file to a ViewModel ( ItemsPageViewModel and ItemTemplateViewModel ) - now this is simple when they're both separate pages, but in this example ItemTemplatePage is loaded inside a ListView on the ItemsPage for every Item in Items.

Obviously when I interact with an Item I will call the code behind for ItemTemplatePage but instead I would rather call a Command for ItemTemplateViewModel. However, when Items populate and bind to the ListViews ItemsSource in the ItemsPage, from what I understand that creates a BindingContext of Item for that specific template. So it's not like I can call in the constructor for ItemTemplatePage:

BindingContext = new ItemTemplateViewModel();

Because at this point it overwrites any binding done by ItemsSource from the ItemsPage; least that's what I've experienced so far.

Below is the code I have so far to provide an understanding from a code point of view, is what I'm trying to achieve doable or am I making it to complex for myself or have I misunderstand Binding and my approach is completely wrong?

Any and all help is highly appreciated!

===

ItemsPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:template="clr-namespace:App.Views.Templates"
             x:Class="App.Views.ItemsPage"
             Title="All Items">
    <ContentPage.Content>
        <StackLayout>
            <ListView ItemsSource="{Binding Items}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <template:Item />
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Contant>
</ContentPage>

ItemsPage.xaml.cs

Public ItemsPage() {
    InitializeComponent();
    BindingContext = new ItemsPageViewModel();
}

ItemsPageViewModel.cs

public class ItemsPageViewModel : BaseViewModel {
    private ObservableCollection<Item> items;
    public ObservableCollection<Item> Items { get => items; set => SetValue(ref items, value); }

    public ItemsPageViewModel() => DownloadItems();

    private async void Download() => Items = await API.GetItems(); 
}

ItemTemplagePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App.Views.Templates.ItemTemplatePage"
             Spacing="0">
     <Label Text="{Binding Name}" />
     <Button Text="View" />
</StackLayout>

I've not provided the code behind for ItemTemplatePage.xaml because there is no additional code written here.

Answer 1

ListView implements DataTemplate , which means that its contents are bound to the item, not to the page view model in general and that's how it should work, if you try to provide any other binding context it won't crash the app, but for sure app won't work as expected as you basically act against the logic of XAML that way.

Also your ItemTemplagePage is not a page at all (and shouldn't be), but for some reason you call it a page and that probably confuses you further.

Overall you need to work more to understand some basic terms and principles in XAML. I guess that you wanted to check if that's correct and that's fine.