新建一个项目叫做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了。