聊聊大麦网UWP版的首页顶部图片联动效果的实现方法
2015-08-27 19:56
411 查看
随着Windows10的发布,国内已经有越来越多的厂商上架了自家的通用应用程序客户端,比如QQ、微博、大麦等。所实话,他们设计的确实很好,很符合Windows10 的设计风格和产品理念,而对于开发者而言,当我们发现一个不错的UI设计风格不禁想自己动手也写一个类似的效果玩玩。前几天在微软的开发者社区中逛的时候,看见有人问大麦网的UWP版首页顶部是如何实现的,于是自己就好奇的安装了一下,想看看是什么效果。效果图如下所示:
小白们有没有感觉有一种高大上的感觉呢?(当然我也是一个小白啦!!!!大牛勿喷!!)。。反正我感觉挺好看的,于是“就怪我喽!!!”地自己动手尝试去实现一下。记住:条条大路通罗马。对于开发这种事情来说,每个人都可以有自己的解决方案,只要能达到需求就是正确的!!!我现在分享一份我自己的设计方案来供新手朋友们学习借鉴。
首先,你可以使用3个FlipView控件来进行图片展示,如果仔细看的话,会发现左右两侧的布局有一种类似黑色的渐变色,所有我们可以把左右两侧的FlipView分别放到两个Grid中,然后将Grid中的背景色用黑色渐变的颜色来填充,具体的XAML代码如下所示:
其次,我们需要在对应的后台代码中为页面添加图片数据,你可以在页面的构造函数中添加,也可以在页面的Loaded事件中添加都是可以的,具体就要看你的需求了,我这里就直接加到页面的构造函数中。此外,你还要需要注意的是要保证这三个区域中的图片都不是相同的,这样我们可以利用FlipView对应的SelectedIndex属性来进行设置,具体代码你可以这样写:
到目前为止,我们已经可以成功的将图片显示在界面上,但这是静态的,我们需要让它每隔一段时间进行翻动(我设置的是3秒一次,你随意),展示下一张,所以我们需要使用定时器来进行图片的定时轮番播放,示例代码如下所示:
代码写到这了,你或许很激动的运行一下你的程序看一下效果,但是你会发现一个很尴尬的事情:我们要求这三种图片始终不一样,但是当我们人为地去改变中间的FlipView的选中项的话,总会有图片显示的是一样的,这并不是我们想要的效果。所以我们需要解决它,你可以有很多方法来解决它,我这里是用中间区域的FlipView对应的SelectionChanged事件来监听三张图片是否一样,如果一样的话,我让左侧的FlipView选中项是中间区域FlipView选中项-1;右侧的的FlipView选中项是中间区域FlipView选中项+1;人为地去改变左右两侧的图片。我是这样处理的:
写到这,再运行一下你程序,看看效果,是不是和大麦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 = 0; this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - 1; this.fvRight.SelectedIndex = this.fvCenter.SelectedIndex + 1; }
到目前为止,我们已经可以成功的将图片显示在界面上,但这是静态的,我们需要让它每隔一段时间进行翻动(我设置的是3秒一次,你随意),展示下一张,所以我们需要使用定时器来进行图片的定时轮番播放,示例代码如下所示:
protected override void OnNavigatedTo(NavigationEventArgs e) { DispatcherTimer timer = new DispatcherTimer(); timer.Interval = new System.TimeSpan(0, 0, 3); timer.Tick += (sender, args) => { this.fvCenter.SelectedIndex = this.fvCenter.SelectedIndex < this.fvCenter.Items.Count - 1 ? ++this.fvCenter.SelectedIndex : 0; }; timer.Start(); }
代码写到这了,你或许很激动的运行一下你的程序看一下效果,但是你会发现一个很尴尬的事情:我们要求这三种图片始终不一样,但是当我们人为地去改变中间的FlipView的选中项的话,总会有图片显示的是一样的,这并不是我们想要的效果。所以我们需要解决它,你可以有很多方法来解决它,我这里是用中间区域的FlipView对应的SelectionChanged事件来监听三张图片是否一样,如果一样的话,我让左侧的FlipView选中项是中间区域FlipView选中项-1;右侧的的FlipView选中项是中间区域FlipView选中项+1;人为地去改变左右两侧的图片。我是这样处理的:
private void fvCenter_SelectionChanged(object sender, SelectionChangedEventArgs e) { if (this.fvCenter.SelectedIndex == 0) { this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - 1; this.fvRight.SelectedIndex = 1; } else if (this.fvCenter.SelectedIndex == 1) { this.fvLeft.SelectedIndex = 0; this.fvRight.SelectedIndex = this.fvRight.Items.Count - 1; } else if (this.fvCenter.SelectedIndex == this.fvCenter.Items.Count - 1) { this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - 2; this.fvRight.SelectedIndex = 0; } else if ((this.fvCenter.SelectedIndex < (this.fvCenter.Items.Count - 1)) && this.fvCenter.SelectedIndex > -1) { this.fvLeft.SelectedIndex = this.fvCenter.SelectedIndex - 1; this.fvRight.SelectedIndex = this.fvCenter.SelectedIndex + 1; } else { return; } Debug.Write(this.fvLeft.SelectedIndex); }
写到这,再运行一下你程序,看看效果,是不是和大麦UWP版的首页顶部显示效果已经一个样儿了,希望如此!!!!
示例代码:赶紧点我呀!!!
相关文章推荐
- Android的启动模式(上)
- MySQL数据库自带备份与恢复工具:MySQLdump.exe与mysql.exe
- c++函数的返回值
- linux用户及组管理基础
- 【转】为何浮点数可能丢失精度
- 管理时间的七个好习惯
- php fpm start.sh
- asp 数据库 模块化 - 思路是没一个页面有一个自己的数据类 这里用nPath表示
- 子序列(uva- 10340)
- 游标用法
- [Leetcode] Decode Ways
- Nginx安装
- android学习——MeasureSpec介绍及使用
- VC按钮自绘的简单实现
- 美食屋-ios 项目
- git初识,菜鸟, 入门,备忘
- 第五章 随机事件及其概率
- NSDate NSString 转换
- C#【oledbConnection】
- CentOS7设置IP地址