【Win 10应用开发】SplitView控件

SplitView控件用于呈现分隔视图,简单地说,就是把一个视图分割为两部分,Content属性所表示的为主要视图,而Pane属性设置的视图则可以隐藏,可以折叠和展开。

估计文字是不太容易介绍这个控件的,还是用实例来说明吧,老周平生最爱实例,最BS枯燥的理论的。

先看XAML代码:

        <SplitView x:Name="splitView" OpenPaneLength="150" CompactPaneLength="45"  PaneBackground="LightGray" DisplayMode="CompactOverlay">
            <Image Stretch="Uniform" Source="{Binding ElementName=lvPrev,Path=SelectedItem.Uri}"/>
            <SplitView.Pane>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Row="0" Orientation="Horizontal">
                        <Button BorderThickness="0" Grid.Row="1" Background="Transparent" Click="OnClick">
                            <Button.Content>
                                <TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="24" />
                            </Button.Content>
                        </Button>
                        <TextBlock Margin="10,0,0,0" VerticalAlignment="Center" FontSize="18" Text="选择图像"/>
                    </StackPanel>
                    <ListView x:Name="lvPrev" Grid.Row="1">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Image Width="20" Height="20" Stretch="Uniform">
                                        <Image.Source>
                                            <BitmapImage UriSource="{Binding Uri}" DecodePixelWidth="20"/>
                                        </Image.Source>
                                    </Image>
                                    <TextBlock Grid.Column="1" Text="{Binding Text}" VerticalAlignment="Center" Margin="15,0,0,0"/>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </SplitView.Pane>
        </SplitView>

别看代码长,其实不复杂。由于SplitView的Content属性被声明为内容标记,因此<SplitView.Content>.....</SplitView.Content>这一层节点可以省略,所以,你就明白,只机是直接写在SplitView的开始和结束标记之间的,就是Content属性的内容。
上面例子中,SplitView控件的主体内容就是一个Image控件,待会儿我让它来显示图像,而至于显示哪一张图像,就通过ListView控件的SelectedItem来决定,所以就把Image.Source与SelectedItem属性绑定。

ListView中的项目我定义了一个类专门用于封装:

    public class ViewItem
    {
        public string Text { get; set; }
        public Uri Uri { get; set; }
    }

Text表示一张图像的名称,Uri就是图像地址,为了绿色环保,要用到的图片我都放在项目里面,本地引用速度快一些。

然后在页面代码中生成一批ViewItem,并作为ListView的数据源。

        ObservableCollection<ViewItem> m_items = null;
        .........        m_items = new ObservableCollection<ViewItem>();        this.lvPrev.ItemsSource = m_items;       ………………

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            m_items.Clear();
            // 添加项列表
            m_items.Add(new ViewItem { Text = "雪花", Uri = new Uri("ms-appx:///Assets/images/1.jpg") });
            m_items.Add(new ViewItem { Text = "风筝", Uri = new Uri("ms-appx:///Assets/images/2.jpg") });
            m_items.Add(new ViewItem { Text = "核桃", Uri = new Uri("ms-appx:///Assets/images/3.jpg") });
            m_items.Add(new ViewItem { Text = "小溪", Uri = new Uri("ms-appx:///Assets/images/4.jpg") });
            m_items.Add(new ViewItem { Text = "胡杨", Uri = new Uri("ms-appx:///Assets/images/5.jpg") });
            m_items.Add(new ViewItem { Text = "红梅", Uri = new Uri("ms-appx:///Assets/images/6.jpg") });
        }

所以,只要在ListView中选择一个图像,就会在Image中显示。但是,ListView不应该是主要视图,故把它放在SplitView.Pane中,这样它就可以折叠了。

下面再把重点回归到SplitView控件上。

        <SplitView x:Name="splitView" OpenPaneLength="150" CompactPaneLength="45"  PaneBackground="LightGray" DisplayMode="CompactOverlay">
                ……

OpenPaneLength:当Pane中的内容被展开后的宽度。

CompactPaneLength:当Pane的内容被折叠后的宽度。

PaneBackground:设置绘制Pane视图的背景的画刷。

DisplayMode:设置Pane区域的显示方式,主要有以下几个值。

Inline:内联,就是Pane中的内容与Content中的内容处于一个层上,当Pane展开时,Content的宽度会收缩。比如这样:

Overlay:表示Pane的内容覆盖在Content的内容之上。此时的Pane内容就像一个弹出层。而且,当你点击其他视图区域时,Pane的内容会隐藏。比如:

CompactInline:Pane内容与Content内容位于同一个层上,但Pane内容处于折叠状态,折叠后的宽度由CompactPaneLength属性来设置。比如这样:

CompactOverlay:Pane内容折叠,并浮动在Content内容上,即它们不在同一个层上,点击其他地方会使Pane隐藏。

示例界面上还有一个Button,点击它可以切换SplitView的状态。

        private void OnClick(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            this.splitView.IsPaneOpen = !this.splitView.IsPaneOpen;
        }

IsPaneOpen为true时,Pane内容展开;否则Pane内容折叠。

示例运行结果如下:

好好好,本文简单介绍了Win10应用中新增的SplitView控件。

示例下载:http://files.cnblogs.com/files/tcjiaan/MyApp.zip

时间: 2024-10-29 08:19:39

