title author date CreateTime categories
win10 uwp 简单MasterDetail
lindexi
2018-2-13 17:23:3 +0800
2018-2-13 17:23:3 +0800
Win10 UWP

中文

English

本文主要讲实现一个简单的界面,可以在窗口比较大显示列表和内容,窗口比较小时候显示列表或内容。也就是在窗口比较小的时候,点击列表会显示内容,点击返回会显示列表。

先放图,很简单。

开始的窗口是很大,可以两栏,其中左边显示列表,右边因为开始没有点击列表就显示图片,点击列表显示内容,就是下面的图。

如果屏幕小,那么只有一栏显示列表或内容

当然可以看下垃圾wr的,他画的图可以看出来,专业

然后发下我的图,可以看到我的最垃圾

https://msdn.microsoft.com/windows/uwp/controls-and-patterns/master-details

国内晓迪文章很好,但是文章对我渣渣很难知道如何做。

本文是很简单的,一般和我一样渣都能大概知道。

代码是我在很大的压力会议上写的,不到一个钟,写完修改,和大家说。我写的很简单,可以修改我代码,可以自己写,下面我来说下如何写。

我们首先需要一个Grid,分为两栏,其中一栏为List,一栏为Content

在大屏宽度,也就是我们可以把Grid两栏显示,基本就是Frame导航就好了。

如果屏幕小,我们合并为一个Grid一栏,那么我们只能显示列表或内容。我们可以使用顺序,对,List和Content的Zindex就是设置他们的位置,Zindex比较大的会显示,也就是判断是否存在Content,存在就显示他,不存在,显示List。

应该可以看懂,如果看不懂欢迎发邮件来喷。

现在来说Frame导航。

UWP 导航

Content是一个Frame和一个Image的Grid

            <Grid Grid.Column="{x:Bind View.GridInt,Mode=OneWay}" x:Name="Img"
Canvas.ZIndex="{x:Bind View.ZFrame,Mode=OneWay}">
<Image Source="../Assets/images.jpg"
></Image>
<Frame x:Name="frame"
></Frame>
</Grid>

先不要Grid的属性,我会在后面说。

我们没Frame的Content,也就是我们没点击List,会显示图片,Frame有页面就不会显示,因为ZIndex Frame比Image大,很简单

页面传参数很简单,首先是Frame

FrameNavigate(typeof(页), 参数);

我们在参数写我们要传页面

在页面

        protected override void OnNavigatedTo(NavigationEventArgs e)
{
var 参数= e.Parameter as 传输的参数;
base.OnNavigatedTo(e);
}

如果要保存我们的页面,不要导航都新建,在构造 NavigationCacheMode = NavigationCacheMode.Enabled;

List点击

我们创建数据Model,我们使用MVVM

    public class AddressBook
{
public string Id { set; get; }
public string Name { set; get; }
public string Str { set; get; }
}

随便的,可以根据你需要修改

我们在ViewModel,我在View新建两个DetailPage.xaml MasterDetailPage.xaml,所以在ViewModel DetailMasterModel.cs

我们在里面

        public ObservableCollection<AddressBook> EccryptAddress { set; get; }

记住要修改列的数量需要使用的

然后我们需要在View写,让我们的数据显示

                <ListView ItemClick="{x:Bind View.MasterClick}"
IsItemClickEnabled="True"
ItemsSource="{x:Bind View.EccryptAddress}"
>
<ListView.ItemTemplate>
<DataTemplate x:DataType="view:AddressBook">
<Grid>
<TextBlock Text="{x:Bind Name}"></TextBlock>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

当然需要我们在view.xaml.cs

        public MasterDetailPage()
{
View = new DetailMasterModel();
this.InitializeComponent();
} private DetailMasterModel View { set; get; }

