Can't set up binding | MAUI-CodePudding

I'm developing a page that has a Collection View. Inside CollectionView.Footer, when I click on the button, I need to bind to Some Command, but I can't do it, because now there is a binding to SomeModel. Please tell me how to set up binding to ViewModel in CollectionView.Footer

.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewmodels="clr-namespace:Paraglider.MobileApp.ViewModels"
    xmlns:models="clr-namespace:Paraglider.MobileApp.Models"
    x:Class="Paraglider.MobileApp.Pages.SomePage"
    x:DataType="viewmodels:SomePageViewModel">

    <Grid>

        ...        

        <CollectionView
            Grid.Row="2" Grid.ColumnSpan="2"
            ItemsSource="{Binding Items}"
            SelectionMode="None">

            <CollectionView.ItemsLayout>
                ...
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:SomeModel">
                    ...
                </DataTemplate>
            </CollectionView.ItemTemplate>

            <CollectionView.Footer>
                <Border 
                    Margin="10, 0"
                    Padding="10"
                    Stroke="Transparent"
                    StrokeShape="RoundRectangle 15,15,15,15">

                    <Border.Shadow>
                        <Shadow Brush="Black" Opacity="0.1" Radius="5" />
                    </Border.Shadow>

                    <StackLayout Orientation="Horizontal">
                        
                        ...
                   
                        <Button 
                            Padding="0"
                            CornerRadius="10"
                            HeightRequest="35" WidthRequest="60"
                            BackgroundColor="#FF8787" 
                            FontFamily="geometria_medium" FontSize="24"
                            HorizontalOptions="End"
                            Text=" "
                            Command="{Binding SomeCommand}"/>

                    </StackLayout>

                </Border>
            </CollectionView.Footer>
                                
        </CollectionView>

    </Grid>
      
</ContentPage>

.xaml.cs:

using Paraglider.MobileApp.ViewModels;

namespace Paraglider.MobileApp.Pages;

public partial class SomePage : ContentPage
{
    public SomePage (SomePageViewModel viewModel)
    {
        BindingContext = viewModel;
        InitializeComponent();
    }
}

viewmodel.cs:

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Paraglider.MobileApp.Infrastructure.Abstractions;
using Paraglider.MobileApp.Models;
using Paraglider.MobileApp.Services;
using System.Collections.ObjectModel;

namespace Paraglider.MobileApp.ViewModels;

public partial class SomePageViewModel : BaseViewModel
{
    #region services

    private readonly SomeService someService;

    #endregion

    #region fields

    [ObservableProperty]
    private ObservableCollection<SomeModel> someModels;

    #endregion

    public SomePageViewModel(SomeService someService)
    {
        this.someService= someService;
        InitAsync();
    }

    public override async void InitAsync()
    {
        var someModels = await someService.GetAsync() ?? new();
        SomeModels = new ObservableCollection<SomeModels>(components);
    }

    [RelayCommand]
    private async Task SomeAsync()
    {
        ...
    }
}

CodePudding user response：

To make sure that you can bind correctly to SomeCommand, you can use a RelativeSource for the binding and refer to the SomePageViewModel:

<Button Command="{Binding SomeCommand, Source={RelativeSource AncestorType={x:Type viewmodels:SomePageViewModel}}}" />

You can also browse the documentation on relative bindings and compiled bindings.