Need some ideas on how to generate combo boxes dynamically (wpf) - wpf

Question

To start off, I have this XML file that contains recursive parent-child elements. Here is how the XML looks:
<VARS>
<VAR>
<id>var_starting_point</id>
<name>Starting Point</name>
<values>
<value>
<id>http://Environment1URL.com</id>
<name>Enviornment 1</name>
<sub_vars>
<VAR>
<id>var_env1_data</id>
<name>Env1 Data</name>
<values>
<value>
<name>Data1</name>
<sub_var>
<VAR>
<id>var_db</id>
<name>DB</name>
<values>
<values>place-holder 1</values>
</values>
</VAR>
</sub_var>
</value>
<value>
<name>Data2</name>
<sub_var>
<VAR>
<id>var_db</id>
<name>DB</name>
<values>
<values>place-holder 2</values>
</values>
</VAR>
</sub_var>
</value>
</values>
</VAR>
</sub_vars>
</value>
<value>
<id>http://Environment2URL.com</id>
<name>Enviornment 2</name>
<sub_vars>
<VAR>
<id>var_env2_data</id>
<name>Env2 Data</name>
<values>
<value>
<name>Data1</name>
<sub_var>
<VAR>
<id>var_db</id>
<name>DB</name>
<values>
<values>place-holder 1</values>
</values>
</VAR>
</sub_var>
</value>
<value>
<name>Data2</name>
<sub_var>
<VAR>
<id>var_db</id>
<name>DB</name>
<values>
<values>place-holder 2</values>
</values>
</VAR>
</sub_var>
</value>
</values>
</VAR>
</sub_vars>
</value>
</values>
</VAR>
<VAR>
<id>var_version_data1</id>
<name>Data1 Version</name>
<values>
<value>
<name>1.1.1</name>
</value>
</values>
</VAR>
<VAR>
<id>var_version_data2</id>
<name>Data2 Version</name>
<values>
<value>
<name>2.2.2</name>
</value>
</values>
</VAR>
</VARS>
I have a VARS element which contain 1 or more VAR element which has an id, name and
values array which contain 1 or more value elements.
The sub_var and id elements of the value element is optional, the name
element is not. The sub_var contains the exact same stuff as VARS
and so on.
Now I want to generate child combo boxes based on what was choosen in the
parent comboBox.
For example, if the user chooses "Enviornment 1" from the
Starting Point comboBox, than an Env1 Data combo box should spawn with
the Env1 values. Then if the user chooses "Data1", then the DB combo box
should be populated with "place-holder 1".
I've been working on this for hours and I'm not getting anywhere. I was able to get
1 layer working non recursivley, however multiple nested elements have been giving me a headache.
The way I do it now is, save the selected item to a temp variable, then on my selection changed event handler I clear my stack panel and recreate all the combo boxes based on what was selected last. However this does not seem to be working properly with multiple nested elements.
I'm just looking for ideas and how you would approach this problem.

Answer 1

First, I would deserialize your structure into a class that looked like this:
class XmlVar
{
public List<XmlVar> Children { get; set; }
public string ID { get; set; }
public string Name { get; set; }
}
Once you did this, you can add a method to XmlVar to create your ComboBox for that node. Something like this:
public ComboBox MakeNodeCombo()
{
ComboBox retval = new ComboBox();
if (Children != null)
{
foreach (XmlVar child in Children)
{
ComboBoxItem nextItem = new ComboBoxItem;
nextItem.Content = Name;
nextItem.Tag = child; // So we have an easy time choosing the child
retval.Add(nextItem);
}
}
return retval;
}
When you get a SelectedItem event, get the corresponding ComboBoxItem. It's Content is the Name, and its Tag is the child XmlVar node that you now want to target.

Answer 2

I would probably deserialize this to proper C# classes, that way you can define HierarchicalDataTemplates which can be implicitly applied via the DataType property. Then you should just need to create one such template and a root ContentControl or ItemsControl to which you can bind your root and it should generate everything as needed.