Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The HamburgerMenu control uses the HamburgerMenuListBox control to show the menu items. You can use a DataTemplate with an Expander control with an HamburgerMenuListBox control as the Child to show submenu items: #4459

Open
montanarispark opened this issue Jan 23, 2024 · 0 comments

Comments

@montanarispark
Copy link

montanarispark commented Jan 23, 2024

          The HamburgerMenu control uses the HamburgerMenuListBox control to show the menu items. You can use a DataTemplate with an Expander control with an HamburgerMenuListBox control  as the Child to show submenu items:

            <DataTemplate DataType="{x:Type mah:HamburgerMenuIconItem}">
                <Expander x:Name="ExpanderPart"
                          HorizontalAlignment="Stretch"
                          HorizontalContentAlignment="Stretch"
                          BorderThickness="0"
                          FlowDirection="RightToLeft"
                          mah:HeaderedControlHelper.HeaderBackground="Transparent"
                          mah:HeaderedControlHelper.HeaderForeground="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:HamburgerMenu}}, Path=PaneForeground}"
                >
                    <Expander.Header>
                        <DockPanel Height="48" LastChildFill="True" Background="Transparent"
                                   FlowDirection="LeftToRight">
                            <ContentControl x:Name="IconPart"
                                            Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:HamburgerMenu}}, Path=CompactPaneLength}"
                                            Content="{Binding Icon}"
                                            DockPanel.Dock="Left"
                                            Focusable="False"
                                            IsTabStop="False">
                            </ContentControl>
                            <TextBlock VerticalAlignment="Center"
                                       FontSize="16"
                                       Text="{Binding Label}" />
                        </DockPanel>
                    </Expander.Header>
                    <mah:HamburgerMenuListBox ItemsSource="{Binding Tag}"
                                                   Margin="0,0,10,0"
                                                   FlowDirection="LeftToRight"
                                                   HorizontalAlignment="Stretch"
                                                   Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type mah:HamburgerMenu}}, Path=PaneForeground}"
                                                   IsTextSearchEnabled="True"
                                                   ItemContainerStyleSelector="{StaticResource HamburgerMenuItemStyleSelector}"
                                                   ItemTemplateSelector="{DynamicResource MenuItemTemplateSelector}"
                                                   SelectionMode="Single"
                    />
                </Expander>
            </DataTemplate>

You can then insert the submenu items in the tag property:

        <mah:HamburgerMenu.ItemsSource>
            <mah:HamburgerMenuItemCollection>
                <mah:HamburgerMenuIconItem Label="Account">
                    <mah:HamburgerMenuIconItem.Icon>
                        <iconPacks:PackIconMaterial Width="22"
                                                    Height="22"
                                                    HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"
                                                    Kind="Account"/>
                    </mah:HamburgerMenuIconItem.Icon>
                    <mah:HamburgerMenuIconItem.Tag>
                        <mah:HamburgerMenuItemCollection>
                            <mah:HamburgerMenuIconItem Label="Add">
                                <mah:HamburgerMenuIconItem.Icon>
                                    <iconPacks:PackIconMaterial Width="22"
                                                                Height="22"
                                                                HorizontalAlignment="Center"
                                                                VerticalAlignment="Center"
                                                                Kind="AccountPlus"/>
                                </mah:HamburgerMenuIconItem.Icon>
                            </mah:HamburgerMenuIconItem>
                            <mah:HamburgerMenuIconItem Label="Edit">
                                <mah:HamburgerMenuIconItem.Icon>
                                    <iconPacks:PackIconMaterial Width="22"
                                                                Height="22"
                                                                HorizontalAlignment="Center"
                                                                VerticalAlignment="Center"
                                                                Kind="AccountEdit"/>
                                </mah:HamburgerMenuIconItem.Icon>
                            </mah:HamburgerMenuIconItem>
                        </mah:HamburgerMenuItemCollection>
                    </mah:HamburgerMenuIconItem.Tag>
                </mah:HamburgerMenuIconItem>
            </mah:HamburgerMenuItemCollection>
        </mah:HamburgerMenu.ItemsSource>

This is what the result looks like:

image

Originally posted by @derSteff18 in #3018 (comment)

I add subItems to the inner HamburgerMenuItemCollection dynamically from code behind. I set the Command for the sub-menu, but it isn't fired if I click the sub-menu. This is my code:

public partial class MainUC : UserControl
{
    public MainUC()
    {
        InitializeComponent();
    }
    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
        LoadPersonalizedTrend();
    }

.
.
.

    private void LoadPersonalizedTrend()
    {
        mnuTrendCollection.Clear();
        HamburgerMenuGlyphItemForTrend mnu = new HamburgerMenuGlyphItemForTrend();
        mnu.IsPersonalizedTrend = true;
        mnu.Label = "Test 1";
        mnu.Glyph = "ChartMultiple";
        mnu.Command = new DelegateCommand(Execute);
        mnuTrendCollection.Add(mnu);
    }

    private void Execute(object o)
    {
        MessageBox.Show("Hello");
    }

}

public class DelegateCommand : ICommand
{
    private readonly Func<object, bool> _canExecute;
    private readonly Action<object> _execute;

    public DelegateCommand(Action<object> execute) : this(execute, s => true)
    {
    }

    public DelegateCommand(Action<object> execute, Func<object, bool> canExecute)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    public event EventHandler CanExecuteChanged;
}

If I do the same with a first level menu item it works. Itried also to use the ItemClick event, but it doesn't work for the subitems.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant