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

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

接下来到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
{
    /// 
    /// 可用于自身或导航至 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页面设置一下显示的内容:



    
        
            
                
                    
                        
                            
                            
                        
                        
                        
                    
                
            
        
    


便可以看到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界面中继续设置一下:



    
        
    
    
    
        
            
                
                    
                        
                            
                            
                        
                        
                        
                    
                
            
        
    


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

你可能感兴趣的:([Win8]Windows8开发笔记(十):FlipView和自定义值转换器)