Menu Control for Universal Apps

Though having a menu bar in a Windows store app is something unusual (and maybe against the design guidelines), I thought it would be useful for some specific apps. Also it will come handy in Windows 10 as the apps can work now in separate windows (instead of full screen) like normal WPF application.

How it looks?

So this is how the control will render on a Windows Store,

image

 

And as this control is a universal one, it will also work on a Windows Phone project (Though I would highly recommend you to NOT use this control on the phone, unless you have a really good reason to):

image

The Xaml code for the above:

<menu:Menu>
    <menu:MenuItem Text="File">
        <menu:MenuItem Text="New">
            <menu:MenuItem.Icon>
                <TextBlock Text="&#xE1DA;" FontFamily="Segoe UI Symbol" />
            </menu:MenuItem.Icon>
            <menu:MenuItem Text="Project" >
                <menu:MenuItem.Icon>
                    <TextBlock Text="&#xE132;" FontFamily="Segoe UI Symbol" />
                </menu:MenuItem.Icon>
                <menu:MenuItem Text="Windows Store" />
                <menu:MenuItem Text="Windows Phone" />
                <menu:MenuItem Text="Universal Apps" />
            </menu:MenuItem>
            <menu:MenuItem Text="Web site">
                <menu:MenuItem.Icon>
                    <TextBlock Text="&#xE12B;" FontFamily="Segoe UI Symbol" />
                </menu:MenuItem.Icon>
            </menu:MenuItem>
            <menu:Separator />
            <menu:MenuItem Text="Team project" />
        </menu:MenuItem>
        <menu:MenuItem Text="Open" >
            <menu:MenuItem Text="test" />
        </menu:MenuItem>
        <menu:Separator />
        <menu:MenuItem Text="Save" IsEnabled="True" >
            <menu:MenuItem.Icon>
                <TextBlock Text="&#xE105;" FontFamily="Segoe UI Symbol" />
            </menu:MenuItem.Icon>
        </menu:MenuItem>
        <menu:Separator />
        <menu:MenuItem Text="Exit" />
    </menu:MenuItem>
    <menu:MenuItem Text="Edit">
        <menu:MenuItem Text="Cut" />
        <menu:MenuItem Text="Copy" />
        <menu:MenuItem Text="Paste" />
        <menu:MenuItem Text="Delete" />
    </menu:MenuItem>
    <menu:MenuItem Text="View" />
</menu:Menu>

 

Using Icons

In case you want to add an icon to a menu item, you will need to provide a TextBlock with the correct icon code. To get the correct code you can use the Character Map:

image

 

Background, Foreground & Highlighted Colors

You can also change the colors by applying implicit styles:

<Page.Resources>
    <Style TargetType="menu:MenuItem">
        <Setter Property="Background"  Value="#ff2D2D30" />
        <Setter Property="Foreground" Value="White"  />
        <Setter Property="HighlightedBackground" Value="#ff444444" />
        <Setter Property="HighlightedForeground" Value="White" />
    </Style>
</Page.Resources>

image

 

Commands & Click event

Finally to respond to a click event you can either wire up a click event handler in the code behind, or bind an ICommand to the Command property:

<menu:MenuItem Text="Windows Store" Click="MenuItem_Click" />
<menu:MenuItem Text="Windows Phone" Command="{Binding WindowsPhoneCommand}" CommandParameter="{Binding SomeParameterProperty}" />

You can find the control by searching for “Menu” on Nuget, or by typing the following command in the Nuget console:

Install-Package Menu

You’re free to use this control for any free or commercial project

Please reach me for any feature request (or bugs report) on Twitter @TareqAteik

Tareq Ateik

Read more posts by this author.