聊聊大麥網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版的首頁頂部顯示效果已經一個樣兒了，但願如此！！！！

示例代碼：趕忙點我呀！！！