聊聊大麦网UWP版的首页顶部图片联动效果的实现方法

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

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

 

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

 

 1  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 2         <Grid Height="260" VerticalAlignment="Top">
 3             <Grid.ColumnDefinitions>
 4                 <ColumnDefinition Width="*"/>
 5                 <ColumnDefinition Width="790"/>
 6                 <ColumnDefinition Width="*"/>
 7             </Grid.ColumnDefinitions>
 8             <!--左-->
 9             <Grid Grid.Column="0">
10                 <Grid.Background>
11                     <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
12                         <GradientStopCollection>
13                             <GradientStop Offset="0.8" Color="Black"/>
14                             <GradientStop Offset="1" Color="Gray"/>
15                         </GradientStopCollection>
16                     </LinearGradientBrush>
17                 </Grid.Background>
18                 <FlipView x:Name="fvLeft" Opacity="0.5" IsEnabled="False">
19                     <FlipView.ItemTemplate>
20                         <DataTemplate>
21                             <Image Source="{Binding}" Stretch="None"/>
22                         </DataTemplate>
23                     </FlipView.ItemTemplate>
24                 </FlipView>
25             </Grid>
26             
27             <!--中-->
28             <FlipView x:Name="fvCenter" Grid.Column="1" >
29                 <FlipView.ItemTemplate>
30                     <DataTemplate>
31                         <Image Source="{Binding}"  Stretch="None"/>
32                     </DataTemplate>
33                 </FlipView.ItemTemplate>
34             </FlipView>
35             
36             <!--右-->
37             <Grid Grid.Column="2">
38                 <Grid.Background>
39                     <LinearGradientBrush StartPoint="1,0.5" EndPoint="0,0.5">
40                         <GradientStopCollection>
41                             <GradientStop Offset="0.8" Color="Black"/>
42                             <GradientStop Offset="1" Color="Gray"/>
43                         </GradientStopCollection>
44                     </LinearGradientBrush>
45                 </Grid.Background>
46                 <FlipView x:Name="fvRight" Opacity="0.3" IsEnabled="False">
47                     <FlipView.ItemTemplate>
48                         <DataTemplate>
49                             <Image Source="{Binding}"  Stretch="None"/>
50                         </DataTemplate>
51                     </FlipView.ItemTemplate>
52                 </FlipView>
53             </Grid>
54 
55         </Grid>
56 
57     </Grid>

 

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

 1         public MainPage()
 2         {
 3             this.InitializeComponent();
 4             this.fvLeft.ItemsSource = this.fvCenter.ItemsSource = this.fvRight.ItemsSource = new ObservableCollection<BitmapImage>()
 5             {
 6                 new BitmapImage(new System.Uri("ms-appx:///Images/00.png",System.UriKind.RelativeOrAbsolute)),
 7                 new BitmapImage(new System.Uri("ms-appx:///Images/01.png",System.UriKind.RelativeOrAbsolute)),
 8                 new BitmapImage(new System.Uri("ms-appx:///Images/02.png",System.UriKind.RelativeOrAbsolute))
 9             };
10             this.fvCenter.SelectedIndex = 0;
11             this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - 1;
12             this.fvRight.SelectedIndex = this.fvCenter.SelectedIndex + 1;
13         }

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

 1         protected override void OnNavigatedTo(NavigationEventArgs e)
 2         {
 3             DispatcherTimer timer = new DispatcherTimer();
 4             timer.Interval = new System.TimeSpan(0, 0, 3);
 5             timer.Tick += (sender, args) =>
 6             {
 7                 this.fvCenter.SelectedIndex = this.fvCenter.SelectedIndex < this.fvCenter.Items.Count - 1 ? ++this.fvCenter.SelectedIndex : 0;
 8             };
 9             timer.Start();
10         }

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

 1         private void fvCenter_SelectionChanged(object sender, SelectionChangedEventArgs e)
 2         {
 3             if (this.fvCenter.SelectedIndex == 0)
 4             {
 5                 this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - 1;
 6                 this.fvRight.SelectedIndex = 1;
 7             }
 8             else if (this.fvCenter.SelectedIndex == 1)
 9             {
10                 this.fvLeft.SelectedIndex = 0;
11                 this.fvRight.SelectedIndex = this.fvRight.Items.Count - 1;
12             }
13             else if (this.fvCenter.SelectedIndex == this.fvCenter.Items.Count - 1)
14             {
15                 this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - 2;
16                 this.fvRight.SelectedIndex = 0;
17             }
18             else if ((this.fvCenter.SelectedIndex < (this.fvCenter.Items.Count - 1)) && this.fvCenter.SelectedIndex > -1)
19             {
20                 this.fvLeft.SelectedIndex = this.fvCenter.SelectedIndex - 1;
21                 this.fvRight.SelectedIndex = this.fvCenter.SelectedIndex + 1;
22             }
23             else
24             {
25                 return;
26             }
27             Debug.Write(this.fvLeft.SelectedIndex);
28         }

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

示例代码：赶紧点我呀！！！