x:bind how to refence viewmodel

Question

GridView
            Grid.Row="1"
            ItemsSource="{x:Bind ViewModel.Contacts}"
            SelectionMode="None">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="model:Contact">
                    <Border>
                        <Grid
                            Width="80"
                            Height="80"
                            Background="#0050EF">
                            <TextBlock
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                FontSize="20"
                                Text="{x:Bind InitialsName}" />
                        </Grid>
                        <interactivity:Interaction.Behaviors>
                            <interactivity:EventTriggerBehavior EventName="Tapped">
                                <interactivity:InvokeCommandAction Command="{}}" CommandParameter="{x:Bind}" />
                            </interactivity:EventTriggerBehavior>
                        </interactivity:Interaction.Behaviors>
                    </Border>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid MaximumRowsOrColumns="4" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>

in xbind how can do cammand in my vm

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using EasyShere.Models;
using EasyShere.Services;
using System.Collections.ObjectModel;
namespace EasyShere.ViewModel;
public partial class FriendsPageViewModel : ObservableObject {
    public ObservableCollection<Contact> Contacts { get; set; } = [];
    public FriendsPageViewModel() {
        Contacts = FrinedsService.GetContacts();
    }
    [RelayCommand]
    void OnContactTapped(Contact contact) {
    }
}

Answer 1

Hi @Eduardo Gomez ,

Thanks for reaching out.

When you set:

<DataTemplate x:DataType="model:Contact">

the binding context inside that template becomes Contact. So x:Bind can only “see” members of Contact, not your FriendsPageViewModel. That’s why referencing the command directly doesn’t work.

Since you’re using [RelayCommand], the toolkit generates a property named OnContactTappedCommand. The key is making sure the template can access your page’s ViewModel.

Below is an approach you can consider:

1. Give your Page a name and expose the ViewModel

<Page
    x:Class="EasyShere.Views.FriendsPage"
    x:Name="RootPage">

(Assuming you already have a ViewModel property set on the page.)

2. Reference the ViewModel explicitly from the template

<interactivity:InvokeCommandAction
    Command="{x:Bind RootPage.ViewModel.OnContactTappedCommand}"
    CommandParameter="{x:Bind}" />

Here’s what’s happening:

• RootPage.ViewModel.OnContactTappedCommand tells x:Bind exactly where the command lives.
• CommandParameter="{x:Bind}" passes the current Contact item to your command.

That way, when an item is tapped, your method:

void OnContactTapped(Contact contact)

will be called with the correct contact.

Take the code above as a reference and modify it to suit your project’s structure, naming conventions, and how you expose the ViewModel.

Hope this helps! If my answer was helpful - kindly follow the instructions here so others with the same problem can benefit as well.

Answer 2

To reference a command in your ViewModel using {x:Bind}, you can bind the Command property of the InvokeCommandAction to the command in your ViewModel. In your case, you have a command called OnContactTapped that you want to invoke when a contact is tapped. Here’s how you can modify your XAML to achieve this:

<interactivity:InvokeCommandAction Command="{x:Bind ViewModel.OnContactTapped}" CommandParameter="{x:Bind}" />

Make sure that your ViewModel is properly set as the DataContext for your page or control. This way, the x:Bind will correctly reference the OnContactTapped command in your FriendsPageViewModel.

Here’s the modified part of your XAML:

<interactivity:EventTriggerBehavior EventName="Tapped">
    <interactivity:InvokeCommandAction Command="{x:Bind ViewModel.OnContactTapped}" CommandParameter="{x:Bind}" />
</interactivity:EventTriggerBehavior>

This ensures that when a contact is tapped, the OnContactTapped method in your ViewModel is called with the tapped contact as the parameter.

---

References:

• XAML attribute usage
• Functions in x:Bind with WinUI