Radio Button Binding MVVM Application

Question

I have a radiobutton.xaml file that has 4 radio buttons and a button

I showed radio button on the mainwindow by this code

<ContentControl Content="{StaticResource RB}" Height="326" x:Name="select" />

Now I need to implement binding for the radio button

I can't bind the radio buttons and the button to a view model. need to open new windows on behalf of the selected radio button on click of the button.

having difficulty in making V-M for radio button. don't know exactly where to put the binding code ...

<ResourceDictionary
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:src="clr-namespace:DiagramDesigner">

    <GroupBox x:Key="RB" Header="Select The Architecture Modeling Style" Height="400" >
        <StackPanel>
            <TextBlock Text="Custom Style Architecture Modeling:" FontSize="20"
               Margin="30 30 40 10" HorizontalAlignment="Center" />
            <RadioButton Content="Custome Architecture Modeling" Margin="50 0 10 10" 
                 GroupName="Standard"  />
            <TextBlock Text="Standard Style Architecture Modeling:" FontSize="20"
               Margin="30 0 40 10" HorizontalAlignment="Center" />
            <RadioButton Content="3-Tier Architecture Modeling" Margin="50 0 10 0" 
                 GroupName="Standard" />
            <RadioButton Content="Client-Server Architecture Modeling" 
                 Margin="50 0 10 0" GroupName="Standard" />
            <RadioButton Content="Pipeline and Filter Architecture Modeling" 
                 Margin="50 0 10 0" GroupName="Standard" />
            <Button Margin="100 20 100 0" Width="200" HorizontalContentAlignment="Center">
                <Button.Content>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="4*"/>
                            <RowDefinition Height="1*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="1" Text="Let's Go Draw It..." VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
                    </Grid>
                </Button.Content>
            </Button>
        </StackPanel>
    </GroupBox>
</ResourceDictionary>

need to bind it as MVVM

Answer 1

I'd recommend you to use the ListBox method instead of the one you mentioned. You may find it here:
http://www.codeproject.com/Tips/807025/WPF-MVVM-Binding-for-Multiple-Radio-Buttons

If you'd like to keep the "abstract" groups (custom and standard style architecture modeling), then one of the solution that comes to my mind now is to implement a TextBox in the ControlTemplate and bind it to a property on the view model.

    <ListBox ItemsSource="{Binding RadioCollection}" SelectedItem="{Binding SelectedRadio}">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <TextBlock Text="{Binding AbstractGroupHeader}" />
                            <RadioButton 
                                Content="{Binding Header}" ToolTip="{Binding ToolTip}"
                                IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Margin" Value="5"/>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

The view model basically is responsible for the view's state (e.g. an animation on the view isn't definied in the view model, but the view model may release, as in start it). VM is a class that you define and it must implement INotifyPropertyChanged interface found in namespace System.ComponentModel in case you want the view to be notified when you change property's value in code. Keep in mind, that the property must have a public access modifier, in order for the binding to work. If you want to follow this method, then read the article located under the link I gave. However, if you want a simpler solution, which will work with your code, then you have to bind IsChecked dependency property of each of the radio buttons to appropriate properties on the view model, like this:

    <RadioButton Content="Pipeline and Filter Architecture Modeling" 
             Margin="50 0 10 0" GroupName="Standard" IsChecked="{Binding IsPipelinedModeling}"/>

And the VM in this case would look like this:

public class SettingsViewModel : INotifyPropertyChanged
{
    bool _isPipelinedModeling;
    public bool IsPipelinedModeling
    {
        get { return _isPipelinedModeling; }
        set
        {
            if (_isPipelinedModeling == value)
                return;
            _isPipelinedModeling = value;
            RaisePropertyChanged();
        }
    }

    #region INotifyPropertyChanged implementation

    public void RaisePropertyChanged([CallerMemberName]string propertyName = "")
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion INotifyPropertyChanged implementation
}

To bind the view model to the view you can use either "view first" or "view model first" approach. I'm using view first. In the constructor of the window, user control or whatever you're using, add the following code: this.Loaded += (s, e) => { this.DataContext = new SettingsViewModel(); }; The code creates a new view model object and sets it as the window's DataContext.

Binding to a button is a little bit different though, because you have to declare a command. It is a class of your own, implementing ICommand interface:

    ICommand _drawModelingArchitectureCommand;
    public ICommand DrawModelingArchitectureCommand
    {
        get
        {
            return _drawModelingArchitectureCommand ?? (_drawModelingArchitectureCommand = new DrawTheModelingArchitectureCommand());
        }
    }

    public class DrawTheModelingArchitectureCommand : ICommand
    {
        public bool CanExecute(object parameter)
        {
            // the code that decides whether the button will be enabled or not
            return true;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            // the code that is executed when the button is pressed
        }
    }

And finally the XAML for the button:

    <Button Grid.Row="1" Content="Let's Go Draw It..." VerticalAlignment="Bottom" HorizontalAlignment="Center" Command="{Binding DrawTheModelingArchitecture}"/>