How to use command from parent context in WinUI3

[shravan2x]

I have a WinUI3 app that looks like this:

I'd like to have the "Apply"/"Edit" buttons on each list item. But I'm having trouble getting this to work in code. Ideally, I'd use Command={x:Bind ViewModel.ApplyWindowBlueprintCommand} on each Apply button. But this doesn't work since the parent ListView's ViewModel isn't passed to its children.

I've also tried naming the Page and using ElementName to access its ViewModel but while this compiles, it doesn't actually call the command when run.

This is my ViewModel:

public partial class WindowLayoutViewModel : ObservableRecipient
{
    [ObservableProperty]
    private WindowLayoutService _windowLayoutService;

    [ObservableProperty]
    private string _blueprintWindowManagerDir;

    [ObservableProperty]
    private bool _shouldRunAsAdmin;

    [ObservableProperty]
    private IReadOnlyList<string> _availableWindowBlueprints;

    [ObservableProperty]
    private string? _selectedWindowBlueprint;

    public ICommand SelectBlueprintWindowManagerDirCommand { get; }
    public ICommand ApplyWindowBlueprintCommand { get; }

    public WindowLayoutViewModel(WindowLayoutService windowLayoutService)
    {
        // ...
    }
}

And my XAML:

<ListView
    x:Name="WindowBlueprintsListView"
    HorizontalAlignment="Stretch"
    ItemsSource="{x:Bind ViewModel.AvailableWindowBlueprints}"
    SelectedItem="{x:Bind ViewModel.SelectedWindowBlueprint, Mode=TwoWay}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="Auto, *, Auto, Auto" Height="60" Padding="0, 0, 10, 0">
                <FontIcon
                    Grid.Column="0"
                    VerticalAlignment="Center"
                    FontSize="32"
                    Glyph="&#xE81E;" />
                <TextBlock Grid.Column="1" Text="{Binding}" VerticalAlignment="Center" Style="{StaticResource ListTitleStyle}" Margin="20, 0, 0, 0" />
                <Button Grid.Column="2" Content="Apply" Width="100" Margin="20, 0, 0, 0" Command="{Binding DataContext.ApplyWindowBlueprintCommand, ElementName=WindowLayoutPage2}" />
                <Button Grid.Column="3" Content="Edit" Width="100" Margin="20, 0, 0, 0" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

[ghost1372]

Add this for your Page:

<Page
             x:Name="This">

now go into your WindowLayoutPage.xaml.cs file and set DataContext:

public WindowLayoutPage()
    {
        this.InitializeComponent();
        DataContext = this;
    }

and connect to your ViewModel like this:

Command="{Binding ElementName=This, Path=DataContext.ViewModel.ApplyWindowBlueprintCommand}"