日期:2014-05-16  浏览次数:21036 次

[Win8]Windows8开发笔记(十):FlipView和自定义值转换器

新建一个项目叫做TestFlip,拖动一个FlipView到MainPage.xaml上面。

和前面说到的控件ListView一样,我们可以在代码中设置FlipView控件的元素格式和内容。

完整的xaml代码如下:

<Page
    x:Class="TestFlip.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestFlip"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <FlipView x:Name="myFlip" HorizontalAlignment="Center" VerticalAlignment="Center" Width="600" Height="400">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>
</Page>


接下来跳转到后台的代码处进行设置。

先将几张图片添加到项目中。新建一个文件夹:Images,然后将图片添加进去。


然后在后台代码里添加字符串数组用来存储这些图片的路径。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍

namespace TestFlip
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此页将要在 Frame 中显示时进行调用。
        /// </summary>
        /// <param name="e">描述如何访问此页的事件数据。Parameter
        /// 属性通常用于配置页。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (e.NavigationMode == NavigationMode.New)
            {
                string[] myString = new string[] { 
                    "ms-appx:///Images/1.jpg",
                    "ms-appx:///Images/2.jpg",
                    "ms-appx:///Images/3.jpg",
                    "ms-appx:///Images/4.jpg",
                    "ms-appx:///Images/5.jpg",
                    "ms-appx:///Images/6.jpg",
                };

                myFlip.ItemsSource = myString;
            }

        }
    }
}

这样可以看到在FlipView中会显示相应的路径,并且有按钮可以切换。

接下来我们要把这些图片在FlipView中显示出来。

新建一个类叫做Person.cs文件用来存储人物姓名和图片路径:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;