Does WinUI support MVVM?

Quarkly 0
Viewed 41

Clicking on a ListViewItem and having it execute some action in a view model is the most basic command, but I can't find any bindable properties on the ListView or ListViewItem. Maui, at least, has gesture behaviors. This is how it should work:

    <ListView DataContext="{x:Bind ViewModel.FolderViewModel}"
              ItemsSource="{x:Bind Items}"
              Tapped={x:Bind Tapped}">
    </ListView>

Please, what am I missing. Is there another, more clever, native way to do this? If so, what is it. If not, why is MVVM not supported?

Yes, I know there are external packages. I feel like I just got into a new automobile, and there was no steering wheel. If steering is such an important concept for driving, then where is the steering wheel? If the car's manufacturer has invented an auto-driving car, then I need learn this new paradigm. If the manufacturer just says "Go buy a steering wheel at AutoZone", then it's just a crappy design.

mvvm winui-3
1 Answers

You can apply the MVVM design.

There are some controls like Buttons that let you bind the Command directly but for ListViews, you need to convert the event to a Command. This is almost the same in WPF, UWP.

NuGet packages

  • CommunityToolkit.Mvvm
  • Microsoft.Xaml.Behaviors.WinUI.Managed

.xaml

<Window
    x:Class="WinUI3App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel>
        <ListView>
            <interactivity:Interaction.Behaviors>
                <core:EventTriggerBehavior EventName="SelectionChanged">
                    <core:InvokeCommandAction Command="{x:Bind ViewModel.SelectItemCommand}" />
                </core:EventTriggerBehavior>
            </interactivity:Interaction.Behaviors>
            <ListViewItem Content="Item #1" />
            <ListViewItem Content="Item #2" />
        </ListView>
    </StackPanel>

</Window>

.xaml.cs

using Microsoft.UI.Xaml;
namespace WinUI3App1;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    public MainWindowViewModel ViewModel { get; } = new();
}

ViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
namespace WinUI3App1;

public partial class MainWindowViewModel : ObservableObject
{
    [RelayCommand]
    private void SelectItem(object param)
    {
    }
}
Andrew KeepCoding0
Related