Silverlight for Windows Phone 7的Pivot、Panorama控件是一个类似于Android应用程序列表中可以翻页控件,具有如下特点
1.简单的XAML和编程接口
2.完全支持数据绑定、内容模板属性和项目容器样式
3.内置黑、白两种皮肤样式
4.内置触控导航,可以让用户快速滑动控件并定位到指定的项
5.在页面或内容项导航滑动时,提供漂亮的过渡动画
6.强大的可扩展性,用户可通过事件、可视化状态和重新定义模板的方式扩展功能。
今天这一讲是Pivot的如何使用
一、新建项目
1.新建项目有两种方法
如图1、图2
图1
图2
如果使用图2新建项目,那么它会自动生成Pivot的项目模板,如下图,这样就简化了我们的步骤。本人建议使用这种新建项目的方法。
图3
图4
2.在本讲中介绍的是图1的新建项目过程
从工具箱中拖Pivot控件到视图工作区,在本例中一共有四页,第一页是一个ListBox控件,第二页是一个Ellipse控件,第三页是一个多行文本区域控件(TextBlock),第四页是一个具有动画效果的文本,我们可以通过左右滑动来进行换页
<controls:Pivot Title="Pivot演示" x:Name="pivot">
<controls:PivotItem Header="ListBox">
<ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontFamily="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
<system:String>Arial</system:String>
<system:String>Arial Black</system:String>
<system:String>Calibri</system:String>
<system:String>Comic Sans MS</system:String>
<system:String>Courier New</system:String>
<system:String>Georgia</system:String>
<system:String>Lucida Sans Unicode</system:String>
<system:String>Portable User Interface</system:String>
<system:String>Segoe WP</system:String>
<system:String>Segoe WP Black</system:String>
<system:String>Segoe WP Bold</system:String>
<system:String>Segoe WP Light</system:String>
<system:String>Segoe WP Semibold</system:String>
<system:String>Segoe WP SemiLight</system:String>
<system:String>Tahoma</system:String>
<system:String>Times New Roman</system:String>
<system:String>Trebuchet MS</system:String>
<system:String>Verdana</system:String>
<system:String>Webdings</system:String>
</ListBox>
</controls:PivotItem>
<controls:PivotItem Header="Ellipse">
<Ellipse>
<Ellipse.Fill>
<LinearGradientBrush>
<GradientStop Offset="0" Color="{StaticResource PhoneAccentColor}" />
<GradientStop Offset="0.5" Color="{StaticResource PhoneBackgroundColor}" />
<GradientStop Offset="1" Color="{StaticResource PhoneForegroundColor}" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</controls:PivotItem>
<controls:PivotItem Header="TextBlock">
<ScrollViewer>
<TextBlock TextWrapping="Wrap">
For a long time I used to go to bed early. Sometimes, when I had put out
my candle, my eyes would close so quickly that I had not even time to
say "I'm going to sleep." And half an hour later the thought that it was
time to go to sleep would awaken me; I would try to put away the book
which, I imagined, was still in my hands, and to blow out the light; I
had been thinking all the time, while I was asleep, of what I had just
been reading, but my thoughts had run into a channel of their own,
until I myself seemed actually to have become the subject of my book:
a church, a quartet, the rivalry between François I and Charles V. This
impression would persist for some moments after I was awake; it did not
disturb my mind, but it lay like scales upon my eyes and prevented them
from registering the fact that the candle was no longer burning. Then
it would begin to seem unintelligible, as the thoughts of a former
existence must be to a reincarnate spirit; the subject of my book would
separate itself from me, leaving me free to choose whether I would form
part of it or no; and at the same time my sight would return and I
would be astonished to find myself in a state of darkness, pleasant and
restful enough for the eyes, and even more, perhaps, for my mind, to
which it appeared incomprehensible, without a cause, a matter dark
indeed.
</TextBlock>
</ScrollViewer>
</controls:PivotItem>
<controls:PivotItem Header="Animation">
<TextBlock Text="Hello, Windows Phone 7!"
HorizontalAlignment="Left"
VerticalAlignment="Top"
RenderTransformOrigin="0.5 0.5">
<TextBlock.RenderTransform>
<CompositeTransform x:Name="xform" />
</TextBlock.RenderTransform>
</TextBlock>
<controls:PivotItem.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="xform"
Storyboard.TargetProperty="Rotation"
From="0" To="360" Duration="0:0:3"
RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="xform"
Storyboard.TargetProperty="TranslateX"
From="0" To="300" Duration="0:0:5"
AutoReverse="True"
RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="xform"
Storyboard.TargetProperty="TranslateY"
From="0" To="600" Duration="0:0:7"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</controls:PivotItem.Triggers>
</controls:PivotItem>
</controls:Pivot>
效果如图
3.数据绑定
数据源类
public static class Datas
{
public static List<string> GetDatas()
{
List<string> list = new List<string>();
list.Add("salam");
list.Add("Aiming Zhang");
return list;
}
}
绑定数据
this.pivot.ItemsSource = Datas.GetDatas();
效果如下
二、重要属性和方法
1.说明
Pivot为应用程序管理视图导航提供了一个快速的路径,它可以用作一个过滤大集合或切换俩个视图的导航接口。
1.重要属性
HeaderTemplate:获取或设置PivotItem的子集(children)的Header
SelectedIndex:获取或设置被选中的PivotItem的索引
SelectedItem:获取或设置被选中的PivotItem
Title:获取或设置Pivot的标题
2.重要方法
protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e):当Pivot的Items集合改变时,通知Pivot更新Items的Header。
protected virtual void OnLoadedPivotItem(PivotItem item):重载通知当一个Item被加载。
protected virtual void OnSelectionChanged(SelectionChangedEventArgs e):响应Pivot改变选中项
protected virtual void OnUnloadedPivotItem(PivotItemEventArgs e):Item卸载时发生
protected override void PrepareContainerForItemOverride(DependencyObject element, object item):准备container显示指定的项。
protected virtual void UpdateItemVisibility(UIElement element, bool toVisible):显示或隐藏指定的项Item。