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

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

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

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

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

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

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

。

第一篇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:                        

Inline：

CompactOverlay：

CompactInline：

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

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

菜单的图标表示。

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

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

xaml部分：

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0">
            <Border>
                <ToggleButton x:Name="toggleBtn" Background="Gray" Click="toggleBtn_Click">
                    <ToggleButton.Content>
                        <!--<SymbolIcon Symbol="Back"/>-->
                        <FontIcon Glyph=""/>
                    </ToggleButton.Content>
                </ToggleButton>
            </Border>
            <SymbolIcon Foreground="Coral" Symbol="Emoji" Margin="20 ,0,0,0" VerticalAlignment="Center"/>
            <TextBlock Text="This is a Test" Foreground="White" Margin="10,0,10,0" FontSize="25" VerticalAlignment="Center"/>
            <SymbolIcon Foreground="Coral" Symbol="Emoji2" VerticalAlignment="Center"/>
        </StackPanel>
        <SplitView x:Name="splitView" Grid.Row="1" IsPaneOpen="True" DisplayMode="Overlay">
            <SplitView.Pane>
                <Grid Background="Gray">
                    <ListView>
                        <ListView.Items>
                            <ListViewItem>
                                <TextBlock Text="火影忍者" FontSize="30"/>
                            </ListViewItem>
                            <ListViewItem>
                                <TextBlock Text="海贼王" FontSize="30"/>
                            </ListViewItem>
                            <ListViewItem>
                                <TextBlock Text="妖精的尾巴" FontSize="30"/>
                            </ListViewItem>
                            <ListViewItem>
                                <TextBlock Text="潮与虎" FontSize="30"/>
                            </ListViewItem>
                            <ListViewItem>
                                <TextBlock Text="全职猎人" FontSize="30"/>
                            </ListViewItem>
                        </ListView.Items>
                    </ListView>
                </Grid>
            </SplitView.Pane>
            <Grid>
                <TextBlock x:Name="textBlock" Text="DisplayMode为Inline的情况" Foreground="White" TextWrapping="Wrap" VerticalAlignment="Center" />
            </Grid>
        </SplitView>
        <StackPanel Grid.Row="2">
            <ComboBox x:Name="comboBox" HorizontalAlignment="Center" Width="200" />
        </StackPanel>
    </Grid>
</Page>
           

以上代码中：

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;
        }
    }
}