Iconic Menu in WPF

Question

I want to make a menu as given in picture Menu .

I am quite confuse where should i start from.

Kindly guide me with some tutorial how to make such menus

Start by looking into ItemsControl and DataTemplates. Thats all you need to accomplish that menu. — BradleyDotNET, Apr 25 '14 at 04:45
Do you need to create like this(With images), or just want grid layout? — Harshana Narangoda, Apr 25 '14 at 05:35

Gayot Fow · Answer 1 · 2014-04-25T07:42:26.703

If you want your menu to have drop downs like in this image...

enter image description here

Here is the corresponding Xaml for that item...

                    <Menu>
                        <MenuItem ItemsSource="{Binding AgeSelectors}" ItemsPanel="{StaticResource MenuItemPanelTemplate}"  ToolTip="Select which items are included/excluded in the view" Foreground="Wheat">
                            <MenuItem.Header>
                                <StackPanel>
                                    <Image Source="Resources/Images/Tango/appointment-new.png" />
                                    <TextBlock Text="Age" Foreground="Navy"/>
                                </StackPanel>
                            </MenuItem.Header>
                            <MenuItem.ItemTemplate>
                                <DataTemplate>
                                    <MenuItem IsCheckable="True" 
                                          IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                          >
                                        <MenuItem.Header>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Description}"/>
                                            </StackPanel>
                                        </MenuItem.Header>
                                    </MenuItem>
                                </DataTemplate>
                            </MenuItem.ItemTemplate>
                        </MenuItem>
                    </Menu>

It shows the "Age" button with a drop down where options can be turned on or off with a check box. The various options like "Last hour", "Last 3 hours" and so on are bound to an observable collection in the View Model. The Xaml incorporates a WPF Menu that contains menu items, and the user experiences a proper "menu behaviour".

For a Xaml fragment that has no drop down, here's how the "Refresh" item was styled...

                    <Menu>
                        <MenuItem Command="{Binding RefreshCommand}" ToolTip="Connect to the net and get news" Foreground="Wheat">
                            <MenuItem.Header>
                                <StackPanel >
                                    <Image Source="Resources/Images/Tango/view-refresh.png" />
                                    <TextBlock VerticalAlignment="Center" Text="Refresh" Foreground="Navy"/>
                                </StackPanel>
                            </MenuItem.Header>
                        </MenuItem>
                    </Menu>

Others have pointed out that the items can be arranged in a horizontal panel. In my case, I used a WPF Toolbar to contain the menu items. It provides the grips and tear-off hints that add to the menu effect.

The Toolbar declaration starts off like this...

        <Border DockPanel.Dock="Top" BorderBrush="Navy" BorderThickness="2,0,2,0">
            <ToolBarTray DockPanel.Dock="Top" Background="Transparent" HorizontalAlignment="Stretch">

The Toolbar can be styled with a gradient background (like the image), or a bitmap background. And finally, the Xaml for "MenuItemPanelTemplate" is...

                    <ItemsPanelTemplate x:Key="MenuItemPanelTemplate">
                        <StackPanel Margin="-20,0,0,0" Background="White"/>
                    </ItemsPanelTemplate>

(which I got from here)

So the ultimate choice depends upon if the items should have drop-downs and the overall effect you want to achieve.

score 0 · Answer 2 · edited May 23 '17 at 11:46

First, you will need to create a Style for the Button that will store Image, probably in the ideal Path and text. As a example, you can see my answer:

WPF C# button style

Second, you can place all the Buttons in the WrapPanel or in the ItemsControl.

Example with WrapPanel:

<WrapPanel>
    <Button Margin="5">1</Button>
    <Button Margin="5">2</Button>
    <Button Margin="5">3</Button>
    <Button Margin="5">4</Button>
    <Button Margin="5">5</Button>
</WrapPanel>

Output

enter image description here

score 0 · Answer 3 · answered Apr 25 '14 at 05:51

You can Use StacklPanels as below:

<StackPanel Orientation=Horizontal>
    <Button Margin="5">
       <StackPanel Orientation=Vertical>
           <Image source="HomeImageSourcePath"/>
           <TextBlock Text="Home"/>
       </StackPanel>
    </Button>

    <Button Margin="5">
       <StackPanel Orientation=Vertical>
           <Image source="EmployeesImageSourcePath"/>
           <TextBlock Text="Employees"/>
       </StackPanel>
    </Button>  

    ....
    ....

</StackPanel>

Iconic Menu in WPF

3 Answers3