How to Stretch a Menu Control to the Width of a Window in WPF

If you’ve ever created a Menu in WPF, you’ve probably noticed something peculiar: A Menu will not stretch to fill the entire width of its parent container. If you set the Menu’s width to ‘auto’ or delete the width property altogether, the Menu will shrink to the maximum width needed by its MenuItem elements (so if you have 0 MenuItems, it will disappear completely).


	
	
	
	

A Menu in WPF only stretches to the width of its children by default.

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


	

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:

Width="{Binding ElementName=grid_Main,Path=ActualWidth}"

Which in my application looks like this:


	
		
	

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:


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.

private void menu_Main_Loaded(object sender, RoutedEventArgs e)
{
	this.menu_Main.Width = this.grid_Main.ActualWidth;
}

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:




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

private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
	this.menu_Main.Width = this.grid_Main.ActualWidth;
}

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