Question

I am a C++ developer and recently moved to C#. I am working on WPF app which deals with dynamic generation of groupboxes. The UI components like RadioButton, togglebutton etc present in respective groupbox must inturn be generated dynamically.

Currently I have 2 xaml files CodecView.xaml and CodecWidgetView.xaml, a separate viewmodel class for both the xaml files. Well This dynamic generation is interesting but surely a tricky situation for me. Let me show you the code in which I have dynamically generated set of groupboxes.

CodecView.xaml:

<UserControl.Resources>
    <DataTemplate x:Key="CWDataTemplate">
        <StackPanel>
            <TextBlock Text="{Binding Description}" Margin="5,5,0,0"/>
            <local:CodecWidgetView Margin="5,10,5,5"/>
        </StackPanel>
    </DataTemplate>
</UserControl.Resources>

<Grid Grid.Row="0" Style="{DynamicResource styleBackground}">          
        <Grid Name="NumberofCodecs" >
            <ItemsControl ItemTemplate="{StaticResource CWDataTemplate}" ItemsSource="{Binding CodecWidgets}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Grid>            
 </Grid>

CodecWidgetView.xaml:

<Grid>
    <GroupBox Height="Auto" HorizontalAlignment="Stretch" Margin="5,5,5,5" Name="groupBox1" VerticalAlignment="Stretch" Width="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <ToggleButton Name="MasterBox" Content="Master" Command="{Binding MasterCommand}" IsChecked="{Binding MasterCheck}" Grid.Column="1" Height="25" Width="50" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" />
                <ComboBox Grid.Column="2" ItemsSource="{Binding ModesList}" SelectedItem="{Binding SelectedModesList, Mode=OneWayToSource}" SelectedIndex="2" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox2" VerticalAlignment="Center" Width="80" />
                <ComboBox Grid.Column="0" ItemsSource="{Binding FrequencyList}" SelectedItem="{Binding SelectedFrequencyList, Mode=OneWayToSource}" SelectedIndex="0" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox1" VerticalAlignment="Center" Width="80" />
            </Grid>

            <Grid Grid.Row="1">
                //Here I want to dynamically generate 4 radio buttons
            </Grid>

            <Grid Grid.Row="2">
                <Label Name="BitDelay" Content="Bit Delay" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" />
                <Slider Height="23" HorizontalAlignment="Center" Value="{Binding BitDelayValue, Mode=TwoWay}" Minimum="0.0" Maximum="255.0" TickFrequency="1.0" Margin="95,0,0,0" Name="bitdelayslider" VerticalAlignment="Center" Width="160" />
                <TextBox Name="BitDelayValue" IsReadOnly="True" Text="{Binding ElementName=bitdelayslider,Path=Value, StringFormat=0.0}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Grid>

            <Grid Grid.Row="3">
                <Label Name="DBGain" Content="DB Gain" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" />
                <TextBox Name="DBGainValue" IsReadOnly="True" Text="{Binding ElementName=dbgainslider,Path=Value, StringFormat=0.0}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                <Slider Height="23" HorizontalAlignment="Center" Value="{Binding DBGainValue, Mode=TwoWay}" Minimum="0.0" Maximum="59.5" TickFrequency="0.5" Margin="95,0,0,0" Name="dbgainslider" VerticalAlignment="Center" Width="160" />
            </Grid>
        </Grid>
    </GroupBox>
</Grid>

CodecViewModel.cs:

public ObservableCollection<CodecWidgetViewModel> CodecWidgets { get; set; }

    public CodecViewModel()
    {
        CodecWidgets = new ObservableCollection<CodecWidgetViewModel>();
        CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 8  - Dig Mic A" });
        CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 9  - Dig Mic B" });
        CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 10  - PCM A 3P3V" });
        CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 11  - PCM B 3P3V" });
    }

CodecWidgetViewModel.cs:

private string _description;
    public string Description
    {
        get
        { 
            return _description; 
        }

        set
        {
            _description = value;
            OnPropertyChanged("Description");
        }
    }

This gives me 4 groupboxes on startup. Now here is the requirement:

1. Have a look at the CodecWidgetView.xaml and you will find me adding combobox’s, slider etc. but in Grid.Row=2 I wanna dynamically generate 4 toggle buttons with Content as: 16 Bit, 20 Bit, 24 Bit and 32 Bit.
2. Once this happens there must be just one click event on this button which sets the togglestate and executes some statements.

This is how I had done in C++:

