Generate Labels Dynamically On clicking Dynamically generated RadioButton in WPF

Question

I am a C++ developer and recently moved to wpf. I seem to have across a tricky situation where I have to dynamically generate labels based on radiobutton click. Here I will show you how I have generated 4 radio buttons first.

XAML:

<Grid Grid.Row="0">           

        <ItemsControl ItemsSource="{Binding Children}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical"
                    IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <RadioButton Content="{Binding RadioBase}" Margin="0,10,0,0" IsChecked="{Binding BaseCheck}" Height="15" Width="80" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>          

    </Grid>

<Grid Grid.Row="1">
    <Label Content="{Binding name}" HorizontalAlignment="Center" VerticalAlignment="Center" />      
</Grid>

ViewModel:

private bool sBaseCheck;
    public bool BaseCheck
    {
        get { return this.sBaseCheck; }
        set
        {
            this.sBaseCheck = value;                
            this.OnPropertyChanged("BaseCheck");
        }
    }

    private int _ID;
    public int ID
    {
        get
        {
            return _ID;
        }

        set
        {
            _ID = value;
            OnPropertyChanged("ID");
        }
    }

    private string _NAme;
    public string name
    {
        get
        {
            return _NAme;
        }

        set
        {
            _NAme= value;
            OnPropertyChanged("name");
        }
    }

    private string _RadioBase;
    public string RadioBase
    {
        get
        {
            return _RadioBase;
        }

        set
        {
            _RadioBase = value;
            OnPropertyChanged("RadioBase");
        }
    }

AnotherViewModel Class:

public ObservableCollection<FPGAViewModel> Children { get; set; }

    public FPGARadioWidgetViewModel()
    {
        Children = new ObservableCollection<FPGAViewModel>();
        Children.Add(new FPGAViewModel() { RadioBase = "Base 0x0", ID = 0 });
        Children.Add(new FPGAViewModel() { RadioBase = "Base 0x40", ID = 1 });
        Children.Add(new FPGAViewModel() { RadioBase = "Base 0x80", ID = 2 });
        Children.Add(new FPGAViewModel() { RadioBase = "Base 0xc0", ID = 3 });            
    }

This gives me 4 radiobuttons with Content as given above. Now I want to generate 8 labels on each radiobutton click. I had done this in my C++ app as follows:

for(i = 0; i < 0x40 / 8; i++)
{
    reg = (i * 8);
    m_registerLabel[i] = new Label(String::empty, String("Reg 0x") + String::toHexString(reg));
    addAndMakeVisible(m_registerLabel[i]);
}

if you notice, it will create 8 labels with value as Reg 0x0, Reg 0x8, Reg 0x10, Reg 0x18 etc since reg is converted to hexstring. I want to generate something like this when I click Base 0x0 on startup.

How can i achieve this in my app???

I think this link [Programmatically Add Controls to WPF Form][1] [1]: http://stackoverflow.com/questions/2814866/programmatically-add-controls-to-wpf-form will help you.. — Rahul Ranjan, Oct 25 '12 at 11:14

WPF-it · Answer 1 · 2012-10-29T05:57:24.960

In your this.sBaseCheck setter you can do this code.

private bool sBaseCheck;
public bool BaseCheck
{
    get { return this.sBaseCheck; }
    set
    {
        this.sBaseCheck = value;                
        Generatelabels(this)
        this.OnPropertyChanged("BaseCheck");
    }
}

Add 2 new properties...

  private string[] registerLabels = new string[8];
  public string[] RegisterLabels { get { return registerLabels; } }

  private bool isRegisterItemsVisible = false;
  public bool IsRegisterItemsVisible { 
       get { return isRegisterItemsVisible ; }
       set { 
           isRegisterItemsVisible = value; 
           OnPropertyChanged("IsRegisterItemsVisible"); 
           OnPropertyChanged("RegisterLabels"); 
       }
  }

Populate these values...

private static void Generatelabels(FPGAViewModel currentItem)
{
  for(i = 0; i < 0x40 / 8; i++)
  {
       reg = (i * 8);
       currentItem.RegisterLabels[i] = "Reg 0x" + String::toHexString(reg);
       currentItem.IsRegisterItemsVisible = true;
   }
}

On your GUI, bind them with another ItemsControl within ItemTemplate of the existing ItemsControl.

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <RadioButton 
                       Content="{Binding RadioBase}"
                       Margin="0,10,0,0"
                       IsChecked="{Binding BaseCheck}" 
                       Height="15" Width="80" 
                       HorizontalAlignment="Center" 
                       VerticalAlignment="Center"/>
                    <ItemsControl 
                           Visibility="{Binding IsRegisterItemsVisible,
                                Converter={StaticResource BoolToVisibilityConv}}" 
                           ItemsSource="{Binding RegisterLabels}">   
                       <ItemsControl.ItemTemplate>
                          <DataTemplate>
                             <TextBlock Text="{Binding}"/>
                           </DataTemplate>
                       </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

Thanks for the reply. It throws error at `currentItem.RegisterLabel[i] = String("Reg 0x") + String::toHexString(reg);` as `ViewModel doesnt contain definition for RegisterLabel.` And at `String` as `string is a type but is used like a variable.` — StonedJesus, Oct 29 '12 at 04:27
Updated. Plz assume this as psedocode as I am not a C++ developer. — WPF-it, Oct 29 '12 at 05:58
Thanks bro..... I removed all errors but the application is crashing and it throws the following: `Provide value on 'System.Windows.Markup.StaticResourceHolder' threw an exception.`. I am guessing something is wrong with xaml — StonedJesus, Oct 29 '12 at 06:02
Hey Hi, `BoolToVisibilityConv` is a WPF `IValueConverter` implementation to convert Boolean to Visibility. did you write that? — WPF-it, Oct 29 '12 at 08:21
I used it and it works well but there is a bug. If i click the 1st radio button, the bottom 3 buttons are invisible and if I click 2nd radio button then last 2 buttons are invisible and so on. — StonedJesus, Oct 29 '12 at 08:32
If you notice my question, you will find `label` in `Grid.Row="1"` This is the grid where i want to display the labels which your code is generated and not inside the `Grid.Row="0"`. Since you are textbox its fine :) But displaying them in `Grid.Row="1"` would be ideal :) — StonedJesus, Oct 29 '12 at 08:39

Generate Labels Dynamically On clicking Dynamically generated RadioButton in WPF

1 Answers1