windows phone滑动显示图片

问题：最近在做一个WP项目。现在有这么一个功能：
1.获取服务器的图片，将它们显示出来。
2.手机每屏显示一张，左右滑动可以显示下一张或上一张。
大概的效果如下图：

解决思路： 先解决布局和显示问题，网络获取数据暂时未实现。这里面要实现屏幕左右滑动的切换效果，还要动态的绑定数据，很适合用WP里的Pivot（枢纽视图管理布局)来实现。可以把图片放在PivotItem的Content中。xaml代码如下：

         <!--图片开始-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="1,0,1,0">
            <phone:Pivot Name="mainPivot" Title="" 
                    ItemTemplate="{StaticResource PivotItem}" 
                    HeaderTemplate="{StaticResource Header}"
                    >
            </phone:Pivot>
        </Grid>
        <!--图片结束-->

这里因为需要动态的绑定数据，所以Pivot 自定义了HeaderTemplate和ItemTemplate的模板，这是样式模板。他们定义在ViewModel中，如下所示：

<phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="PivotItem">
            <Grid>
                <Image Height="600"  Source ="{Binding Uri}"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="Header">
            <TextBlock Text="" Height="1" FontSize ="0.5"/>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

这里将PivotItem里面添加Imaga控件，绑定Model即ImageEntity类中的Uri属性；将Pivot 的HeaderTemplate，即即用一个TextBlock 来当标题，将其设置为空白，接下来就是后台代码。

        public MainPage()
        {
            InitializeComponent();
            this.mainPivot.ItemsSource = arrayFeed;//为mainPivot指定数据源
        }
        private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {
            AddDataText();
        }
        //数据源
        ObservableCollection<ImageEntity> arrayFeed = new ObservableCollection<ImageEntity>();
        //添加数据
        private void AddDataText()
        {
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th0.png" });//图片已经添加在程序中
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th1.png" });
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th2.png" });
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th3.png" });
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th4.png" });
        }

这样，图片就可以在屏幕中滑动显示了。效果如下：

但是这里发现Pivot的滑动，当其到最后一张时，它会循环到第一张，这不是我想要的效果，网上查询一番，解决如下。
（1）数据源添加数据是，将集合头和尾的两个实体的Uri设为空。

   private void AddDataText()
        {
            arrayFeed.Add(new ImageEntity() { Uri = "" });
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th0.png" });//图片已经添加在程序中
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th1.png" });
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th2.png" });
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th3.png" });
            arrayFeed.Add(new ImageEntity() { Uri = "/Image/th4.png" });
            arrayFeed.Add(new ImageEntity() { Uri = "" });
            //this.ImageNum = 5;
          //  addColumn();
        }

（2）为mainPivot添加一个SelectionChanged事件，当滑动时，检查是否是第一个Item或者最好一个Item，第一个则显示第一张图片,最后一个则显示最后一张图片，xmal如下：

<phone:Pivot Name="mainPivot" Title="" SelectionChanged="pivot2_SelectionChanged"
                    ItemTemplate="{StaticResource PivotItem}" 
                    HeaderTemplate="{StaticResource Header}"
                    ItemsSource="{Binding BindData}">
            </phone:Pivot>

cs代码如下：

  /// <summary>
        ///滑动显示的界面操作
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pivot2_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (mainPivot.SelectedIndex == 0)
            {
                Dispatcher.BeginInvoke(() =>
                {
                    mainPivot.SelectedIndex = 1;
                });
            }
            else if (mainPivot.SelectedIndex == (mainPivot.Items.Count - 1))
            {
                Dispatcher.BeginInvoke(() =>
                {
                    mainPivot.SelectedIndex = (mainPivot.Items.Count - 2);
                });
            }
        }

这里就解决了它显示的循环问题。
对了这里是Moedel

 class ImageEntity
    {
        public string Uri { get; set; }
    }

接下来就是图片先得标示问题了。这个问题的解决办法很简单，就是用一个StackPanel就可以实现了。上码上码：
xmal代码：

       <Grid  Grid.Row="2">
           <Grid.Background>
                    <ImageBrush  ImageSource="/Image/bottom_bg.png"/>
            </Grid.Background>
            <StackPanel VerticalAlignment="Center" x:Name="bottomPanel" Orientation="Horizontal">
            </StackPanel>
        </Grid>

cs代码：

/// <summary>
        /// 记录加载的图片数量
        /// </summary>
       private  int ImageNum = 0;
        /// <summary>
        /// 设置底部圆圈个数
        /// </summary>
        /// <param name="columnNum"></param>
        private void addColumn( )
        {
            int width = 480 / ImageNum;
            for (int i = 0; i < ImageNum; i++)
            {
                Image image1 = new Image();
                image1.Width = width;
                image1.Height = 60;
                image1.Name = "ShowImageNum" + (i + 1);
                image1.Source = new BitmapImage(new Uri("/Image/circle_unclick.png", UriKind.Relative));
                bottomPanel.Children.Add(image1);
            }
        }

效果如下：

然后就是它得与对滑动事件一起改变了。cs代码如下：

 /// <summary>
        ///滑动显示的界面操作
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pivot2_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (mainPivot.SelectedIndex == 0)
            {
                Dispatcher.BeginInvoke(() =>
                {
                    mainPivot.SelectedIndex = 1;
                    Image image = bottomPanel.FindName("ShowImageNum" + mainPivot.SelectedIndex) as Image;
                   image.Source = new BitmapImage(new Uri("/Image/circle_click.png", UriKind.Relative));
                });
            }
            else if (mainPivot.SelectedIndex == (mainPivot.Items.Count - 1))
            {
                Dispatcher.BeginInvoke(() =>
                {
                    mainPivot.SelectedIndex = (mainPivot.Items.Count - 2);
                   Image image = bottomPanel.FindName("ShowImageNum" + mainPivot.SelectedIndex) as Image;
                   image.Source = new BitmapImage(new Uri("/Image/circle_click.png", UriKind.Relative));
                });
            }
            else
            {
                for (int i = 1; i <= ImageNum; i++)
                {
                    Image image1 = bottomPanel.FindName("ShowImageNum" + i) as Image;
                    image1.Source = new BitmapImage(new Uri("/Image/circle_unclick.png", UriKind.Relative));
                }
                Image image = bottomPanel.FindName("ShowImageNum" + mainPivot.SelectedIndex) as Image;
                image.Source = new BitmapImage(new Uri("/Image/circle_click.png", UriKind.Relative));
            }
        }

效果：

到这里就结束了，联网获取图片，这里不实现了，网上有的。
下载源码。
第一次写博客，也是第一次接触WP，如果有错误的地方，欢迎指出，若大神们有其他的方法来实现，希望能分享分享。