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控件的更多相关文章

  1. 【Win 10应用开发】SplitView控件

    SplitView控件用于呈现分隔视图,简单地说,就是把一个视图分割为两部分,Content属性所表示的为主要视图,而Pane属性设置的视图则可以隐藏,可以折叠和展开. 估计文字是不太容易介绍这个控件 ...

  2. [深入浅出Windows 10]分屏控件(SplitView)

    4.18 分屏控件(SplitView) 分屏控件(SplitView)是Windows 10新增的控件类型,也是Windows 10通用应用程序主推的交互控件,通常和一个汉堡按钮搭配作为一种抽屉式菜 ...

  3. RAD 10 新控件 TSearchBox TSplitView

    Seattle新控件 1.TSearchBox Events OnInvokeSearch published Occurs when the search indicator button is c ...

  4. Delphi XE2 新控件 布局Panel TGridPanel TFlowPanel

    Delphi XE2 新控件 Firemonkey 布局Panel Windows平台VCl TGridPanel TFlowPanel FMX 跨平台 TLayout TGridLayout TFl ...

  5. 【Win10开发】相对布局——RelativePanel控件

    我们知道,Win10引入了Universal Windows Platform,那么我们针对不同的平台该有不同的布局,此时我们就需要相对布局,就会用到RelativePanel这个控件.我们不再将控件 ...

  6. 模仿win10样式,基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  7. 【WIN10】基本控件

    先發個下載地址: http://yunpan.cn/cHuCqYzvsWFAL  访问密码 3470 說明一下.這個示例只是最簡單的演示,並不能提供太大的實用價值. 後面會介紹 Bing & ...

  8. 背水一战 Windows 10 (39) - 控件(布局类): VariableSizedWrapGrid, Border, Viewbox, SplitView

    [源码下载] 背水一战 Windows 10 (39) - 控件(布局类): VariableSizedWrapGrid, Border, Viewbox, SplitView 作者:webabcd ...

  9. win10 uwp 拖动控件

    我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...

随机推荐

  1. 昨天写支付接口时遇到支付接口返回数据接收地址,session数据丢失(或者说失效)的问题

    在网上找了好久 才找到答案 分享给大家 http://www.zcool.com.cn/article/ZMzYwNTI=.html

  2. 编译安装zabbix3.2

    1.1 环境准备 系统环境准备:redhat 6.6 64位mysql-5.6.34php-5.6.28zabbix-3.2.1配置前先关闭iptables和SELINUX,避免安装过程中报错. # ...

  3. eclipse 启动到loading workbench... 自动关闭

    是由于项目没有正常关闭运行而导致"workbench.xmi"中的"persistedState"标签还保持在运行时的配置造成的. 解决方法: 找到<wo ...

  4. gcc/linux内核中likely、unlikely和__attribute__(section(""))属性

    查看linux内核源码,你会发现有很多if (likely(""))...及if (unlikely(""))...语句,这些语句其实是编译器的一种优化方式,具 ...

  5. H5页面微信分享和手Q分享设置

    RT: 一. 手Q分享: 如下代码所示:设置好 description,name,image,即可,唯一注意的是image最好是200*200,要不然过小不美观,过大加载太慢 <head> ...

  6. JAVA设计模式之1-单例模式

    设计模式是什么? 设计模式是一种思路,是在前辈们的软件工程中总结出来的套路,并且这些套路已经经过很多项目的测试,是比较成熟的思路,所以现在来总结一下常见的设计模式. 最简单最常用的就是单例模式: 一般 ...

  7. Go语言开发第一个Hello,World

    在网上看到go语言的各种评价,也是闻名已久,但是没有自己实践过,也不知道它的好,它的坏,今天就来试试第一个小程序 第一步.如何下载 1)下载go安装程序 下载地址:https://golang.org ...

  8. NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析

    我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...

  9. 使用C#把发表的时间改为几年前,几个月,几天前,几小时前,几分钟前,或几秒前

    我们在评论中往往会看到多少天前,多少小时前. 实现原理:现在时间-过去时间 得到的时间差来做比较 下面我定义了一个Helper类,大家直接引用即可,参数就是时间差,注意时间差类型是TimeSpan类型 ...

  10. c#常用方法

    创建目录 Directory.CreateDirectory(Application.StartupPath+"\\test");