新建一个项目叫做TestFlip,拖动一个FlipView到MainPage.xaml上面。
和前面说到的控件ListView一样,我们可以在代码中设置FlipView控件的元素格式和内容。
完整的xaml代码如下:
接下来跳转到后台的代码处进行设置。
先将几张图片添加到项目中。新建一个文件夹: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
{
///
/// 可用于自身或导航至 Frame 内部的空白页。
///
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
///
/// 在此页将要在 Frame 中显示时进行调用。
///
/// 描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。
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;
}
}
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
{
///
/// 可用于自身或导航至 Frame 内部的空白页。
///
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
///
/// 在此页将要在 Frame 中显示时进行调用。
///
/// 描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.NavigationMode == NavigationMode.New)
{
List people = new List();
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页面设置一下显示的内容:
但是有一个问题,比如一个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;
}
}
这个时候我们就需要一个转换器。
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界面中继续设置一下: