windows phone制作引导页

适用于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:跳转到某个页面
                //保存一个值到独立存储，下次启动就不要new这个实例
            };
            flip.Show(LayoutRoot);

　　

所有源代码在开头已经放出下载地址了

WP8.1自带有FlipView用法大同小异，下次再补充，先看世界杯去咯