[code lang=”xml”]
<Menu Name="menu_Main" >
<MenuItem Header="_File" />
<MenuItem Header="_Edit" />
<MenuItem Header="_Tools" />
<MenuItem Header="_Help" />
</Menu>
[/code]

This is contrary to the default behavior of a Toolbar control, which will automatically stretch to the width of its parent container.

[code lang=”xml”]
<ToolBar Name="toolbar_Main">
<Button Name="button_File" Content="File" Margin="0,0,3,0" />
<Button Name="button_Edit" Content="Edit" Margin="0,0,3,0" />
<Button Name="button_Tools" Content="Tools" Margin="0,0,3,0" />
<Button Name="button_Help" Content="Help" Margin="0,0,3,0" />
</ToolBar>
[/code]

The easiest solution I’ve found to deal with this problem is to manually bind the width of the Menu to its parent container’s width. To do this, you’ll first need to give the Menu’s parent container a name (I’m using a Grid as the parent, so I called it “grid_Main”) and then add the following code to your Menu:

[code lang=”xml”]
Width="{Binding ElementName=grid_Main,Path=ActualWidth}"
[/code]

Which in my application looks like this:

[code lang=”xml”]
<Grid Name="grid_Main">
<Menu Name="menu_Main" Width="{Binding ElementName=grid_Main,Path=ActualWidth}" >
<!– Menu Contents –>
</Menu>
</Grid>
[/code]

This will stretch your menu to the full length of its parent container, which in my case is the entire window.

If you prefer to do this programatically in C#, you can set the Menu’s width to equal the parent container’s width after the parent container has loaded (doing so before the parent container has loaded would set the Menu’s width to 0).

To do this, I created a Loaded event in my Menu in WPF:

[code lang=”xml”]
<Menu Name="menu_Main" Loaded="menu_Main_Loaded" />
[/code]

And in the event, I set the Menu’s width to the ActualWidth property of its parent container, which is the same Grid I used in the earlier example.

[code lang=”c-sharp”]
private void menu_Main_Loaded(object sender, RoutedEventArgs e)
{
this.menu_Main.Width = this.grid_Main.ActualWidth;
}
[/code]

This has the same effect as binding the element properties in WPF, but we’ve overlooked one important thing: since the width of the Menu is only set when the control is loaded, it will not change if you resize the Window after the application is running.

To deal with this, I found it easiest to create a SizeChanged event on the main Window:

[code lang=”xml”]
<Window Title="MainWindow" SizeChanged="Window_SizeChanged">
<!– Window contents –>
</Window>
[/code]

And in the SizeChanged event, once again set the width of the Menu to the width of its parent container as we did before.

[code lang=”c-sharp”]
private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
this.menu_Main.Width = this.grid_Main.ActualWidth;
}
[/code]

This will give you the same functionality as the WPF solution, although it requires some additional code.

The post How to Stretch a Menu Control to the Width of a Window in WPF first appeared on Techerator.

For example, I could create a list of colors that would display the color’s name in the select box, but would then correspond to a hexadecimal value in the background:

[code lang=”xml” title=”HTML Select Example”]

<select>

<option value="#FF0000">Red</option>
<option value="#008000">Green</option>
<option value="#0000FF">Blue</option>

</select>

[/code]

Which looks like:

If the user selected “Green”, it would show up as “#008000” behind the scenes.

This type of control is known as a ComboBox in WPF and C# and has similar functionality, but by default you can’t store Name –> Value pairs in them like you can in HTML. In this guide, I’ll show you some simple code you can use to recreate this functionality.

Creating HTML-style ComboBox in WPF and C#

For this example, I wanted to create a drop-down menu for selecting the Parity value of a serial port connection. Parity is an enumeration in C# and has values like Parity.None, Parity.Even, and Parity.Odd, but I wanted to display just “None”, “Even”, and “Odd” to the user.

The first thing I did was to create a custom class that expands the functionality of the standard ComboBoxItem. This class will store the pretty front-facing name in a string called “contents” and store the data value in an object called “tag”.

If you’re familiar with ComboBoxItems, you’ll know that they already offer Content and Tag properties. These properties don’t function the same way they do in HTML, so I found it best to create my own custom class.

[code lang=”csharp” title=”CustomComboBoxItem.cs”]

// Contains the visible "Name" of the item.
private string _contents;
public string contents { get { return _contents; } set { _contents = value; } }

// Contains the hidden "Value" of the item.
private object _tag;
public object tag { get { return _tag; } set { _tag = value; } }

public CustomComboBoxItem(string contents, object tag)
{
this._contents = contents;
this._tag = tag;
}

// Only the Name will be displayed when the string value is used
public override string ToString() { return _contents; }

[/code]

I created my ComboBox in WPF and created a Loaded event to programmatically populate the values.

[code lang=”csharp” title=”comboBox_Parity WPF”]

<ComboBox Name="comboBox_Parity" Loaded="comboBox_Parity_Loaded" />

[/code]

And then created the corresponding comboBox_Parity_Loaded function in my C#  file where I added the CustomComboBoxItem items to the ComboBox. You can see that the first value I give it is its front-facing name, and the second is the value of the Parity enumeration.

[code lang=”csharp” title=”comboBox_Parity_Loaded”]

private void comboBox_Parity_Loaded(object sender, RoutedEventArgs e)
{
// Add the options with my custom class CustomComboBoxItem. This allows me to store a unique "Name"=content and "Value"=tag for each item
comboBox_Parity.Items.Add(new CustomComboBoxItem("None", "Parity.None"));
comboBox_Parity.Items.Add(new CustomComboBoxItem("Even", "Parity.Even"));
comboBox_Parity.Items.Add(new CustomComboBoxItem("Odd", "Parity.Odd"));
comboBox_Parity.Items.Add(new CustomComboBoxItem("Mark", "Parity.Mark"));
comboBox_Parity.Items.Add(new CustomComboBoxItem("Space", "Parity.Space"));
}

[/code]

Compiling and executing this program shows my ComboBox filled with items called “None”, “Even”, and “Odd”, but its selected value now corresponds with “Parity.None”, “Parity.Even”, and “Parity.Odd”.

To access the back-end value of the user’s selection in your code (I was using it to change a hardware setting), you need to cast the SelectedItem property of the ComboBox as a CustomComboBoxItem.

[code lang=”csharp”]
// This takes whatever item is selected in the comboBox and stores it in a new item called item_Parity. This gives you access
// to the properties of the CustomComboBoxItem like .tag and .content.

CustomComboBoxItem item_Parity = (CustomComboBoxItem)this.comboBox_Parity.SelectedItem;

[/code]

To test it out, you can use the following code to write the item’s name and corresponding value to the console.

[code lang=”csharp” title=”Accessing internal values of CustomComboBoxItem”]

Console.WriteLine("Item’s name is: " + item_Parity.contents + " and Item’s value is: " + item_Parity.tag.ToString());

[/code]

That’s it! You should now have HTML-style ComboBoxes in WPF and C#.

The post How to Create a HTML-style ComboBox in WPF and C# first appeared on Techerator.