Send button object from xaml to class (using MVVM model)

Question

I would like to change that code to be compatible with MVVM.

Below code with code-behind

<Button
    x:Name="sevenBtn"
    Grid.Row="2"
    Grid.Column="0"
    Click="NumberBtn_Click"
    Content="7"
    Style="{StaticResource numberButtonsStyle}" />

private void NumberBtn_Click(object sender, RoutedEventArgs e)
{
    int selectedValue = int.Parse((sender as Button).Content.ToString());
}

I use CommunityToolkit.Mvvm, Microsoft.Xaml.Behavior.Wpf Could anybody help me? Thanks

Send object in MVVM.

Answer 1

This is a simple sample code:

• Left side: How you can implement your number button.
• Right side: Another sample code of how to use the CommunityToolkit.Mvvm.

MainWindowViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace WpfAppTests;

public partial class MainWindowViewModel : ObservableObject
{
    [RelayCommand]
    private void UpdateNumber(string numberString)
    {
        if (int.TryParse(numberString, out int number) is true)
        {
            Number = number;
        }
    }

    [ObservableProperty]
    private int number;

    [ObservableProperty]
    private string someText = string.Empty;

    [RelayCommand]
    private void UpdateText(string text)
    {
        SomeText = text;
    }
}

MainWindow.xaml

<Window
    x:Class="WpfAppTests.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WpfAppTests"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!--  Your number button sample code. -->
        <StackPanel Grid.Column="0">
            <Button
                Command="{Binding UpdateNumberCommand}"
                CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}"
                Content="5" />
            <TextBlock Text="{Binding Number}" />
        </StackPanel>
        <!--  Simple sample code of how to use the CommunitToolkit.Mvvm.  -->
        <StackPanel Grid.Column="1">
            <TextBox x:Name="InputTextBox" />
            <Button
                Command="{Binding UpdateTextCommand}"
                CommandParameter="{Binding ElementName=InputTextBox, Path=Text}"
                Content="Update text" />
            <TextBlock Text="{Binding SomeText}" />
        </StackPanel>
    </Grid>
</Window>