随着Windows10的发布,国内已经有越来越多的厂商上架了自家的通用应用程序客户端,比如QQ、微博、大麦等。所实话,他们设计的确实很好,很符合Windows10 的设计风格和产品理念,而对于开发者而言,当我们发现一个不错的UI设计风格不禁想自己动手也写一个类似的效果玩玩。前几天在微软的开发者社区中逛的时候,看见有人问大麦网的UWP版首页顶部是如何实现的,于是自己就好奇的安装了一下,想看看是什么效果。效果图如下所示:

小白们有没有感觉有一种高大上的感觉呢?(当然我也是一个小白啦!!!!大牛勿喷!!)。。反正我感觉挺好看的,于是“就怪我喽!!!”地自己动手尝试去实现一下。记住:条条大路通罗马。对于开发这种事情来说,每个人都可以有自己的解决方案,只要能达到需求就是正确的!!!我现在分享一份我自己的设计方案来供新手朋友们学习借鉴。

首先,你可以使用3个FlipView控件来进行图片展示,如果仔细看的话,会发现左右两侧的布局有一种类似黑色的渐变色,所有我们可以把左右两侧的FlipView分别放到两个Grid中,然后将Grid中的背景色用黑色渐变的颜色来填充,具体的XAML代码如下所示:

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Height="260" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="790"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--左-->
<Grid Grid.Column="0">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStopCollection>
<GradientStop Offset="0.8" Color="Black"/>
<GradientStop Offset="1" Color="Gray"/>
</GradientStopCollection>
</LinearGradientBrush>
</Grid.Background>
<FlipView x:Name="fvLeft" Opacity="0.5" IsEnabled="False">
<FlipView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Stretch="None"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid> <!--中-->
<FlipView x:Name="fvCenter" Grid.Column="1" >
<FlipView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Stretch="None"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView> <!--右-->
<Grid Grid.Column="2">
<Grid.Background>
<LinearGradientBrush StartPoint="1,0.5" EndPoint="0,0.5">
<GradientStopCollection>
<GradientStop Offset="0.8" Color="Black"/>
<GradientStop Offset="1" Color="Gray"/>
</GradientStopCollection>
</LinearGradientBrush>
</Grid.Background>
<FlipView x:Name="fvRight" Opacity="0.3" IsEnabled="False">
<FlipView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Stretch="None"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid> </Grid> </Grid>

其次,我们需要在对应的后台代码中为页面添加图片数据,你可以在页面的构造函数中添加,也可以在页面的Loaded事件中添加都是可以的,具体就要看你的需求了,我这里就直接加到页面的构造函数中。此外,你还要需要注意的是要保证这三个区域中的图片都不是相同的,这样我们可以利用FlipView对应的SelectedIndex属性来进行设置,具体代码你可以这样写:

         public MainPage()
{
this.InitializeComponent();
this.fvLeft.ItemsSource = this.fvCenter.ItemsSource = this.fvRight.ItemsSource = new ObservableCollection<BitmapImage>()
{
new BitmapImage(new System.Uri("ms-appx:///Images/00.png",System.UriKind.RelativeOrAbsolute)),
new BitmapImage(new System.Uri("ms-appx:///Images/01.png",System.UriKind.RelativeOrAbsolute)),
new BitmapImage(new System.Uri("ms-appx:///Images/02.png",System.UriKind.RelativeOrAbsolute))
};
this.fvCenter.SelectedIndex = ;
this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - ;
this.fvRight.SelectedIndex = this.fvCenter.SelectedIndex + ;
}

到目前为止,我们已经可以成功的将图片显示在界面上,但这是静态的,我们需要让它每隔一段时间进行翻动(我设置的是3秒一次,你随意),展示下一张,所以我们需要使用定时器来进行图片的定时轮番播放,示例代码如下所示:

         protected override void OnNavigatedTo(NavigationEventArgs e)
{
DispatcherTimer timer = new DispatcherTimer();
timer.Interval = new System.TimeSpan(, , );
timer.Tick += (sender, args) =>
{
this.fvCenter.SelectedIndex = this.fvCenter.SelectedIndex < this.fvCenter.Items.Count - ? ++this.fvCenter.SelectedIndex : ;
};
timer.Start();
}

代码写到这了,你或许很激动的运行一下你的程序看一下效果,但是你会发现一个很尴尬的事情:我们要求这三种图片始终不一样,但是当我们人为地去改变中间的FlipView的选中项的话,总会有图片显示的是一样的,这并不是我们想要的效果。所以我们需要解决它,你可以有很多方法来解决它,我这里是用中间区域的FlipView对应的SelectionChanged事件来监听三张图片是否一样,如果一样的话,我让左侧的FlipView选中项是中间区域FlipView选中项-1;右侧的的FlipView选中项是中间区域FlipView选中项+1;人为地去改变左右两侧的图片。我是这样处理的:

         private void fvCenter_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (this.fvCenter.SelectedIndex == )
{
this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - ;
this.fvRight.SelectedIndex = ;
}
else if (this.fvCenter.SelectedIndex == )
{
this.fvLeft.SelectedIndex = ;
this.fvRight.SelectedIndex = this.fvRight.Items.Count - ;
}
else if (this.fvCenter.SelectedIndex == this.fvCenter.Items.Count - )
{
this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - ;
this.fvRight.SelectedIndex = ;
}
else if ((this.fvCenter.SelectedIndex < (this.fvCenter.Items.Count - )) && this.fvCenter.SelectedIndex > -)
{
this.fvLeft.SelectedIndex = this.fvCenter.SelectedIndex - ;
this.fvRight.SelectedIndex = this.fvCenter.SelectedIndex + ;
}
else
{
return;
}
Debug.Write(this.fvLeft.SelectedIndex);
}