【Win 10应用开发】SplitView控件的相关文章

【Win 10 应用开发】打印UI元素

原文:[Win 10 应用开发]打印UI元素 Windows App支持将UI界面进行打印的功能,这与浏览器中的打印网页的用途相近,其好处就是“所见即所得”,直接把界面上呈现的内容打印下来,比重新创建打印图像方便得多. 要在通用App中实现打印,主要依靠以下几个类型: PrintManager:位于Windows.Graphics.Printing命名空间,主要负责显示打印对话框,设置打印源等操作.在使用时,首先调用GetForCurrentView静态方法得到一个PrintManager实例:

【Win 10应用开发】实现全屏播放的方法

原文:[Win 10应用开发]实现全屏播放的方法 有人会问,以前的MediaElement控件不是有现成的一排操作按钮吗?而且可以直接进入全屏播放.是的,我们知道,以往的Store App都是在全屏模式下运行的,只要MediaElement控件填满整个窗口,就等于全屏播放了,但是,Win10应用是窗口化的,将MediaElement控件的IsFullWindow属性设置为true后,就会这样: 从上面的截图看,MediaElement控件只是覆盖整个窗口而已,并没有实现全屏.那有办法让它全屏播放

【Win 10 应用开发】Toast通知激活应用——前台&amp;后台

原文:[Win 10 应用开发]Toast通知激活应用--前台&后台 老周最近热衷于讲故事,接下来还是讲故事时间. 有人问我:你上大学的时候,有加入过学生会吗?读大学有没有必要加入学生会? 哎哟,这怎么回答呢,从短期来说,加入学生会有点用,至少可以娱乐一下,运气好的话,说不定能遇到红颜知己,但这概率相当低.从长远发展看嘛,是没什么用.老周当年读了四年本科,在学生会混了四年,什么名堂也没混出来. 一方面老周向来不求虚名,所以也没去参选所谓的什么部长.主席之类的,这些“官衔”听起来很高大上,实际上很

C#开发ActiveX控件

昨天写了篇博客<Winform 程序嵌入WPF程序 并发送消息>,没有说明为什么要嵌入WPF程序,那么今天就来唠叨唠叨其中的一个使用场景,开发ActiveX控件 首先,新建一个类库工程HuaYun.ActiveX,右键工程属性,在“应用程序”页,点击“程序集信息”按钮,在弹出的窗体里勾选“使程序集COM可见”,具体操作如下图 第二步,切换到“生成”的选项卡,勾选“为COM互操作注册”,如下图 第三步,在AssemblyInfo.cs里添加[assembly: AllowPartiallyTru

【Win 10应用开发】多窗口视图

Windows App一般情况下,同一时刻只能有一个应用程序实例在运行,为了在特殊需求下可以同时呈现不同的UI,SDK提供了多视图操作支持. 应用程序可以创建新的应用视图,以新的视图为基础可以呈现与主视图不同的内容,但又不影响主视图的UI.这些视图既可以在同一个窗口中切换,也可以用新的窗口来呈现新的视图.这些窗口,用户可以拖放到不同的虚拟桌面中. 其实,视图的创建.切换.显示都不难,主要的难点在于完成这些操作所需要的类型被分布在不同的命名空间中,故不熟悉SDK的朋友可能找不到. 视图管理相关的A

使用C#开发ActiveX控件(新)

前言 ActiveX控件以前也叫做OLE控件,它是微软IE支持的一种软件组件或对象,可以将其插入到Web页面中,实现在浏览器端执行动态程序功能,以增强浏览器端的动态处理能力.通常ActiveX控件都是用C++或VB语言开发,本文介绍另一种方式,在.NET Framework平台上,使用C#语言开发ActiveX控件. 虽然本文通篇都在讲如何使用C#语言开发ActiveX控件,但我并不极力推荐使用这种技术,因为该技术存在明显的局限,即需要浏览器端安装.NET Framework(版本取决于开发Ac

一些基于jQuery开发的控件

基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html (无法找到)下载:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html 示例:http://letmehaveblog.blogspot.com/2007

【Win 10应用开发】如何知道UAP在哪个平台上运行

原文:[Win 10应用开发]如何知道UAP在哪个平台上运行 面向22世纪的现代化应用程序可以同时在多种设备上运行,于是有朋友会有一个疑问:有时候,我们还真的需要判断一下,UAP应用程序在哪个平台上运行.尽管大多情况下我们不必要这样做,但某些特殊情况还得考虑.比如一串数据列表,我希望如果在桌面上运行时就以横向列表展现:但要是运行在手机上就以纵向列表展现. 也就是说,其实我们只需分析两种情况即可: 一.桌面.(台式机.笔记本.平板.游戏机.发广告专用机.导航器……) 二.移动环境.其实就是手机.

CAD控件,CAD插件使用教程:Android开发使用控件--开发环境的搭建

Android开发使用控件入门--环境搭建 2014-12-24 09:57     14人阅读     评论(0)     收藏         编辑     删除 CAD控件.CAD三维控件,手机控件 Android开发控件 软件名称(,梦,,想.CAD  ,控件) 1. 环境搭建: 3 1.1. 安装Eclipse 3 1.2. 下载JDK 3 1.3. 下载Android SDK 5 1.4. 给Eclipse 安装ADT插件  8 1.5. 运行Eclipse设置Android ADT