您的位置：首页 > 移动开发

Windows Store apps开发[41]FlipView控件的介绍和使用

2012-10-21 13:44 513 查看

注：本文由BeyondVincent(破船)原创首发

转载请注明出处：BeyondVincent(破船)@DevDiv.com

更多内容请查看下面的帖子

[DevDiv原创]Windows
8 开发Step by Step

1、FlipView控件介绍

FliView控件用来显示集合中的items，用户可以按顺序(往前或往后)的翻转这些item。如下图所示。

FlipView的继承关系如下图

2、FlipView控件的使用

0）程序的一个草图设计。

如下图。3个区域，左上角用来显示图片，右上角显示图片介绍，底部显示图片的缩略，起到浏览进度的作用。

1)简单的类图

2）创建工程

打开VS->文件->新建->项目->选择BlankApp(XAML)

3）数据准备

在工程中添加一个ImageData.cs文件，里面对item进行了定义（ImageData类），代码如下：

public class ImageData
{
    public string Name { get; set; }

    public string Description { get; set; }

    public string ImagePath { get; set; }

    public ImageData(string name , string imagePath, string description)
    {
        Name = name;
        Description = description;
        ImagePath = imagePath;
    }
}

再添加一个MainPageViewModel.cs文件，里面定义很简单，就是一个List数据，用来存储将要在界面显示的数据。代码如下：

注意：里面的数据是为了演示用的，真实的项目中，可能是从数据库、或者网络中获得的。

class MainPageViewModel
{
    public List<ImageData> itemsList { get; set; }

    public MainPageViewModel()
    {
        itemsList = new List<ImageData>();
        itemsList.Add(new ImageData("冬季", "image/1.jpg", "我在等待\n落雪的声音（1）"));
        itemsList.Add(new ImageData("冬季", "image/2.jpg", "我在等待\n落雪的声音（2）"));
        itemsList.Add(new ImageData("冬季", "image/3.jpg", "我在等待\n落雪的声音（3）"));
        itemsList.Add(new ImageData("冬季", "image/4.jpg", "我在等待\n落雪的声音（4）"));
        itemsList.Add(new ImageData("冬季", "image/5.jpg", "我在等待\n落雪的声音（5）"));
        itemsList.Add(new ImageData("冬季", "image/6.jpg", "我在等待\n落雪的声音（6）"));
        itemsList.Add(new ImageData("冬季", "image/7.jpg", "我在等待\n落雪的声音（7）"));
        itemsList.Add(new ImageData("冬季", "image/8.jpg", "我在等待\n落雪的声音（8）"));
        itemsList.Add(new ImageData("冬季", "image/9.jpg", "我在等待\n落雪的声音（9）"));
        itemsList.Add(new ImageData("冬季", "image/10.jpg", "我在等待\n落雪的声音（10）"));
        itemsList.Add(new ImageData("冬季", "image/11.jpg", "我在等待\n落雪的声音（11）"));
        itemsList.Add(new ImageData("冬季", "image/12.jpg", "我在等待\n落雪的声音（12）"));
        itemsList.Add(new ImageData("冬季", "image/13.jpg", "我在等待\n落雪的声音（13）"));
        itemsList.Add(new ImageData("冬季", "image/14.jpg", "我在等待\n落雪的声音（14）"));
        itemsList.Add(new ImageData("DevDiv", "image/15.png", "移动开发尽在\nDevDiv.com"));
    }
}

4）界面编写

数据准备好了，下面就是界面的编写，根据上面的草图，我们的代码分布是这样的：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
        <FlipView>
		<!--在这里处理左上和右上部分画面-->
        </FlipView>
    <GridView>
		<!--在这里处理底部的画面-->
    </GridView>
</Grid>

详细代码请参看后面给出的代码示例。
在这里要讲解的一个内容是：底部的GridView与FlipView的SelectedIndex是双向绑定的，这样就可以做到选中项的同步。