写到这,再运行一下你程序,看看效果,是不是和大麦UWP版的首页顶部显示效果已经一个样儿了,希望如此!!!!

示例代码:赶紧点我呀!!!

聊聊大麦网UWP版的首页顶部图片联动效果的实现方法的更多相关文章

  1. 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)

    ),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...

  2. 【完全开源】知乎日报UWP版(上篇):界面设计、官方API分析

    目录 说明 使用Fiddler分析android版API 部分效果图 关于源码 说明 在做博客园UWP版的时候其实就有做知乎日报的打算了,前段时间一直出差,在酒店里用Fiddler简单的分析了一下An ...

  3. Python selenium 实现大麦网自动购票过程

    一些无关紧要的哔哔: 大麦网是中国综合类现场娱乐票务营销平台,业务覆盖演唱会. 话剧.音乐剧.体育赛事等领域今天,我们要用代码来实现他的购票过程 开搞! 先来看看完成后的效果是怎么样的 开发环境 版 ...

  4. 新浪微博UWP版-实现‘分享功能’的艰难路

    索引 介绍 遇到的问题 寻求帮助 最终的解决方案 最终效果 介绍 在整个Team的共同努力下,在众多WPer的期待下,Weibo UWP版终于正式发布了.有关Weibo UWP版更多的信息请大家参考这 ...

  5. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  6. 必应词典UWP版-开发小结

    摘要 必应词典UWP版已经上线2周了!相信有不少用户都已经体验过了吧!得益于Win10全新.强大的API,新版词典在性能上.UI体验上都有了大幅的提升,今天,小编就为大家讲讲必应词典UWP开发的故事. ...

  7. 安卓项目开发实战(1)--首页顶部菜单BAR实现

    从今天開始,我将開始自己手写一个星座运势的项目,星座运势的数据来源採用MYAPI的星座数据,client全然自己实现. 这个系列主要是讲project中主要界面的布局展示和一些项目中的难点解析.因为本 ...

  8. 《芒果TV》UWP版利用Windows10通用平台特性,率先支持Xbox One平台

    在Windows开发者中心开放提交Xbox平台应用之后,<芒果TV>UWP版迅速更新v3.1.2版,通过升级兼容目标,利用Windows10通用平台特性,率先覆盖Xbox平台用户. 芒果T ...

  9. Win10商店芒果TV UWP版更新,新增后台视频下载

    湖南卫视旗下唯一官方视频平台<芒果TV>近日向Win10商店提交了芒果TV UWP V3.0.0版,这次为广大Win10平台用户带来了期待已久的重大功能和更新,可谓是良心厂商,值得鼓励和支 ...

随机推荐

  1. Real World Parsec --- 一个简便易学的 解释器

    学习链接如下: http://bms.tratao.com/desktop/doc/0c3802e4ee404a71407f34996eff98ef 另外的解析器 ANTLR,学过一阵子,比较难,没应 ...

  2. 【BZOJ4025】 二分图(线段树分治)

    传送门 BZOJ Solution 只是为了学习一下线段树分治的啦! 当你学会线段树分治之后,可以跳过下面的一部分: 按照时间搞一颗线段树出来,把包含这段区间的操作用vector压进去. 每一个线段树 ...

  3. 前端自动化部署方案-实践(配合shell)

    以下实例项目为vue项目,其他项目当然也雷同咯 在项目中建一个这个么脚本文件 不说了,上代码 #!/bin/sh handle=$1; env=$2; # 远程部署机 webhook # 如果用远程机 ...

  4. 使用Swagger 搭建高可读性ASP.Net WebApi文档

    一.前言 在最近一个商城项目中,使用WebApi搭建API项目.但开发过程中,前后端工程师对于沟通接口的使用,是非常耗时的.之前也有用过Swagger构建WebApi文档,但是API文档的可读性并不高 ...

  5. javascript 异步解析

    js 异步解析 一 .js单线程分析 我们都知道js的一大特点是单线程,也就是同一时间点,只能处理一件事,一句js代码.那为什么js要设计成单线程而不是多线程呢?这主要和js的用途有关,js作为浏览器 ...

  6. redis lru实现策略

    转载自http://blog.chinaunix.net/uid-20708886-id-5753422.html 在使用redis作为缓存的场景下,内存淘汰策略决定的redis的内存使用效率.在大部 ...

  7. iOS-实现后台长时间运行

    前言 一般APP在按下Home键被挂起后,这时APP的 backgroundTimeRemaining 也就是后台运行时间大约只有3分钟,如果在退出APP后,过十几二十二分钟或者更长时间再回到APP, ...

  8. vue elementui 引入第三方icon iconfront

    elementui框架自带icon在开发大型前端应用时显得捉襟见肘.淘宝开源的iconfront的图标库上有很多优秀的icon图标.elementui支持整合iconfront到应用中,步骤如下: 首 ...

  9. Pycharm 连接Linux 远程开发

    Pycharm 连接Linux 远程开发 在Liunx上安装python3.6(Ubuntu16) 下载Python-3.6.4.tgz 解压 tar -xzvf Python-3.6.4.tgz 进 ...

  10. [Objective-C语言教程]快速枚举(35)

    快速枚举是Objective-C的功能,用于枚举集合. 因此,要了解快速枚举,首先需要了解集合,这将在下一节中进行说明. 1. Objective-C集合 集合是基本结构.它用于保存和管理其他对象. ...