windows phone製作引導頁

標籤：style   blog   http   color   使用   檔案   

適用於WP7 WP8+

源碼下載擼這裡

製作動畫gif小軟體下載

小技巧

①圖片是純色背景：將版面設定跟圖片背景一樣顏色

②圖片是漸層or其他，切圖時候：單獨切背景（版面設定這個為背景）跟圖片裡面元素（透明背景）

 

 

1、Pivot控制項（代碼在下載包裡面）

先看效果

毫無疑問，圖片過度之間動畫效果太差，不能滿足哥要求。。。

 

2、panroma也稱為全景控制項（代碼在下載包裡面）

 

相比pivot控制項 圖片切換之間有縫串連，給人感覺不會有那麼空虛。可惜啟動有個動畫效果，因為這點哥把它拋棄了。

（找了大半天也沒有辦法將頁面啟動效果去掉，那位大牛知道不妨告訴小弟）

 

3、WPToolkit裡面FlipView控制項

地址下載：https://github.com/Kinnara/WPToolkit

因為一個小功能，引用整個dll，你覺得有必要嗎？當然你沒時間折騰，可以直接引用過來。

哥可能閑的蛋疼，今天花了一點點時間將裡面FlipView控制項提取出來

 

第一步：先拷貝整個FlipView，產生一下，看一下報錯，把其他類也複製過來。

第二步：樣式拷貝，WPToolkit所有樣式都放在Themes/generic.xaml這個檔案裡面，按下Ctrl+F 輸入FlipView看看有那些樣式全部拷貝過來

（注意：樣式必須放在你自己項目這個目錄下Themes/generic.xaml，程式才能自動調用）

 如果不是這個目錄，請手動引用這個樣式

第三步：

建立一個Demo測試

<phone:PhoneApplicationPage    x:Class="Test.FlipViewTest"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"     xmlns:local="clr-namespace:Microsoft.Phone.Controls;assembly=LYL.Control.FlipView"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="Portrait" Orientation="Portrait"    mc:Ignorable="d"    shell:SystemTray.IsVisible="False">    <!--LayoutRoot 是包含所有頁面內容的根網格-->    <Grid x:Name="LayoutRoot" Background="#E3DFDC">        <local:FlipView>            <local:FlipViewItem>                <Image  Source="/Images/01.jpg"/>            </local:FlipViewItem>            <local:FlipViewItem>                <Image  Source="/Images/02.jpg"/>            </local:FlipViewItem>            <local:FlipViewItem>                <Image  Source="/Images/03.jpg"/>            </local:FlipViewItem>            <local:FlipViewItem>                <Image  Source="/Images/04.jpg"/>            </local:FlipViewItem>            <local:FlipViewItem>                <Border Margin="0,0,0,0" Height="800" Width="480">                    <Border.Background>                        <ImageBrush ImageSource="/Images/05.jpg" />                    </Border.Background>                    <Image Source="/Images/startbutton.png" Width="200" Margin="0,590,0,0" />                </Border>            </local:FlipViewItem>        </local:FlipView>    </Grid></phone:PhoneApplicationPage>

到這裡真的沒問題，當然不是了。這裡還要進一步封裝以便下次直接調用

直接上代碼，哥就不羅嗦

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows;using System.Windows.Controls;using System.Windows.Markup;using System.Windows.Media.Imaging;namespace Microsoft.Phone.Controls{    public class FlipViewHelper    {        /// <summary>        /// 資料來源        /// </summary>        public List<FlipViewModel> Data { get; set; }        /// <summary>        /// 最後一張圖片的開始體驗按鈕        /// </summary>        public string StartSource { get; set; }        public Action FlipLastClick;        public void Show(Panel el)        {            var flip = new FlipView();            for (int i = 0; i < Data.Count; i++)            {                var xml =                 " <Border xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"  xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" Margin=\"0,0,0,0\" Height=\"800\" Width=\"480\">"                    + "<Border.Background>"                        + "<ImageBrush ImageSource=\"{0}\" />"                    + "</Border.Background>"                    // + " <Image Source=\"{4}\" Width=\"{1}\"  Margin=\"0,{2},0,0\" Visibility=\"{3}\" />"                + " </Border>";                xml = string.Format(xml, Data[i].ImageSource);                var border = XamlReader.Load(xml) as Border;                if (border != null && i == Data.Count - 1)                {                    BitmapImage bit = new BitmapImage();                    bit.UriSource = new Uri(StartSource, UriKind.Relative);                    var image = new Image                    {                        Source = bit,                        Width = Data[i].StartWidth,                        Margin = new Thickness(0, Data[i].StartMarginTop, 0, 0),                    };                    //開始體驗按鈕點擊事件                    image.Tag += (s1, e1) =>                    {                        if (FlipLastClick != null)                        {                            FlipLastClick();                        }                    };                    border.Child = image;                }                var item = new FlipViewItem();                item.Content = border;                flip.Items.Add(item);            }            el.Children.Add(flip);        }    }    public class FlipViewModel    {        public string ImageSource { get; set; }        private int _startWidth = 200;        public int StartWidth        {            get { return _startWidth; }            set { _startWidth = value; }        }        private double _startMarginTop = 590;        public double StartMarginTop        {            get { return _startMarginTop; }            set { _startMarginTop = value; }        }    }}

 

使用： 引用DLL，http://files.cnblogs.com/walleyekneel/LYL.Control.FlipView.rar

            var flip = new FlipViewHelper();            flip.Data = new List<FlipViewModel>             {               new FlipViewModel{ ImageSource="/Images/01.jpg"},               new FlipViewModel{ ImageSource="/Images/02.jpg"},               new FlipViewModel{ ImageSource="/Images/03.jpg"},               new FlipViewModel{ ImageSource="/Images/04.jpg"},               new FlipViewModel{ ImageSource="/Images/05.jpg"},            };            flip.StartSource = "/Images/startbutton.png";            flip.FlipLastClick += () =>            {                //TODO:跳轉到某個頁面                //儲存一個值到隔離儲存區 (Isolated Storage)，下次啟動就不要new這個執行個體            };            flip.Show(LayoutRoot);

　　

所有原始碼在開頭已經放出了

WP8.1內建有FlipView用法大同小異，下次再補充，先看世界盃去咯