【Win10】SplitView控件
SplitView是Win10中的新控件。
用于呈现两部分视图。 一个视图是主要内容,另一个视图是用于导航。(也就是通常说的汉堡菜单。)
主要结构:
<SplitView>
<SplitView.Content>
<!--主要内容-->
</SplitView.Content>
<SplitView.Pane>
<!--汉堡菜单-->
</SplitView.Pane>
</SplitView>
对应的实例如图所示:
在上图中,pane里有一个listview(此时的状态是已经点选择展开了的,才显示了"菜单X"等文字)。
注意几个属性:CompactPanelLength: Pane折叠时候的长度
OpenPaneLength: Pane展开时候的长度
另外重要的一个就是DisplayMode属性:
1.Inline: 内联: 当Pane展开式,Content会直接往右移动,宽度变小
2.Overlay 覆盖:当Pane展开式, 直接覆盖在Content上面。
3.CompactInline 在pane折叠的时候显示,显示的时候为内联
4.CompactOverlay 在panel折叠的时候隐藏,显示的时候为覆盖
我先画出左上角的汉堡菜单,使得点击能够展开/不展开
xaml:
<Button BorderThickness="" Background="White" Click="Button_Click">
<Button.Content>
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize=""/>
</Button.Content>
</Button>
后台代码:
splitView.IsPaneOpen = !splitView.IsPaneOpen;
之后在这个汉堡菜单下面画出列表
<ListView x:Name="lv" Grid.Row="" ItemsSource="{x:Bind pictures}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="model:PictureModel">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Width="" Height="" Stretch="Uniform" VerticalAlignment="Center" Grid.Column="">
<Image.Source>
<BitmapImage UriSource="{x:Bind Uri}"/>
</Image.Source>
</Image>
<TextBlock Text="{x:Bind Text}" Grid.Column="" VerticalAlignment="Center" Margin="20,0,0,0"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
在写上面的时候,当时出现了个问题,提示:DataTemplate不支持直接内容。 烦恼我好久,后来也不知怎么的正常了。。
参照上一篇随笔,因为是x:Bind 使用了强类型病毒,这里也不需要绑定DataContext,并且要写明数据类型。
之后就是建立类 并且创建对象就可以了。
PictureModel类:
public class PictureModel
{
public Uri Uri { get; set; }
public string Text { get; set; }
public string Details { get; set; }
}
创建对象:
ObservableCollection<PictureModel> pictures = new ObservableCollection<PictureModel>();
pictures.Add(new PictureModel() { Text = "菜单1", Uri = new Uri(@"ms-appx:///Assets/images/1.png"), Details = "描述111111" });
pictures.Add(new PictureModel() { Text = "菜单2", Uri = new Uri(@"ms-appx:///Assets/images/2.png"), Details = "描述222222" });
pictures.Add(new PictureModel() { Text = "菜单3", Uri = new Uri(@"ms-appx:///Assets/images/3.png"), Details = "描述333333" });
【Win10】SplitView控件的更多相关文章
- 【Win 10应用开发】SplitView控件
SplitView控件用于呈现分隔视图,简单地说,就是把一个视图分割为两部分,Content属性所表示的为主要视图,而Pane属性设置的视图则可以隐藏,可以折叠和展开. 估计文字是不太容易介绍这个控件 ...
- [深入浅出Windows 10]分屏控件(SplitView)
4.18 分屏控件(SplitView) 分屏控件(SplitView)是Windows 10新增的控件类型,也是Windows 10通用应用程序主推的交互控件,通常和一个汉堡按钮搭配作为一种抽屉式菜 ...
- RAD 10 新控件 TSearchBox TSplitView
Seattle新控件 1.TSearchBox Events OnInvokeSearch published Occurs when the search indicator button is c ...
- Delphi XE2 新控件 布局Panel TGridPanel TFlowPanel
Delphi XE2 新控件 Firemonkey 布局Panel Windows平台VCl TGridPanel TFlowPanel FMX 跨平台 TLayout TGridLayout TFl ...
- 【Win10开发】相对布局——RelativePanel控件
我们知道,Win10引入了Universal Windows Platform,那么我们针对不同的平台该有不同的布局,此时我们就需要相对布局,就会用到RelativePanel这个控件.我们不再将控件 ...
- 模仿win10样式,基于jquery的时间控件
工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...
- 【WIN10】基本控件
先發個下載地址: http://yunpan.cn/cHuCqYzvsWFAL 访问密码 3470 說明一下.這個示例只是最簡單的演示,並不能提供太大的實用價值. 後面會介紹 Bing & ...
- 背水一战 Windows 10 (39) - 控件(布局类): VariableSizedWrapGrid, Border, Viewbox, SplitView
[源码下载] 背水一战 Windows 10 (39) - 控件(布局类): VariableSizedWrapGrid, Border, Viewbox, SplitView 作者:webabcd ...
- win10 uwp 拖动控件
我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...
随机推荐
- 昨天写支付接口时遇到支付接口返回数据接收地址,session数据丢失(或者说失效)的问题
在网上找了好久 才找到答案 分享给大家 http://www.zcool.com.cn/article/ZMzYwNTI=.html
- 编译安装zabbix3.2
1.1 环境准备 系统环境准备:redhat 6.6 64位mysql-5.6.34php-5.6.28zabbix-3.2.1配置前先关闭iptables和SELINUX,避免安装过程中报错. # ...
- eclipse 启动到loading workbench... 自动关闭
是由于项目没有正常关闭运行而导致"workbench.xmi"中的"persistedState"标签还保持在运行时的配置造成的. 解决方法: 找到<wo ...
- gcc/linux内核中likely、unlikely和__attribute__(section(""))属性
查看linux内核源码,你会发现有很多if (likely(""))...及if (unlikely(""))...语句,这些语句其实是编译器的一种优化方式,具 ...
- H5页面微信分享和手Q分享设置
RT: 一. 手Q分享: 如下代码所示:设置好 description,name,image,即可,唯一注意的是image最好是200*200,要不然过小不美观,过大加载太慢 <head> ...
- JAVA设计模式之1-单例模式
设计模式是什么? 设计模式是一种思路,是在前辈们的软件工程中总结出来的套路,并且这些套路已经经过很多项目的测试,是比较成熟的思路,所以现在来总结一下常见的设计模式. 最简单最常用的就是单例模式: 一般 ...
- Go语言开发第一个Hello,World
在网上看到go语言的各种评价,也是闻名已久,但是没有自己实践过,也不知道它的好,它的坏,今天就来试试第一个小程序 第一步.如何下载 1)下载go安装程序 下载地址:https://golang.org ...
- NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析
我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...
- 使用C#把发表的时间改为几年前,几个月,几天前,几小时前,几分钟前,或几秒前
我们在评论中往往会看到多少天前,多少小时前. 实现原理:现在时间-过去时间 得到的时间差来做比较 下面我定义了一个Helper类,大家直接引用即可,参数就是时间差,注意时间差类型是TimeSpan类型 ...
- c#常用方法
创建目录 Directory.CreateDirectory(Application.StartupPath+"\\test");