如何做一名合格的軟狗--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;
        }
    }
}