生活随笔
收集整理的這篇文章主要介紹了
FlipView和自定义值转换器
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
新建一個(gè)項(xiàng)目叫做TestFlip，拖動(dòng)一個(gè)FlipView到MainPage.xaml上面。
和前面說(shuō)到的控件ListView一樣，我們可以在代碼中設(shè)置FlipView控件的元素格式和內(nèi)容。
完整的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>??
接下來(lái)跳轉(zhuǎn)到后臺(tái)的代碼處進(jìn)行設(shè)置。
先將幾張圖片添加到項(xiàng)目中。新建一個(gè)文件夾：Images，然后將圖片添加進(jìn)去。
然后在后臺(tái)代碼里添加字符串?dāng)?shù)組用來(lái)存儲(chǔ)這些圖片的路徑。
[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;????????namespace?TestFlip??{????????????????????????public?sealed?partial?class?MainPage?:?Page??????{??????????public?MainPage()??????????{??????????????this.InitializeComponent();??????????}??????????????????????????????????????????????????????????????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中會(huì)顯示相應(yīng)的路徑，并且有按鈕可以切換。
接下來(lái)我們要把這些圖片在FlipView中顯示出來(lái)。
新建一個(gè)類(lèi)叫做Person.cs文件用來(lái)存儲(chǔ)人物姓名和圖片路徑：
[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;??????}??}??
接下來(lái)到MainPage.xaml.cs文件里進(jìn)行如下修改：
[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;????????namespace?TestFlip??{????????????????????????public?sealed?partial?class?MainPage?:?Page??????{??????????public?MainPage()??????????{??????????????this.InitializeComponent();??????????}??????????????????????????????????????????????????????????????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頁(yè)面設(shè)置一下顯示的內(nèi)容：
[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的效果了：
但是有一個(gè)問(wèn)題，比如一個(gè)TextBox的Text可以顯示int類(lèi)型的Age數(shù)值，一個(gè)Image的ImageSource屬性也可以用一個(gè)string來(lái)賦值，
但是如果是一個(gè)bool類(lèi)型的值，想綁定在Visibility屬性（枚舉）上怎么辦呢？
這時(shí)我們需要做一個(gè)數(shù)據(jù)轉(zhuǎn)換。
我們?cè)赑erson類(lèi)里面添加一個(gè)屬性：ShowImage來(lái)判斷是否展現(xiàn)圖片。
[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;??????}??}??
此時(shí)如果直接將其綁定到image的Visibility上是不可以的，因?yàn)閂isibility是枚舉類(lèi)型：
這個(gè)時(shí)候我們就需要一個(gè)轉(zhuǎn)換器。
xx-xx轉(zhuǎn)換器，也就是Model-UI的轉(zhuǎn)換。
新建一個(gè)類(lèi)，命名為：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)??????????{????????????????????????????bool?b?=?(bool)value;??????????????return?b???Visibility.Visible?:?Visibility.Collapsed;??????????}????????????public?object?ConvertBack(object?value,?Type?targetType,?object?parameter,?string?language)??????????{????????????????????????????Visibility?v?=?(Visibility)value;??????????????return?v?==?Visibility.Visible;??????????}??????}??}??
接下來(lái)到xaml界面中繼續(xù)設(shè)置一下：
[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>??
這樣就可以實(shí)現(xiàn)用bool值控制Visibility了。
總結(jié)
以上是生活随笔為你收集整理的FlipView和自定义值转换器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