//In Constructor
for(int jj = 0; jj < 4; jj++)
{
    m_codecBitLengthButton[jj] = new ToggleButton(bitLengthes[jj]); //Here bitlength consists of 16Bit, 20Bit, 24Bit and 32Bit
    m_codecBitLengthButton[jj]->setRadioGroupId(55); // make a custom group ID
    addAndMakeVisible(m_codecBitLengthButton[jj]);
    m_codecBitLengthButton[jj]->addButtonListener(this);
    m_codecBitLengthButton[jj]->setToggleState(false, false);
}
// check which button should be pressed
    cmd = (0x9400 | (m_slot & 0xFF));
m_msp430->ReadInternalCommand(cmd, 1, readBuf); //This returns some value in readBuf
m_bitLength = readBuf[0];
m_codecBitLengthButton[readBuf[0]]->setToggleState(true, false); //Togglestate set to true on startup based on readBuf[0]


//Gets called when any of the toggle button is clicked
while(jj < 4)
{
    if(button == m_codecBitLengthButton[jj])
    {
        // add code for bit length support
        cmd = ((CODEC_LENGTH_CMD & 0x7F00) | (m_slot & 0xFF));
        sendBuf[numBytes++] = jj; // this should represent the proper number of bits
        m_bitLength = jj;
        break;
    }
    jj++;
}

How can i achieve the same thing in C#? 🙂

Answer 1

You can do that with an Command:

CodecWidgetView.xaml:

<Grid Grid.Row="1">
     <Grid.ColumnDefinitions>
           <ColumnDefinition />
           <ColumnDefinition />
           <ColumnDefinition />
           <ColumnDefinition />
     </Grid.ColumnDefinitions>
     <ToggleButton Grid.Column="0" Content="16Bit" Command="{Binding Path=ToogleButtonCommand}" CommandParameter="16"/>
     <ToggleButton Grid.Column="1" Content="20Bit" Command="{Binding Path=ToogleButtonCommand}" CommandParameter="20"/>
     <ToggleButton Grid.Column="2" Content="24Bit" Command="{Binding Path=ToogleButtonCommand}" CommandParameter="24"/>
     <ToggleButton Grid.Column="3" Content="32Bit" Command="{Binding Path=ToogleButtonCommand}" CommandParameter="32"/>
</Grid>

that will be really simpler and in an mvvm way.

the Benefits are you can specify which Parameter the CommandParameter will be. In the Sample i hardcoded it, but it can also be bind.

CodecWidgetViewModel.cs:

    RelayCommand _toogleButtonCommand;
    public ICommand ToogleButtonCommand
    {
        get
        {
            if (_toogleButtonCommand == null)
            {
                _toogleButtonCommand = new RelayCommand(this.DoSomethingExecute,
                    this.DoSomethingCanExecute);
            }
            return _toogleButtonCommand;
        }
    }

    public void DoSomethingExecute(object param)
    {
       int result = Convert.ToInt32(param);

        if (result == 16)
        {
            //To this and so on for example
        }
    }

Hope this helps.

Edit:
To define which button IsChecked at anytime bind the ToogleButtons IsChecked Property in your ViewModel and a Property for the Value of the ToogleButton.

private bool _isCheckedToogle1;
public bool IsCheckedToogle1
{
    get { return _isCheckedToogle1; }
    set
    {
        _isCheckedToogle1 = value;
        OnPropertyChanged("IsCheckedToogle1");
    }
}

private int _toogleButton1Value = 16;
public int ToogleButton1Value
{
   get { return _toogleButton1Value; }
   set
   {
      _toogleButton1Value = value;
      OnPropertyChanged("ToogleButton1Value");
   }
}

XAML:

<ToggleButton Grid.Column="0" x:Name="toogleButton1" Content="16Bit" Command="{Binding Path=ToogleButtonCommand}" IsChecked="{Binding Path=IsCheckedToogle1}" >
    <ToggleButton.CommandParameter>
        <MultiBinding Converter="{StaticResource Converter}">
             <Binding Path="ToggleButton1Value" />
             <Binding />
        </MultiBinding>
    </ToggleButton.CommandParameter>
</ToggleButton>

Because it is now a MutliBinding you need an Converter and a Class for the New Value which is the Parameter:

    public object Convert(object[] values, Type targetType, object parameter,
       System.Globalization.CultureInfo culture)
    {
        ToggleValue val = new ToggleValue();
        val.View = values[1] as CodecWidgetViewModel;
        val.Value = System.Convert.ToInt32(values[0]);
        return val;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();

    }
}

public class ToggleValue
{
    public int Value { get; set; }
    public CodecWidgetViewModel View { get; set; }
}

And your new CommandLogik

    public void DoSomethingExecute(object param)
    {
        ToggleValue result = param as ToggleValue;

        if (result.Value == 16)
        {
            result.View.IsCheckedToogle1 = true;
            result.View.IsCheckedToogle2 = false;
            result.View.IsCheckedToogle3 = false;
            result.View.IsCheckedToogle4 = false;
        }
    }