是否有与 UWP 的 SplitView Hamburger Menu 等效的 WPF？

Posted 2023-03-25

【中文标题】是否有与 UWP 的 SplitView Hamburger Menu 等效的 WPF？

【英文标题】：Is there a WPF-equivalent to UWP's SplitView Hamburger Menu?

【发布时间】：2016-01-11 06:49:21

【问题描述】：

通用 Windows 平台中的Hamburger-style SplitView control 非常完美，IMO。但是，我的项目有一个 WPF 前端。

有人知道与此等效的 WPF（最好是开源的）吗？

【问题讨论】：

Material Design In XAML Toolkit 和 MahApps 有类似的（分别是 Drawer 和 Flyout）materialdesigninxaml.net 或 mahapps.com ...两者都是开源的。

GitHub 上的相同汉堡菜单 check this video

@JamesWillock 你见过这个的任何示例实现吗，默认的 Drawer 和 Flyout 似乎仍然需要一些工作才能使其看起来正确

@Sender 该视频似乎指的是 UWP，而不是 WPF。

【参考方案1】：

另一个要研究的实现是https://github.com/alicanerdogan/HamburgerMenu

【参考方案2】：

MahappsMetro 现在有一个很好的人

【讨论】：

汉堡菜单，github.com/MahApps/MahApps.Metro/tree/develop/src/MahApps.Metro/…

【参考方案3】：

使用 GridSplitter 控件和 StoryBoard，您可以很容易地进行设置。您可能需要稍微调整此代码以使其看起来像汉堡包，但这应该会让您顺利进行。

<UserControl
x:Class="Namespace.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="mainPage">

<Grid>
    <Grid.Resources>
        <Storyboard x:Name="CloseLeft">
            <DoubleAnimation x:Name="animNavLinksClose"
                             Storyboard.TargetName="mainPage" Storyboard.TargetProperty="NavLinksWidth"
                             To="0.0" Duration="00:00:00.2" />
        </Storyboard>
        <Storyboard x:Name="OpenLeft">
            <DoubleAnimation x:Name="animNavLinksOpen"
                             Storyboard.TargetName="mainPage" Storyboard.TargetProperty="NavLinksWidth"
                             From="0" To="170" Duration="00:00:00.2" />
        </Storyboard>
    </Grid.Resources>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="170" x:Name="NavLinksColumn" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid x:Name="grdNavLinks" Grid.Column="0">
        <!-- Navigation Buttons -->
    </Grid>

    <GridSplitter x:Name="spltNavLinks" Grid.Column="1" />

    <Grid x:Name="contentSection" Grid.Column="2">
        <!-- Content or Frame -->
    </Grid>
</Grid>
</UserControl>

然后你可以像这样从代码隐藏调用你的故事板

// Begin Opening Animation
OpenLeft.Begin();

// Begin Closing Animation
CloseLeft.Begin();

【讨论】：

我还没有尝试过，但这是否支持 UWP 的 DisplayMode 属性的 CompactOverlay 选项，在展开时它将文本显示为叠加层，而在折叠时将只显示图标？

不，您需要为包含自己的 CompactOverlay 逻辑的控件实现自己的自定义控件。我不知道 WPF 有类似的事情。尝试在线搜索可以轻松移植到 WPF 的 Silverlight 或 WinPhone7/8 示例。