Windows Phone 7Silverlight控件之--Panorama

　Silverlight for Windows Phone 7的Pivot、Panorama控件是一个类似于Android应用程序列表中可以翻页控件，具有如下特点

　　　　1.简单的XAML和编程接口

　　　　2.完全支持数据绑定、内容模板属性和项目容器样式

　　　　3.内置黑、白两种皮肤样式

　　　　4.内置触控导航，可以让用户快速滑动控件并定位到指定的项

　　　　5.在页面或内容项导航滑动时，提供漂亮的过渡动画

　　　　6.强大的可扩展性，用户可通过事件、可视化状态和重新定义模板的方式扩展功能。

　　　　今天这一讲是Panorama的如何使用

一、重要属性和方法

1.说明　　

　　Panorama提供了可以创建翻页的全景视图。

2.重要属性　　

　　public object DefaultItem：获取或设置Panorama的默认Item

　　SelectedIndex：获取或设置被选中的PanoramaItem的索引

　　SelectedItem：获取或设置被选中的PanoramatItem

　　Title：获取或设置Panorama的标题

3.重要方法

protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e)：当Panorama的Items集合改变时，通知Panorama更新Items的Header。

二、应用

　　1.新建项目

　　图1和图2两种方法

图1

图2

使用图2方法新建后VS将自动产生Panorama项目模板，这种方法比较简单。如下图

图3

2.图1步骤

从工具箱中拖Panorama控件到视图工作区，在本例中一共有四页，第一页是一个ListBox控件，第二页是一个Ellipse控件，第三页是一个多行文本区域控件（TextBlock），第四页是一个具有动画效果的文本，我们可以通过左右滑动来进行换页，大家或许已经看出它和Pivot的差别，在一页中它可以看到部分属于第二页的东东，而且它的标题Title横跨整个Panorama布局

   <controls:Panorama Title="panorama 演示" x:Name="panorama">
                <controls:PanoramaItem 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:PanoramaItem>

                <controls:PanoramaItem 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:PanoramaItem>

                <controls:PanoramaItem 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:PanoramaItem>

                <controls:PanoramaItem 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:PanoramaItem.Triggers>
                        <EventTrigger>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="xform"
                                             Storyboard.TargetProperty="Rotation"
                                             From="0" To="360" Duration="0:0:3"
                                             RepeatBehavior="Forever" />

效果如图

3.数据绑定

1）数据源类Datas.cs

    public static class Datas
    {
        public static List<string> GetDatas()
        {
            List<string> list = new List<string>();
            list.Add("salam");
            list.Add("Aiming Zhang");
            return list;
        }
    }

2）MainPage.cs

public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            this.panorama.ItemsSource = Datas.GetDatas();
        }
    }

效果如图