MahApps / MahApps.Metro

A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.
https://mahapps.com
MIT License
9.28k stars 2.45k forks source link

Is it possible to put a ToggleSwitch in HamburgerMenu as an item ? #3459

Closed GF-Huang closed 5 years ago

GF-Huang commented 5 years ago

Like this

image

Nuklon commented 5 years ago

I don't think so, not really out of the box I think. A few more options in HamburgerMenu would be greatly appreciated, such as the ability to add the "badge" as well (to right side for example), can be used to show a number for example.

punker76 commented 5 years ago

@GreatFireWall Yes, this is possible. Here is a simple sample to show a ToggleSwitch on a option item:

You can use the HamburgerMenuIconItem to show an icon and a custom content.

<Controls:HamburgerMenu.OptionsItemsSource>
    <Controls:HamburgerMenuItemCollection>
        <Controls:HamburgerMenuIconItem>
            <Controls:HamburgerMenuIconItem.Icon>
                <iconPacks:PackIconMaterial Width="22"
                                            Height="22"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center"
                                            Kind="Switch" />
            </Controls:HamburgerMenuIconItem.Icon>
            <Controls:HamburgerMenuIconItem.Tag>
                <Controls:ToggleSwitch Header="A Switch" Foreground="{DynamicResource MahApps.Metro.HamburgerMenu.PaneForegroundBrush}" />
            </Controls:HamburgerMenuIconItem.Tag>
        </Controls:HamburgerMenuIconItem>
    </Controls:HamburgerMenuItemCollection>
</Controls:HamburgerMenu.OptionsItemsSource>

Here is the DataTemplate for the specific view of the HamburgerMenuIconItem.

<!--  This is the template for all option menu items.  -->
<DataTemplate x:Key="HamburgerOptionsMenuItem" DataType="{x:Type Controls:HamburgerMenuIconItem}">
    <DockPanel Height="48" LastChildFill="True">
        <ContentControl x:Name="IconPart"
                        Width="48"
                        Content="{Binding Icon}"
                        DockPanel.Dock="Left"
                        Focusable="False"
                        IsTabStop="False" />
        <ContentControl Content="{Binding Tag}"
                        Focusable="False"
                        IsTabStop="False" />
    </DockPanel>
</DataTemplate>

2019-04-17_15h37_57

GF-Huang commented 5 years ago

@punker76 Thanks your sample, it's great. But is it possible place the switch at left side instead of the icon even the HamburgerMenu is Not open ?

image

punker76 commented 5 years ago

@GreatFireWall simply change the DataTemplate.

GF-Huang commented 5 years ago

@punker76 But it will cause a new page, I only want to put a switch here without page. Is it possible ?