2 questions in HamburgerMenu

[SID9-HoneyBee]

We are developing WPF through MahApps.Metro.

I’m practicing by looking at the HamburgerMenu example
I have 2 questions.

First of all, I made some modifications while imitating the example.

However, in the design preview, as in the example, the HamburgerMenu does not appear, only the main screen.

"Exception: ButtonsListView is not defined yet. Please use ItemsSource instead"

Second, I want to implement a button click event, not calling Page when each button item is clicked.
Do I have to use "HamburgerMenuGlyphItem.Tag"?

---

<Mah:MetroWindow x:Class="Podo.Net.Pages.Window1"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:local="clr-namespace:Podo.Net.Pages"
                 xmlns:Common="clr-namespace:Podo.Net.Common"
                 xmlns:Mah="http://metro.mahapps.com/winfx/xaml/controls"
                 xmlns:Pages="clr-namespace:Podo.Net.Pages"
                 mc:Ignorable="d"
                 Title="Window1" Height="450" Width="800">
    <Grid>

        <Grid.Resources>
            <Common:SelectedItemToContentConverter x:Key="SelectedItemToContentConverter"/>
            
            <DataTemplate x:Key="MenuItemTemplate"
                          DataType="{x:Type Mah:HamburgerMenuGlyphItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0"
                               FontSize="16"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontFamily="Segoe MDL2 Assets"
                               Text="{Binding Glyph}" />
                    <TextBlock Grid.Column="1"
                               VerticalAlignment="Center"
                               FontSize="16"
                               Text="{Binding Label}" />
                </Grid>
            </DataTemplate>

            <DataTemplate x:Key="OptionsMenuItemTemplate"
                          DataType="{x:Type Mah:HamburgerMenuGlyphItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0"
                               FontSize="16"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               FontFamily="Segoe MDL2 Assets"
                               Text="{Binding Glyph}" />
                    <TextBlock Grid.Column="1"
                               VerticalAlignment="Center"
                               FontSize="16"
                               Text="{Binding Label}" />
                </Grid>
            </DataTemplate>

        </Grid.Resources>

        <Mah:HamburgerMenu x:Name="HamburgerMenuControl"
                                IsPaneOpen="False"
                                ItemTemplate="{StaticResource MenuItemTemplate}"
                                OptionsItemTemplate="{StaticResource OptionsMenuItemTemplate}"
                                DisplayMode="CompactInline">

            <Mah:HamburgerMenu.Content>
                <MultiBinding Converter="{StaticResource SelectedItemToContentConverter}">
                    <Binding RelativeSource="{RelativeSource Self}"
                             Mode="OneWay"
                             Path="SelectedItem" />
                    <Binding RelativeSource="{RelativeSource Self}"
                             Mode="OneWay"
                             Path="SelectedOptionsItem" />
                </MultiBinding>
            </Mah:HamburgerMenu.Content>

            <!--  Items  -->
            <Mah:HamburgerMenu.ItemsSource>
                <Mah:HamburgerMenuItemCollection>
                    <Mah:HamburgerMenuGlyphItem Glyph="" Label="Home" >
                        <Mah:HamburgerMenuGlyphItem.Tag>
                            <Pages:ClassRoomOffLine></Pages:ClassRoomOffLine>
                        </Mah:HamburgerMenuGlyphItem.Tag>
                    </Mah:HamburgerMenuGlyphItem>

                    <!--<Mah:HamburgerMenuGlyphItem Glyph="" Label="Private" />

                    <Mah:HamburgerMenuGlyphItem Glyph="" Label="Settings" />-->

                </Mah:HamburgerMenuItemCollection>
            </Mah:HamburgerMenu.ItemsSource>

            <!--  Options  --><!--
            <Mah:HamburgerMenu.OptionsItemsSource>
                <Mah:HamburgerMenuItemCollection>
                    <Mah:HamburgerMenuGlyphItem Glyph="" Label="About" />
                </Mah:HamburgerMenuItemCollection>
            </Mah:HamburgerMenu.OptionsItemsSource>-->

            <!--  Content  -->
            <Mah:HamburgerMenu.ContentTemplate>
                <DataTemplate DataType="{x:Type Mah:HamburgerMenuItem}">
                    <Grid x:Name="TheContentGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="48" />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Border Grid.Row="0"
                                Background="#FF444444">
                            <TextBlock x:Name="Header"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       FontSize="24"
                                       Foreground="White"
                                       Text="{Binding Label}" />
                        </Border>
                        <ContentControl x:Name="TheContent"
                                        Grid.Row="1"
                                        Focusable="False"
                                        Content="{Binding Tag}" />
                    </Grid>
                </DataTemplate>
            </Mah:HamburgerMenu.ContentTemplate>

        </Mah:HamburgerMenu>

    </Grid>
</Mah:MetroWindow>

In addition, I have 2 Pages that need to use HamburgerMenu in common.
so
I want to use HamburgerMenu with common functions by re-creating it as UserControl.

Is it possible?

[timunie]

Hi @SID9-HoneyBee

let me try to answer your questions.

1. However, in the design preview, as in the example, the HamburgerMenu does not appear, only the main screen.

   The WPF-Designer is buggy and we cannot solve this in MahApps. So if your App runs, everything is fine. You can try to delete the bin and obj folders and rebuild your app. sometimes this helps.

2. Second, I want to implement a button click event, not calling Page when each button item is clicked.

   You can use either use the ItemInvoked or ItemClick event to handle this event. Set args.Handled=true to cancel the selection. I have a sample here: https://github.com/timunie/MahApps.Metro.Examples/tree/master/src/MahApps.Metro.Examples/HamburgerMenuCompositeExample

3. I want to use HamburgerMenu with common functions by re-creating it as UserControl.

   You can do this by using DataTemplates. Also shown in the above examples

Happy coding
Tim

[SID9-HoneyBee]

@timunie
args.Handled=true;

click on the same item multiple times by setting.

This is an additional question.

Is there any way to keep the style of the selection and do a double click?

[timunie]

@SID9-HoneyBee to be honest I don't get the question. Could you please show me a pircture of the result you expect and a detailed description what the user should do?

[timunie]

@SID9-HoneyBee I read your first post. Now I am more confused. Are you talking about DoubleClick (which is clicking two times in a short period) or about clicking the current item again?

[SID9-HoneyBee]

Sorry if my explanation wasn't enough.

I don't use the buttons on the hamburger menu for navigation.

I want to implement a toggle form that allows you to show/hide a pop-up window when you click a button.

All menus in the hamburger menu can be independent or interlinked.

so I
You can press a specific button on the hamburger menu more than once,
When you press this button
This button should be able to be On/Off like a toggle button.

To do that
When the button is clicked, the selection state needs to be maintained. (Style)

[timunie]

@SID9-HoneyBee if this is your goal then HamburgerMenu is not the right control for you. It is like using a hammer wo get a screw into the wall.

You will need to find a different solutiion (i.e. you may use a StackPanel with some ToggleButtons inside.

Happy coding
Tim

[ccsdk]

I deleted the users ... AppData/Local/"ProjectName" folder and reran the application.