UWP的Converter妙用

  MVVM模式的使用,简化了UWP应用的开发,使层次更加分明。在写xaml的时候,有些小技术还是很实用的;比如Converter,字面上理解是转换器,那它到底是转换什么的?接触过的可能知道它起的是类型转换的作用,当你绑定的数据是一堆字母,显示时却想将它变成汉字,一种做法可以在数据绑定前将这些数据转换成需要的文字,另一种做法就是使用Converter。它有两个好处:1,保持原始数据的完整性,不破坏原有数据结构。2,可以复用,别的地方需要直接将这个Converter拿过去就行。

  先展示xaml代码,简单的一个例子,数据源给的是F(Famale)和M(Male),页面展示将它转换成男女显示。需要注意的是Converter是一个.CS文件,在页面的资源中声明后才可以使用。

 1 <Page
 2     x:Class="ConverterDemo.MainPage"
 3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 5     xmlns:local="using:ConverterDemo"
 6     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 7     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 8     mc:Ignorable="d">
 9 
10     <Page.Resources>
11         <ResourceDictionary>
12             <local:SexConverter x:Key="SexConverter"/>
13         </ResourceDictionary>
14     </Page.Resources>
15     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
16         <Grid.RowDefinitions>
17             <RowDefinition Height="*"/>
18             <RowDefinition Height="Auto"/>
19             <RowDefinition Height="Auto"/>
20             <RowDefinition Height="Auto"/>
21             <RowDefinition Height="*"/>
22         </Grid.RowDefinitions>
23         <Grid.ColumnDefinitions>
24             <ColumnDefinition Width="*"/>
25             <ColumnDefinition Width="*"/>
26         </Grid.ColumnDefinitions>
27         <TextBlock Text="姓名"
28                    HorizontalAlignment="Center"
29                    Grid.Row="1"/>
30         <TextBlock Text="{Binding Person.Name}"
31                    HorizontalAlignment="Center"
32                    Grid.Row="1"
33                    Grid.Column="1"/>
34         <TextBlock Text="年龄"
35                    HorizontalAlignment="Center"
36                    Grid.Row="2"/>
37         <TextBlock Text="{Binding Person.Age}"
38                    HorizontalAlignment="Center"
39                    Grid.Row="2"
40                    Grid.Column="1"/>
41         <TextBlock Text="性别"
42                    HorizontalAlignment="Center"
43                    Grid.Row="3"/>
44         <TextBlock Text="{Binding Person.Sex,Converter={StaticResource SexConverter}}"
45                    HorizontalAlignment="Center"
46                    Grid.Row="3"
47                    Grid.Column="1"/>
48     </Grid>
49 </Page>
View Code

    Converter的实现需要继承IValueConverter接口,这个接口是系统的,我们要实现的是两个方法Convert和ConvertBack。Convert方法是将数据源绑定的值传给该方法进行转换处理,ConvertBack则是将页面展示的值传给数据源时进行的转换处理,一般情况只使用Convert方法。这两个方法有相同的四个参数,value是数据源绑定传过来的值,targetType不用管它,parameter是转换参数用于根据一个值不能进行明确转换使用的,language就是语言,根据语言不同转换成不同形态可以使用。

 1 using System;
 2 using Windows.UI.Xaml.Data;
 3 
 4 namespace ConverterDemo
 5 {
 6     public class SexConverter : IValueConverter
 7     {
 8         public object Convert(object value, Type targetType, object parameter, string language)
 9         {
10             Sex sex = (Sex)value;
11             return sex == Sex.F ? "" : "";
12         }
13 
14         public object ConvertBack(object value, Type targetType, object parameter, string language)
15         {
16             throw new NotImplementedException();
17         }
18     }
19 }
View Code

    剩余的代码部分就是根据MVVM随便写一下,添加个Model和ViewModel。

    git地址:https://github.com/ZhangHua19920926/ConverterDemo.git

posted @ 2017-06-01 16:34  翾燚  阅读(1089)  评论(0编辑  收藏  举报