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