分享大麥UWP版本開發歷程-01.響應式輪播頂部焦點圖

    話說有一天，臨近下班無心工作，在網上看各種文章，閱讀到了一篇名為《聊聊大麥網UWP版的首頁頂部圖片聯動效果的實現方法》（傳遞：http://www.cnblogs.com/hippieZhou/p/4755290.html），看到別人評論自己做的產品，頓時來了興趣，閱讀過後，hippieZhou童鞋基本把這個自動輪播控制項的原理精髓都講到了，我就在這裡，順著Zhou同學的文章，接著分享一下更細節一點的東西。

    今天要跟大家分享的，就是這個簡單的控制項，在響應式佈局裡面做的工作。其中有用過微軟提供的XAML觸發器，也用過土辦法，監聽Size_Changed事件，林林總總的，感覺處理這個響應式佈局，比做後臺邏輯費得時間和精力更大。總結下來，兩種方式都可以達到最終的效果，使用觸發器，在XAML裡面，代碼少，而且直接操作控制項狀態，比較贊。但是因為這個控制項在縮放過程中涉及到的東西太多，而且需要某些複雜計算，最終權衡下，這個控制項還是使用了傳統的Size_Changed事件，後臺對界面進行操控。

    大麥UWP這個輪播控制項，在大屏幕（我以後管寬度大於768的，叫大屏幕）的時候，儘可能的去按照比例，最清晰的去展示焦點廣告。在中等屏幕（寬度小於768並且大於480）時，隨著窗體的變化，保證中間焦點廣告顯示內容，顯示比例不變的前提，壓縮或者展開兩側的輪播廣告。在小屏幕（屏幕寬度小於480）時，隱藏兩側輪播圖，根據當前窗體寬度，按照圖片原有比例縮放中央輪播圖，效果如下圖展示。

看看代碼前臺代碼，其實非常簡單，就是之前Zhou同學說的，總共三個FilpView，以及兩側覆蓋上去的漸變色。這裡需要註意的是，因為要手動控製圖片的縮放，所以Stretch都是None

<UserControl
    x:Class="Damai.Windows10.App.AutoRollBannerView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Damai.Windows10.App"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="360"
    d:DesignWidth="1200">

    <RelativePanel x:Name="layoutRoot" SizeChanged="layoutRoot_SizeChanged">

        <Grid x:Name="gridLeftImage" Width="1">

            <FlipView x:Name="flipPre" BorderThickness="0" ItemsSource="{Binding}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Path=Pic}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None"/>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#99000000" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>

        <Grid x:Name="gridCenterImage" RelativePanel.RightOf="gridLeftImage">
            <FlipView x:Name="flipCenter" BorderThickness="0" ItemsSource="{Binding}" SelectionChanged="flipCenter_SelectionChanged">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Path=Pic}" ImageOpened="ImageCenter_ImageOpened" ImageFailed="ImageCenter_ImageFailed" HorizontalAlignment="Left" VerticalAlignment="Top" Tapped="Image_Tapped"/>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

            <!--導航-->
            <StackPanel x:Name="stackPanelIndex" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,14,14"/>

            <Grid x:Name="gridNoData" Background="#D2D2D2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Image x:Name="ImageNoData" Source="/Assets/Images/Search/pic_Search_NoData.png" Width="100" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>
        </Grid>

        <Grid x:Name="gridRightImage" RelativePanel.RightOf="gridCenterImage">

            <FlipView x:Name="flipNext" BorderThickness="0" ItemsSource="{Binding}" IsEnabled="False">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image Source="{Binding Path=Pic}" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None"/>

                            <Rectangle>
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                        <GradientStop Color="#FF000000" Offset="1"/>
                                        <GradientStop Color="#99000000"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>

                            </Rectangle>
                        </Grid>

                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>


        </Grid>

    </RelativePanel>

</UserControl>

後臺代碼，如何定時滾動等等，請參看之前Zhou同學的文章即可，這裡不再贅述，唯一做的就是製作了一個私有方法，在控制項的SizeChanged時，還有初始化的時候，調用了一次

 private void Refresh(double width)
        {
            if (this.DataSource == null || _init == false)
            {
                flipCenter.Width = width;
                return;
            }

            if (width <= _imageWidth)
            {
                flipCenter.Height = this.ActualWidth / _scale;
            }
            else
            {
                flipCenter.Height = _imageWidth / _scale;
            }

            double leftWidth = width >= _imageWidth ? (double)(width - _imageWidth) / 2.0 : 0;
            gridLeftImage.Width = leftWidth;
            gridLeftImage.Height = flipCenter.Height;

            gridRightImage.Width = leftWidth;
            gridRightImage.Height = flipCenter.Height;
        }

這樣，大麥UWP客戶端的頂部輪播焦點圖，就基本完成了。

後面我會儘力去把自己開發過程中遇到過的問題，以及解決方法記錄下來，與大家一一分享，儘量不挖坑，謝謝大家。