我们给ListView我们ViewModel的数据,这样就可以显示,我们使用ItemClick可以得到ListView被点击,当然要IsItemClickEnabled="True"

        public void MasterClick(object o, ItemClickEventArgs e)
{
AddressBook temp = e.ClickedItem as AddressBook;
if (temp == null)
{
return;
}
HasFrame = true;
Detail.Navigate(typeof(DetailPage), temp.Str);
Narrow();
}

我们拿到点击传给Frame,在ViewModel,把Frame叫Detail

因为点击所以我们的Frame有内容 HasFrame=true;

后退按钮

在App写

            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.Visible;

我们在ViewModel

            SystemNavigationManager.GetForCurrentView().BackRequested += BackRequested;

如果不知道我说的是什么,可以去下我源代码https://github.com/lindexi/UWP

然后在按后退按钮,就把我们的hasFrame=false;

大概我们就把一个页面做好,Detail就显示我们点击传的str

我们需要手机按后退也是 Windows.Phone.UI.Input.HardwareButtons.BackPressed

页面更改大小

我们获得页面大小修改,可以简单

       <VisualStateManager.VisualStateGroups >
<VisualStateGroup CurrentStateChanged="{x:Bind View.NarrowVisual}">
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters >
<!--<Setter Target="Img.Visibility" Value="Collapsed"></Setter>-->
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="200"> </AdaptiveTrigger> </VisualState.StateTriggers>
<VisualState.Setters > </VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
        public void NarrowVisual(object sender, VisualStateChangedEventArgs e)
{
Narrow();
}

CurrentStateChanged就是当触发我们的界面变化发生,用这个比较好,因为我们界面大小修改不一定会小于我们设置的,一旦小于再触发,因为View的函数需要object sender, VisualStateChangedEventArgs e

那么从函数获得我们窗口变化可以使用下面两个:

Window.Current.Bounds.Width放在函数,就可以得到我们的窗口大小。

当然我们可以给我们VisualState名,从e.NewState拿到Name就很简单,我们使用Narrow,判断显示屏是小还是可以显示两个

我推荐是使用第一个,因为第二个我们必须修改前台就修改ViewModel

修改显示

我们先判断我们现在屏幕,显示两个还是显示List一个,如果是显示两个,那么我们不需要什么,当然我们需要给默认。

默认Grid左边Auto,右边*,分两个,然后左边是List,如果没有Frame,那么显示图片

如果屏小,那么就显示List,这时我们修改Grid为左边*,右边auto,然后把我们Grid,有Frame,修改为左边,这样我们右边就没有,左边有List和Grid

如果我们HasFrame,还记得hasFrame在哪?就是我们Frame存在内容就是true,那么我们把Frame的ZIndex>List的ZIndex,我们就显示Frame,如果我们按返回,那么把List的ZIndex大于Frame

可以看到我们需要设置一个ZIndex就好

我们就在界面变化,和点击后悔,点击列表,使用判断,我们判断写成一个函数,函数判断现在窗口,判断HasFrame,很简单。

如果看不懂我上面说的,可以看我代码https://github.com/lindexi/UWP/tree/master/uwp/src/DetailMaster

我们开始的大屏幕是使用Grid有分开,左边列表,右边Content,其中Content是Frame,用到页面导航。

如果屏幕小,那么使用List和Content放在同一个Grid,依靠Zindex显示,如果是需要显示列表就列表的ZIndex大,需要显示内容,就把内容的ZIndex大。

我们需要判断我们是否点击了List和用户是否点了返回键,一旦按返回键,我们显示列表,当然在我们屏幕大,可以不做什么,如果屏幕小,就需要设置ZIndex。

那么我们在界面变化的是否,是否知道我们显示内容还是显示列表,这时就是我们得HasFrame,依靠这个选择ZIndex

修改我代码

现在需要说下,如何修改我的代码,作为你需要。

一般可以自己写一个,不过通过修改我的代码会让你更加理解

首先我们需要Model,这是你自己定义的,随便写

然后打开ViewModel,我们里面关键的有ObservableCollection的,这是列表。

