win10开发中 UWP SplitView 控件讲解
本帖最后由 Clever-he 于 2015-12-17 10:09 编辑
plitViewUWP新增的控件,使用SplitView可以开发出屏显示的效果,本文我们来具体讲解一下win10开发中的SplitView。
本篇对适用于顶层导航的SplitView控件展开讨论。
首先SplitView是Win10 UWP新增的控件,以前虽然可以通过DockPanel模拟出类似的效果,但又哪里及得上M$原生支持的SplitView快捷方便呢。
至于为什么说SplitView适合顶层导航,可以参考目前尚为数不多的UWP APP,比如微博、QQ和网易等Win10 APP,基本都是通过SplitView将主界面分成左右两块Pane和Content,在屏幕宽度减至一定程度,自动隐藏Pane,仅显示Content。又或者将导航菜单至于Pane中,通过汉堡菜单来控制是否显示,诸如此类。
SplitView的类定义这里就不贴了,即使去除Inherited和Protected的成员,也稍嫌有些多了。我们先从用法着手,再一点一点深入介绍比较重要的属性。
[mw_shl_code=csharp,true]<SplitView IsPaneOpen="True"
DisplayMode="Inline"
OpenPaneLength="296">
<SplitView.Pane>
<TextBlock Text="Pane"
FontSize="24"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</SplitView.Pane>
<Grid>
<TextBlock Text="Content"
FontSize="24"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</SplitView>[/mw_shl_code]
这段XAML是图省事从MSDN上拷下来的,显示的效果呢如下图:
[align=center]***附件停止解析***[/align]
简单的分析一下,SplitView的Children一般有两个,默认左边Pane和右边Content。Pane的显示由IsPaneOpen这个属性决定,所以binding用在这里就对了。然后通过汉堡菜单来修改这个binding的bool值,你懂的。
各位是不是觉得本篇实在太水了……别着急啊还没讲完呢……我们接下来看DisplayMode这个属性:
这个属性是一个枚举值,各位英文不好的童鞋,你们有福了,在UWP文档匮乏更不会有中文的情况下,将有同样英文不好的我给你们翻译(圣光庇佑你们……)
Member Value Description
Overlay 0 1.Pane显示的时候浮在Content上面
2.隐藏的时候完全消失
3.点击非Pane区域会导致Pane隐藏
Inline 1 1.Pane显示的时候会将Content一屁股挤到旁边去
2.隐藏时无隐无踪
3.你点不点他,他还在那里……
CompactOverlay 2 1.根据CompactPaneLength的长度设置,死皮赖脸会露一点点出来
2.其他行为与Overlay保持一致
3.适用于导航菜单由图标+文字组成,展开显示全部,隐藏仅显示图标
CompactInline 3 1.你懂的
属性CompactPaneLength,刚刚提到,给你的图标留点空间就行。
属性OpenPaneLength,这个属性很有意思也很重要。如果你不去设置这个值,你会发现系统会自动计算。结果就是在PC和Pad上,足够空间的情况下,Overlay的Pane不会遮挡整个Content,会以一个美观的比列呈现。但UWP程序运行在Phone上时,Pane会完全的遮住Content,辣总感觉你自己体会。老司机这里一段话省了你多少时间啊QAQ(记得评论里感谢我)
属性PanePlacement,这个没啥讲的,就是控制Pane显示在左边还是右边。
最后以一个Demo截图作为结束:
[align=center]***附件停止解析***[/align]
【Win10】UWP 开发 SplitView 实例
SplitView,这个控件,好像在WinJs中早早就有了,我们好多人也在WPF/WinRT 等Xaml环境中实现过,但官方的才姗姗来迟,泪奔中。
我猜测,因为我们的在Xaml太强大了,这么弱小的功能,分分种搞出来一个,微软的工程师们就觉得没必要啦(YY中。。。。)。
一、效果
[align=center]***图片停止解析***[/align]
二、SplitView
在效果的Gif中,一共展示了四种方式,通过设置DisplayMode来改变,分别是:
1. Inline
2. Overlay
3.CompactInline
4.CompactOverlay
前两种模式当IsOpen 为False 时,是完全隐藏的.
后两种模式,当IsOpen为False时,不会完全隐藏,剩余的大小是由 CompactPaneLength 属性决定,默认值为48.
还有一个 OpenPaneLength,当名字就知啦,展开的Pane长度。
三、示例核心代码
[mw_shl_code=csharp,true]<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView IsPaneOpen="{x:Bind splitViewToggle.IsChecked,Mode=TwoWay,Converter={StaticResource NullableBooleanToBooleanKey}}"
PaneBackground="Green"
DisplayMode="CompactOverlay"
CompactPaneLength="">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="1">
<ListViewItem>
<StackPanel Orientation="Horizontal" >
<SymbolIcon Symbol="People" />
<TextBlock Text="People"
Margin="24,0,0,0"
VerticalAlignment="Center" />
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal" >
<SymbolIcon Symbol="Globe" />
<TextBlock Text="Globe"
Margin="24,0,0,0"
VerticalAlignment="Center" />
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal" >
<SymbolIcon Symbol="Message" />
<TextBlock Text="Message"
Margin="24,0,0,0"
VerticalAlignment="Center" />
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal" >
<SymbolIcon Symbol="Mail" />
<TextBlock Text="Mail"
Margin="24,0,0,0"
VerticalAlignment="Center" />
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal" >
<SymbolIcon Symbol="Video" />
<TextBlock Text="Video"
Margin="24,0,0,0"
VerticalAlignment="Center" />
</StackPanel>
</ListViewItem>
</ListView>
</Grid>
</SplitView.Pane>
<Border Background="LightGray">
<TextBlock Text="Content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</SplitView>
<ToggleButton x:Name="splitViewToggle" Style="{StaticResource SplitViewTogglePaneButtonStyle}" />
</Grid>
[/mw_shl_code]
本文出自开发者交流群:53078485,期待您的加入
标签: 开发
为防止不可控的内容风险,本站已关闭新用户注册,新贴的发表及评论;
你现在看到的内容只是互联网用户曾经发表的言论快照,仅用于老用户留存纪念,且仅与科技行业相关,全部内容不代表本站观点及立场;
本站重新开放前已针对包括用户隐私、版权保护、信息安全、国家政策在内的各种互联网法律法规要求,执行了隐患内容的自查、屏蔽和删除;
本站目前所属个人主体,未有任何盈利安排与计划,且与原WFUN.COM所属公司不存在任何关联关系;
如果本帖内容或者相关资源侵犯到您的合法权益,或者您认为存在问题,那么请您务必点此举报或投诉!
<ToggleButton x:Name="splitViewToggle" Style="{StaticResource SplitViewTogglePaneButtonStyle}" />
这一句,显示无法解析,怎么破
本帖最后由 qiqiminmin 于 2015-12-18 23:24 编辑
Quote***链接停止解析***
这一句,显示无法解析,怎么破
( ̄▽ ̄)",把style去掉。或者自己写个style, 我把我的给你吧。放到Resource里
[mw_shl_code=html,true]<Style x:Key="SplitViewTogglePaneButtonStyle" TargetType="ToggleButton">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
<Setter Property="MinHeight" Value="48" />
<Setter Property="MinWidth" Value="48" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="Content" Value="" />
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid Background="{TemplateBinding Background}" x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.(Grid.Background)" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.(Grid.Background)" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="ContentPresenter.(TextBlock.Foreground)" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Checked"/>
<VisualState x:Name="CheckedPointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.(Grid.Background)" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckedPressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.(Grid.Background)" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckedDisabled">
<VisualState.Setters>
<Setter Target="ContentPresenter.(TextBlock.Foreground)" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>[/mw_shl_code]
Quote***链接停止解析***
( ̄▽ ̄)",把style去掉。或者自己写个style, 我把我的给你吧。放到Resource里
[mw_shl_code=html,true] ...
原来如此,非常感谢