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