Question

I am working on a WPF application where I need to dynamically generate 2 group boxes which have a radio button, textbox and a combobox inside. Well I have come across a tricky situation where values needs to be different in both groupboxes.

I have two xaml files PCM2PDMView.xaml and PCM2PDMWidgetView.xaml & the viewmodel classes.

PCM2PDMView.xaml:

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

<Grid Style="{DynamicResource styleBackground}" >
    <ItemsControl ItemTemplate="{StaticResource PCM2PDMDataTemplate}" ItemsSource="{Binding PCM2PDMWidgets}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

PCM2PDMWidgetView.xaml:

<Grid>
    <GroupBox Height="Auto" HorizontalAlignment="Stretch" Margin="5" Name="groupBox1" VerticalAlignment="Stretch" Width="Auto">
        <Grid>             
            <Grid Grid.Row="1">                   
                <RadioButton Grid.Column="1" Content="Port B" Command="{Binding PortCommand}" IsChecked="{Binding PortCheck}" Height="20" Width="60" HorizontalAlignment="Center" Margin="0,0,0,0" Name="PCM2PDMEnableRadioBtn" VerticalAlignment="Center" />                    
            </Grid>

            <Grid Grid.Row="2">                  

                <ComboBox Grid.Column="1" Height="20" ItemsSource="{Binding PortModeList}" SelectedItem="{Binding SelectedPortModeList, Mode=OneWayToSource}" SelectedIndex="0" HorizontalAlignment="Center" Margin="0,0,0,0" Name="PortModeCombo" VerticalAlignment="Center" Width="110" />
            </Grid>

            <Grid Grid.Row="3">                    
                <ToggleButton Grid.Column="0" Content="Soft Reset" Height="25" Width="105" HorizontalAlignment="Center" Margin="0,0,0,0" Name="SoftResetRadioBtn" VerticalAlignment="Center" />
                <ToggleButton Grid.Column="1" Command="{Binding PCM2PDMEnableCommand}" IsChecked="{Binding PCM2PDMCheck}" Content="PCM2PDM Enable" Height="25" Width="110" HorizontalAlignment="Center" Margin="0,0,0,0" Name="PCM2PDMRadioBtn" VerticalAlignment="Center" />
            </Grid> 

            <Grid Grid.Row="4">                 
                <TextBox Height="25" IsReadOnly="True" Text="{Binding MemAddPoint}" Margin="0" Name="SetRead" />               
            </Grid>
       </Grid>
   </GroupBox>
</Grid>

PCM2PDmViewModel.cs:

public ObservableCollection<PCM2PDMWidgetViewModel> PCM2PDMWidgets { get; set; }

    public PCM2PDMViewModel()
    {
        PCM2PDMWidgets = new ObservableCollection<PCM2PDMWidgetViewModel>();
        PCM2PDMWidgets.Add(new PCM2PDMWidgetViewModel { Description = "PCM2PDM 0", ID = 0 });
        PCM2PDMWidgets.Add(new PCM2PDMWidgetViewModel { Description = "PCM2PDM 1", ID = 1 });            
    }

This generates 2 groupboxes with associated UI controls inside.

PCM2PDMWidgetViewModel.cs:

public ObservableCollection<string> _PortModeList = _PortModeList = new ObservableCollection<string>();
_PortModeList.Add("Normal"); //Adding in Constructor
_PortModeList.Add("Mode 1 - PCM + PDM");
_PortModeList.Add("Mode 2 - PDM only");

public ObservableCollection<string> PortModeList
    {
        get { return _PortModeList; }
        set
        {
            _PortModeList = value;
            OnPropertyChanged("PortModeList");
        }
    }

    private string _selectedPortModeList;
    public string SelectedPortModeList
    {
        get { return _selectedPortModeList; }
        set
        {
            _selectedPortModeList = value;                
            OnPropertyChanged("SelectedPortModeList");
        }
    }

    public string Description {get; set;}      

    public int ID {get; set;}

    public string MemAddPoint {get; set;}

Requirement:

1. Now if you notice Grid.Row=1 you will find a radiobutton titled Port B, Well my requirement is to have Port B in my 1st groupbox and Port C in my second groupbox. The functionality(buttonclick method) will be common for both but the name must be different. How can we achieve that?

2. In my combobox I am adding 3 items. Here I want to add Normal and Mode 1 - PCM + PDM in combobox present in 1st groupbox and add Normal, Mode 1 - PCM + PDM and Mode 2 - PDM Only in combobox present in 2nd groupbox. How can that be achieved? 🙂

3. If you notice Grid.Row=3 you will find PCM2PDMEnable togglebutton. I want to have this togglebutton visible in my 2nd groupbox and not in my first groupbox. How can I do that?

4. Textbox in Grid.Row=4 has a textbox whose value is (e.g. 0x5). I need to set the text of this textbox as 0x5 in Groupbox 1 and 0x7 in Textbox of Groupbox2. How to do that?

Please Help 🙂

Answer 1

Create a property in your “PCM2PDMWidgetViewModel” say “RadioButtonName” and while creating “PCM2PDMWidgetViewModel” instance set the property to the name you want.. something like this

PCM2PDMWidgets.Add(new PCM2PDMWidgetViewModel { Description = "PCM2PDM 0", ID = 0, RadioButtonName = "Port B" });
        PCM2PDMWidgets.Add(new PCM2PDMWidgetViewModel { Description = "PCM2PDM 1", ID = 1, RadioButtonName = "Port C" });            

In PCM2PDMWidgetView XAML:

Change the radio button content to binding “Content=”{Binding RadioButtonName}””

<Grid Grid.Row="1">                   
                <RadioButton Grid.Column="1" Content="{Binding RadioButtonName}" Command="{Binding PortCommand}" IsChecked="{Binding PortCheck}" Height="20" Width="60" HorizontalAlignment="Center" Margin="0,0,0,0" Name="PCM2PDMEnableRadioBtn" VerticalAlignment="Center" />   


        </Grid>

Instead of adding following elements in the constructor.. send them as a List as parameter to the constructor..

Your Code

_PortModeList.Add(“Normal”); //Adding in Constructor
_PortModeList.Add(“Mode 1 – PCM + PDM”);
_PortModeList.Add(“Mode 2 – PDM only”);

Solution for 2

public PCM2PDMWidgetViewModel(List comboBoxItems)
{
foreach(item in comboBoxItems)
{
_PortModeList.Add(item);
}
}

While creating “PCM2PDMWidgetViewModel” instance send the List as constructor parameter (look at the following code)

PCM2PDMWidgets.Add(new PCM2PDMWidgetViewModel (new List<string>{"Normal","Mode 1 - PCM + PDM"}) { Description = "PCM2PDM 0", ID = 0, RadioButtonName = "Port B" });
        PCM2PDMWidgets.Add(new PCM2PDMWidgetViewModel(new List<string>{"Normal","Mode 1 - PCM + PDM","Mode 2"}) { Description = "PCM2PDM 1", ID = 1, RadioButtonName = "Port C" });  

For 4

you can fix this in the same way as radion button name..

set value for the “MemAddPoint” property in the same way you did for Description and ID. As this property is already binded to the textbox you don’t need to change xaml bindings

For 3:

You have to create a new property in “PCM2PDMWidgetViewModel” of type “Visibility” and bind it to the togglebutton visibility property. set the property value while creating instance