在新闻类的APP中，有一个经常使用的场景：左右滑动屏幕来切换上一条或下一条新闻。
那么通常我们该使用哪种方式去实现呢？可以参考一下Demo的实现步骤。
1，添加Windows Phone用户自定义控件。例如：
这里我为了演示的方便，添加了5个用户自定义控件，通常我们在做应用的时候，只需要添加一个用户自定义控件，结合数据绑定，来承载不同新闻内容。
演示的自定义控件XAML代码也比较简单：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<
UserControl
x:Class
=
"PageSliding.WindowsPhoneControl1"
xmlns
=
"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d
=
"http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc
=
"http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable
=
"d"
FontFamily
=
"{StaticResource PhoneFontFamilyNormal}"
FontSize
=
"{StaticResource PhoneFontSizeNormal}"
Foreground
=
"{StaticResource PhoneForegroundBrush}"
d:DesignHeight
=
"480"
d:DesignWidth
=
"480"
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"Red"
>
<
TextBlock
Text
=
"用户空间1"
/>
</
Grid
>
</
UserControl
>
|
这里我只将背景颜色进行了修改和添加了一个TextBlock控件，来区别我添加的5个用户自定义控件。
2，切换到内容页面的XAML页面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<
phone:PhoneApplicationPage
x:Class
=
"PageSliding.Solution2"
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: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
=
"True"
Loaded
=
"PhoneApplicationPage_Loaded_1"
>
<!--LayoutRoot 是包含所有页面内容的根网格-->
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"Transparent"
>
<!--ContentPanel - 在此处放置其他内容-->
<
Grid
x:Name
=
"ContentPanel"
Grid.Row
=
"1"
Margin
=
"12,0,12,0"
ManipulationDelta
=
"ContentPanel_ManipulationDelta_1"
ManipulationCompleted
=
"ContentPanel_ManipulationCompleted_1"
>
<
Grid.RenderTransform
>
<
CompositeTransform
x:Name
=
"transform"
/>
</
Grid.RenderTransform
>
</
Grid
>
</
Grid
>
</
phone:PhoneApplicationPage
>
|
添加ManipulationDelta和ManipulationCompleted事件，以及添加Grid的CompositeTransform对象。
3，切换到相应.cs页面。例如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
public
partial
class
Solution2 : PhoneApplicationPage
{
List<UserControl> UserControlList;
//当前集合的显示项的索引
int
index = 0;
public
Solution2()
{
InitializeComponent();
//Demo:直接实例化UserControl的集合。
UserControlList =
new
List<UserControl>(){
new
WindowsPhoneControl1(),
new
WindowsPhoneControl2(),
new
WindowsPhoneControl3(),
new
WindowsPhoneControl4(),
new
WindowsPhoneControl5()
};
}
private
void
PhoneApplicationPage_Loaded_1(
object
sender, RoutedEventArgs e)
{
//Demo:首次加载集合的第一项
this
.ContentPanel.Children.Add(UserControlList[0]);
}
private
void
ContentPanel_ManipulationDelta_1(
object
sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
//页面ContentPanel容器只能左右拖动不能上下拖动。
transform.TranslateX += e.DeltaManipulation.Translation.X;
transform.TranslateY = 0;
}
private
void
ContentPanel_ManipulationCompleted_1(
object
sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
//ContentPanel容器总转换的线性运动的X坐标值〉=100
if
(e.TotalManipulation.Translation.X >= 100)
{
//加载前一项
if
(
this
.index == 0)
{
MessageBox.Show(
"当前为第一项"
);
}
else
{
index -= 1;
//加载前一条数据
this
.ContentPanel.Children.Clear();
this
.ContentPanel.Children.Add(UserControlList[index]);
}
}
//ContentPanel容器总转换的线性运动的X坐标值〈=-100
else
if
(e.TotalManipulation.Translation.X <= -100)
{
//加载后一项
if
(
this
.index==4)
{
MessageBox.Show(
"当前为最后一项"
);
}
else
{
index += 1;
//加载后一条数据
this
.ContentPanel.Children.Clear();
this
.ContentPanel.Children.Add(UserControlList[index]);
}
}
//切换之后恢复ContentPanel容器的X偏移量.
transform.TranslateX = 0;
}
}
|
通过以上的操作，我们就可以左右滑动切换刚才定义的5个不同用户自定义控件了。
另外我们也可以参考该文章：windows phone开发学习--自己实现一个Gallery control 该文章的实现方式主要是一次加载3个不同的用户控件，通过左右滑动来加载3个不同的用户自定义控件。
本文转自 王祖康 51CTO博客，原文链接：http://blog.51cto.com/wzk89/1209320，如需转载请自行联系原作者