MasterClick里面把跳转换为你需要的。

BackRequested是返回,按返回键,我们现在简单使用界面的,不使用硬件,如果需要硬件其实简单。

界面开始的Image可以换为你需要的,然后其他的可以选择不修改。

很简单使用。

源码

接着我们来说下我源代码怎么做。

我首先新建 Model,放下随意的类,作为显示的内容,然后在ViewModel使用ObservableCollection,当然给他的也是随意的

在界面我们需要Grid,这时我绑定了GridLength,设置这个简单。

如果需要auto,简单 GridLength.Auto,如果需要1*,可以new GridLength(1, GridUnitType.Star);就是这样,开始是左边Auto,右边1*,MasterGrid就是列表啦,这个不想说

我绑定是用x:Bind,要OneWay

我写 List 需要使用 Grid 控制他的位置和背景,因为 List 背景透明,其实我在 List 也可以用背景,但是我想我会在 List 做弹出,最后想着用 Grid

 <Grid
Background="White"
Canvas.ZIndex="{x:Bind View.ZListView,Mode=OneWay}">

在List

            <Grid Grid.Column="{x:Bind View.GridInt,Mode=OneWay}"
Canvas.ZIndex="{x:Bind View.ZFrame,Mode=OneWay}">

我们需要做一点修改,在我们的内容没有,我们是不需要返回键的,那么这时的返回键可以作为按两次退出,这个可以看 http://blog.csdn.net/xuzhongxuan/article/details/49962705,实际就是写一个字段存储来判断在一段时间是否点击两次。

如果我们按返回,但是我们撸了一半,假如我们是页面跳转,不使用我源码,那么加上 NavigationCacheMode ,保存页面,这样不会让页面现在的选择重新

左右的列表和内容的相互操作

如果需要使用左右两边相互操作,一般建议使用 MVVM 然后绑定 ViewModel ,通过 ViewModel 可以直接操作两边,因为 ViewModel 知道左右的数据。这也是我建议的。

关于 MVVM 可以看这个博客 http://lindexi.oschina.io/lindexi//post/win10-uwp-MVVM%E5%85%A5%E9%97%A8/

下面说下English,其实是Google翻译,因为我这个遇到一个用英文问我的人,不知道是不是,反正就直接翻译

English

I make a Easy MasterDetail to use.It's very easy,and I has not yet been see the other easier that it.

In big screen and the widescreen,we have a Grid with two columns.And the left is list and the right is content.

The content is an Image and a Frame.If not content,show Image,else show content.

In narrowscreen,we make the list and content in a col.If has content ,the content's Zindex is greater than the list.And if click the backButton ,the List's zindex is greater than content.

We make the list's background white,so if the list zindex is grerater than content and we can't see content.

We have bool value is hasFrame ,if we has content ,it is true,else false.In the windows be narrow ,if the hasFrame==true ,we make Content's zindex greater than list.

We can change the model for your class and write ObservableCollection.In MasterClick ,we can make Navigate.

If something perplexes you,mailto lindexi_gd@163.com.

