【问题标题】:Is there a WPF-equivalent to UWP's SplitView Hamburger Menu?是否有与 UWP 的 SplitView Hamburger Menu 等效的 WPF?
【发布时间】:2016-01-11 06:49:21
【问题描述】:

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

有人知道与此等效的 WPF(最好是开源的)吗?

【问题讨论】:

  • Material Design In XAML Toolkit 和 MahApps 有类似的(分别是 Drawer 和 Flyout)materialdesigninxaml.netmahapps.com ...两者都是开源的。
  • GitHub 上的相同汉堡菜单 check this video
  • @JamesWillock 你见过这个的任何示例实现吗,默认的 Drawer 和 Flyout 似乎仍然需要一些工作才能使其看起来正确
  • @Sender 该视频似乎指的是 UWP,而不是 WPF。

标签: .net wpf uwp


【解决方案1】:

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

【讨论】:

    【解决方案2】:

    MahappsMetro 现在有一个很好的人

    【解决方案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 示例。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-26
    • 1970-01-01
    • 2020-08-31
    • 2021-06-15
    • 1970-01-01
    相关资源
    最近更新 更多