How to add event on radio button change with MVVM pattern?

Question

I'm trying to make dynamic radio buttons and I want to display a message box with the selected item on radio button change event. I don't really understand how to create a new event handler with MVVM pattern neither how PropertyChangedEventHandler can be used.

Here is my code

XAML

<StackPanel Grid.Row="2">
    <TextBlock Text="Select a Salad"
                       FontSize="18"
                        Margin="5" />
    <ItemsControl ItemsSource="{Binding Salads}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <RadioButton GroupName="Salads"
                            Content="{Binding ItemDescription}"
                            IsChecked="{Binding IsSelected}"
                            Margin="5,1"/>
            </DataTemplate>

        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>

View Model

public class MainWindowViewModel : INotifyPropertyChanged
{
    public MainWindowViewModel()
    {
        Salads = new Collection<SelectableItem>
                {
                    new SelectableItem { ItemDescription = "Kale Avocado", Id = 1},
                    new SelectableItem { ItemDescription = "Caesar", Id = 2 },
                    new SelectableItem { ItemDescription = "Arugula with Goat Cheese", Id = 3, IsSelected = true},
                    new SelectableItem { ItemDescription = "Garden", Id = 4}
                };
    }

    // Salads
    public Collection<SelectableItem> Salads { get; set; }

    public SelectableItem SelectedSalad
    {
        get { return Salads.FirstOrDefault(s => s.IsSelected); }
    }

    // Property Changed
    public event PropertyChangedEventHandler PropertyChanged;
}

SelectableItem Class

public class SelectableItem : INotifyPropertyChanged
{
    public string ItemDescription { get; set; }

    public bool IsSelected { get; set; }

    public int Id { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
}

Possible duplicate of [Data bound radio button list in WPF](https://stackoverflow.com/questions/805015/data-bound-radio-button-list-in-wpf) — ASh, Jun 26 '18 at 12:25
use ListBox instead of ItemsControl: ListBox has selection support out-of-box — ASh, Jun 26 '18 at 12:27
Add an `ICommand` property to `SelectableItem` and bind the Command property of the `RadioButton` to this one. — mm8, Jun 26 '18 at 12:31

mm8 · Accepted Answer · 2018-06-26T12:41:18.707

You typically use commands to handle events in a MVVM application. Please refer to this blog post for more information about this.

Once you have added a command to your SelectableItem class that displays the MessageBox, you could bind the Command property of the RadioButton to this source property:

<RadioButton GroupName="Salads"
        Content="{Binding ItemDescription}"
        IsChecked="{Binding IsSelected}"
        Command="{Binding YourCommand}"
        Margin="5,1"/>

The command will then be invoked when you check or uncheck the RadioButton.

Hexo · Answer 2 · 2018-06-26T12:34:04.423

0

PropertyChanged can be used like this

PropertyChanged += delegate(string propertyName)
{
    if(propertyName == "IsSelected")
    {
        // Do something
    }
};

edited Jun 26 '18 at 12:34

answered Jun 26 '18 at 12:24

Hexo

518
7
21

for examlple in the constructor of MainWindowViewModel() or in the window/usercontrol's constructor (DataContext.OnPropertyChanged += ...) – Hexo Jun 26 '18 at 12:47

How to add event on radio button change with MVVM pattern?

2 Answers2