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