随着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. AJAX笔记整理

    AJAX: Asynchronous JavaScript and XML,异步的Javascirpt和Xml. Asynchronous:异步 与之对应的是 synchronous:同步,我们要知道 ...

  2. [转]决策树在Kaldi中如何使用

    转自:http://blog.csdn.net/chenhoujiangsir/article/details/51613144 说明:本文是kaldi主页相关内容的翻译(http://kaldi-a ...

  3. document.domain实现不同域名跨域

    利用document.domain 实现跨域:前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域. 两个子域名:aaa.xxx ...

  4. Spring boot 参数相关注解

    最近使用swagger的在线文档调试接口时发现老是报参数问题,最后发现是方法中参数上的注解有问题,今天把填的坑做一下总结. 1. RequestParam 该注解有两个属性: name/value:表 ...

  5. Ajax 的学习

    (一)基础知识和新的概念      1,AJAX 就是浏览器提供的一套 API,可以通过 JavaScript 调用,从而实现通过代码控制请求与响应.实现 网络编程.   2,AJAX(Asynchr ...

  6. 使用pyenv来管理python版本

    使用pyenv可以很方便的切换python版本,而不会影响系统的python版本,对需要使用supervisor(仅支持python2)托管程序,项目使用python3开发的情况十分有用 pyenv的 ...

  7. 【2019北京集训测试赛(十三)】数据(sj) 冷静分析

    题目大意:给你一个代表区间$[1,n]$的线段树,问你随机访问区间$[1,n]$中的一个子区间,覆盖到的线段树节点个数的期望(需要乘上$\frac{n(n-1)}{2}$后输出). 数据范围:$n≤1 ...

  8. 13-02 Java 数组高级算法,Arrays类

    冒泡排序 冒泡排序原理 冒泡排序代码: package cn.itcast_01; /* * 数组排序之冒泡排序: * 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处 */ pub ...

  9. odoo开发笔记 -- 字段增加唯一约束

    前台违反约束效果: 后台模型中定义代码: name = fields.Char(string="Name", copy=False) # 流水号 _sql_constraints ...

  10. Python获取网页指定内容(BeautifulSoup工具的使用方法)

    Python用做数据处理还是相当不错的,如果你想要做爬虫,Python是很好的选择,它有很多已经写好的类包,只要调用,即可完成很多复杂的功能,此文中所有的功能都是基于BeautifulSoup这个包. ...