2018-2-13-win10-uwp-简单MasterDetail的更多相关文章

  1. win10 uwp 简单MasterDetail

    中文 English 本文主要讲实现一个简单的界面,可以在窗口比较大显示列表和内容,窗口比较小时候显示列表或内容.也就是在窗口比较小的时候,点击列表会显示内容,点击返回会显示列表. 先放图,很简单. ...

  2. win10 uwp 使用 Microsoft.Graph 发送邮件

    在 2018 年 10 月 13 号参加了 张队长 的 Office 365 训练营 学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...

  3. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  4. Win10 UWP开发系列:实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  5. Win10 UWP开发实现Bing翻译

    微软在WP上的发展从原来的Win7到Win8,Win8.1,到现在的Win10 UWP,什么是UWP,UWP即Windows 10 中的Universal Windows Platform简称.即Wi ...

  6. 【Win10 UWP】后台任务与动态磁贴

    动态磁贴(Live Tile)是WP系统的大亮点之一,一直以来受到广大用户的喜爱.这一讲主要研究如何在UWP应用里通过后台任务添加和使用动态磁贴功能. 从WP7到Win8,再到Win10 UWP,磁贴 ...

  7. 【Win10 UWP】URI Scheme(一):Windows Store协议的解析和使用

    协议是Windows Phone和Windows Store应用的一个重要特点,可以做到在不同应用之间进行互相呼起调用.小小协议,学问大着呢.我打算写几篇关于协议在UWP中使用的文章. 这一讲的主要对 ...

  8. 【Win10 UWP】QQ SDK(二):SDK的回调处理

    上一讲,我们介绍了QQ SDK的使用方法,请看<[Win10 UWP]QQ SDK(一):SDK基本使用方法> 一. 回调的基本形式 从前面的介绍中我们知道,我们的应用和QQ客户端之间需要 ...

  9. win10 UWP GET Post

    win10 应用应该是要有访问网络,网络现在最多的是使用GET,Post,简单的使用,可以用网络的数据:获得博客的访问量. 在使用网络,我们需要设置Package.appxmanifest 网络请求使 ...

  10. win10 uwp 列表模板选择器

    本文主要讲ListView等列表可以根据内容不同,使用不同模板的列表模板选择器,DataTemplateSelector. 如果在 UWP 需要定义某些列的显示和其他列不同,或者某些行的显示和其他行不 ...

随机推荐

  1. 通过反射获取方法的参数名称(JDK8以上支持)

    方法的参数名,在很多时候我们是需要反射得到的.但是在java8之前,代码编译为class文件后,方法参数的类型是固定的,但参数名称却丢失了,这和动态语言严重依赖参数名称形成了鲜明对比.(java是静态 ...

  2. java.util.Date 与 java.sql.Date 相关知识点解析

    问:java.sql.Date 和 java.util.Date 有什么区别?   答:这两个类的区别是 java.sql.Date是针对 SQL 语句使用的,它只包含日期而没有时间部分,一般在读写数 ...

  3. Java第二阶段之常用类

    包装类缓存-128到127之间的数字(系统初始的时候就创建了,当我们调用ValueOf时,首先检查是否在范围内,在则直接取用)integer in1 = integer.valueOf(-128):i ...

  4. JavaWeb(四):JDBC

    数据持久化(persistence) 把数据保存到可掉电式存储设备中以供之后使用. 大多数情况下,特别是企业级应用,数据持久化意味着将内存中的数据保存到硬盘上加以”固化”,而持久化的实现过程大多通过各 ...

  5. 170817关于JSON知识点

    1.  JSON                [1] JSON简介                         JSON全称 JavaScript Object Notation         ...

  6. 金山云无法ping通外网

    解决方法:在网络安全组中放行ping端口.

  7. selenium自动化测试之【数据驱动测试】

    数据驱动测试是自动化测试的主流设计模式之一,相同的测试脚本使用不同的测试数据来执行,测试数据和测试行为进行了完全的分离,这样的测试脚本设计模式称为数据驱动.实施数据驱动测试的步骤:1.编写测试脚本,脚 ...

  8. JDBC常用接口、类介绍

    JDBC常用接口.类介绍 JDBC提供对独立于数据库统一的API,用以执行SQL命令.API常用的类.接口如下: DriverManager 管理JDBC驱动的服务类,主要通过它获取Connectio ...

  9. 《JAVA设计模式》之迭代器模式(Iterator)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述迭代子(Iterator)模式的: 迭代子模式又叫游标(Cursor)模式,是对象的行为模式.迭代子模式可以顺序地访问一个聚集中的元素而不 ...

  10. instanceof 和isinstance的区别

    class A {} class B extends A {} class C extends A {} public class Test { public static void main(Str ...