聊聊大麥網UWP版的首頁頂部圖片聯動效果的實現方法

隨着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 = 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版的首頁頂部顯示效果已經一個樣兒了，希望如此！！！！

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