如何做一名合格的软狗--Win10汉堡包菜单SplitView

淩亂°似流年 2022-08-05 08:42 115阅读 0赞

Win10发布一个多月了，伴随着的是微软大一统思想的开始和谋划。作为一名伪软狗，看通用应用这个思想很好玩，

虽然WP现在已经药丸，Windows 10 Mobile也已经是半残废，不过下载了几个已经出的通用应用，还是很给力的，虽

然比较的对象是那些用多了发热，玩多了闪退的应用，但是还会给人眼前一亮的感觉。

好了，废话不多说了，升级了Windows 10，也没翻墙安装VS2015，没做过安卓其实也就没翻墙的必要了。毕竟微软后

来支持的，拿现在的VS开发安卓的那就是在开玩笑，毕竟安卓出来那么多年，eclipse专用开发安卓的文档，框架以

及解决方案已然很完善了，谁会玩命丢掉再去上手新出的工具，不过话说回来，VS支持自家的C\#还是杠杠的，应该要过个几年等各方面成熟了，就会有人用来开发安卓吧，毕竟用户基础在那边，VS用户界面还是很深得我喜欢的![大笑][laugh.gif]。

第一篇Win10通用应用的博客就拿SplitView控件开刀吧，虽然汉堡包已经被很多软粉吐槽了。不过是好控件拿过来用

也是无可厚非的，主要是看开发者怎么设计UI布局喽。

SplitView控件是用来干啥的嘛，简言之呢，它作为空间除了呈现内容之外还自身捆绑了菜单，所以可以把菜单项一

股脑的可以放在SplitView的Pane里面，当你需要用的时候点一下，它就会侧滑出来，所以也有人成为侧滑菜单。

这边就涉及到一个问题了，既然会侧滑出来，那么原来页面的内容怎么布局呢？菜单项是直接呈现在原先内容的上面

还是占据一定的空间把原有内容的空间挤掉一部分呢？

所以就像网页布局中的z-index属性一样，SplitView也有这么一个属性：DisplayMode(枚举类型)

四个枚举值：Overlay(默认值)，Inline，CompactOverlay，CompactInline

需要注意的是以下几点：

1.Overlay或者CompactOverlay型时，点击SplitView以外的区域或者汉堡包菜单都可以让其缩回去。

2.而Inline和CompactInline则必须点击汉堡包按钮才能让其缩回去。

3.Overlay：      SplitView菜单项呈现在原先内容之上，遮盖住原先的内容，缩回去完全消失

Inline：       SplitView菜单项在页面中占据的空间，会将内容向对应方向挤出控件大小的空间，缩回去消失

CompactOverlay：和Overlay一样，不同的是缩回去侧栏仍保留一定的空间

CompactInline： 和Inline一样，不同的是缩回去侧栏仍保留一定的空间

具体见下图比较：

Overlay:

![20150910220506676][]   ![20150910220538214][]

Inline：

![20150910220556856][]   ![20150910220615456][]

CompactOverlay：

![20150910220630261][]   ![20150910220644704][]

CompactInline：

![20150910220658921][]   ![20150910220716826][]

根据上述的说明和截图(做的很丑，仅供理解即可)比较，应该发现其中的区别之处了：

多了Compact是缩回去保留侧边一部分空间而已，所以大家可以自由发挥那部分空间用来干嘛，不过大部分情况下用作

菜单的图标表示。

Overlay和Inline的区别是遮挡页面内容还是挤掉页面内容(这就要考虑页面怎么自适应布局了)

好了，下面看代码怎么实现呢？

xaml部分：

以上代码中：

1.注意SymbolIcon和FontIcon的灵活应用。

2.SplitView的菜单内容写在SplitView.Pane中，而页面呈现内容直接写在SplitView中

.CS代码：

using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    //“空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 上有介绍
    
    namespace App1
    {
        /// <summary>
        /// 可用于自身或导航至 Frame 内部的空白页。
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
    
                //获取SplitView的DisplayMode的四种枚举值
                var modes = Enum.GetValues(typeof(SplitViewDisplayMode));
                foreach (var mode in modes)
                {
                    comboBox.Items.Add(mode.ToString());
                }
                comboBox.SelectionChanged += comboBox_SelectionChanged;
                comboBox.SelectedIndex = 0;
            }
    
            private void comboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (comboBox.SelectedItem != null)
                {
                    //获取comboBox选择项，转化为SplitView的DisplayMode类型
                    var mode = (SplitViewDisplayMode)Enum.Parse(typeof(SplitViewDisplayMode), (string)comboBox.SelectedItem);
                    //设置SplitView的DisplayMode属性
                    splitView.DisplayMode = mode;
                    textBlock.Text = "DisplayMode为" + mode + "的情况";
                }
            }
    
            private void toggleBtn_Click(object sender, RoutedEventArgs e)
            {
                //展开收缩SplitView控件
                splitView.IsPaneOpen = !splitView.IsPaneOpen;
            }
        }
    }

[laugh.gif]: /images/20220731/13e139aa060941b98f212d60080bfc71.png
[20150910220506676]: https://img-blog.csdn.net/20150910220506676
[20150910220538214]: /images/20220731/a5ca16163e5c47858ec28c4a1a66a98a.png
[20150910220556856]: https://img-blog.csdn.net/20150910220556856
[20150910220615456]: /images/20220731/afa49de532d24411b19d09607382c04f.png
[20150910220630261]: https://img-blog.csdn.net/20150910220630261
[20150910220644704]: /images/20220731/bd915a2d6b804a78b30d455de9747cdb.png
[20150910220658921]: https://img-blog.csdn.net/20150910220658921
[20150910220716826]: /images/20220731/3c7645d1c6e74373a7acf8a7379030d5.png