FlipView和自定义值转换器

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

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

完整的xaml代码如下：

[html] view plaincopy

<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，然后将图片添加进去。

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

[csharp] view plaincopy

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文件用来存储人物姓名和图片路径：

[csharp] view plaincopy

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文件里进行如下修改： [csharp] view plaincopy

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页面设置一下显示的内容：

[html] view plaincopy

<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来判断是否展现图片。

[csharp] view plaincopy

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。

[csharp] view plaincopy

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界面中继续设置一下：

[html] view plaincopy

<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了。

总结

以上是生活随笔为你收集整理的FlipView和自定义值转换器的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。