[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;

namespace TestFlip
{
class Person : INotifyPropertyChanged
{
private string _name;

public string Name
{
get
{
return _name;
}

set
{
_name = value;
FirePropertyChanged("Name");
}
}

private string _imgPath;

public string ImgPath
{
get
{
return _imgPath;
}

set
{
_imgPath = value;
FirePropertyChanged("ImgPath");
}
}

private void FirePropertyChanged(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}

public event PropertyChangedEventHandler PropertyChanged;
}
}

接下来到MainPage.xaml.cs文件里进行如下修改：

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)
{
List<Person> people = new List<Person>();
people.Add(new Person() { Name = "Why1", ImgPath = "ms-appx:///Images/1.jpg" });
people.Add(new Person() { Name = "Why2", ImgPath = "ms-appx:///Images/2.jpg" });
people.Add(new Person() { Name = "Why3", ImgPath = "ms-appx:///Images/3.jpg" });
people.Add(new Person() { Name = "Why4", ImgPath = "ms-appx:///Images/4.jpg" });
people.Add(new Person() { Name = "Why5", ImgPath = "ms-appx:///Images/5.jpg" });

myFlip.ItemsSource = people;
}

}
}
}

最后到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>
<Grid Background="DarkGray">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Name}" FontSize="40" TextAlignment="Center"></TextBlock>
<Image Source="{Binding ImagePath}" Grid.Row="1"></Image>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
</Page>

便可以看到FlipView的效果了：



但是有一个问题，比如一个TextBox的Text可以显示int类型的Age数值，一个Image的ImageSource属性也可以用一个string来赋值，

但是如果是一个bool类型的值，想绑定在Visibility属性（枚举）上怎么办呢？

这时我们需要做一个数据转换。

我们在Person类里面添加一个属性：ShowImage来判断是否展现图片。

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

namespace TestFlip
{
class Person : INotifyPropertyChanged
{
private string _name;
public string Name
{
get
{
return _name;
}

set
{
_name = value;
FirePropertyChanged("Name");
}
}

private string _imagePath;
public string ImagePath
{
get
{
return _imagePath;
}

set
{
_imagePath = value;
FirePropertyChanged("ImgPath");
}
}

private bool _showImage;
public bool ShowImage
{
get
{
return _showImage;
}

set
{
_showImage = value;
FirePropertyChanged("ShowImage");
}
}

private void FirePropertyChanged(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}

public event PropertyChangedEventHandler PropertyChanged;
}
}

此时如果直接将其绑定到image的Visibility上是不可以的，因为Visibility是枚举类型：



这个时候我们就需要一个转换器。

xx-xx转换器，也就是Model-UI的转换。

新建一个类，命名为：BoolVisibilityConverter.cs。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;

namespace TestFlip
{
class BoolVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
//value是model中的数据，返回值是转换后UI中的数据
bool b = (bool)value;
return b ? Visibility.Visible : Visibility.Collapsed;
}

public object ConvertBack(object value, Type targetType, object parameter, string language)
{
//TwoWay绑定
Visibility v = (Visibility)value;
return v == Visibility.Visible;
}
}
}

接下来到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">

<Page.Resources>
<local:BoolVisibilityConverter x:Key="BoolVisibilityConverter" />
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<FlipView x:Name="myFlip" HorizontalAlignment="Center" VerticalAlignment="Center" Width="600" Height="400">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid Background="DarkGray">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Name}" FontSize="40" TextAlignment="Center"></TextBlock>
<Image Source="{Binding ImagePath}" Visibility="{Binding ShowImage,Converter={StaticResource BoolVisibilityConverter}}" Grid.Row="1"></Image>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
</Page>

这样就可以实现用bool值控制Visibility了。