windows phone制作引导页
时间：2014-07-06 16:34:41
收藏：0
阅读：445
适用于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用法大同小异，下次再补充，先看世界杯去咯
评论（0）