UWP开发中Binding配合Converter的使用

UWP开发中Binding配合Converter的使用

MVVM模式的使用，简化了UWP应用的开发，使层次更加分明。在写xaml的时候，有些小技术还是很实用的；比如Converter，字面上理解是转换器，那它到底是转换什么的？接触过的可能知道它起的是类型转换的作用，当你绑定的数据是一堆字母，显示时却想将它变成汉字，一种做法可以在数据绑定前将这些数据转换成需要的文字，另一种做法就是使用Converter。

它有两个好处：

1，保持原始数据的完整性，不破坏原有数据结构。

2，可以复用，别的地方需要直接将这个Converter拿过去就行。

　　先展示xaml代码，简单的一个例子，数据源给的是uint类型的数字，页面展示将它超过10000用字母w表示，并保留2位小数显示。Converter是一个.CS文件，在页面的资源中声明后才可以使用，可以在page标签下声明。也可以在需要绑定数据的上一级父级声明，下面我就是直接再上级Grid中声明的。

...
xmlns:converter="using:TikTokBillboard.Model"
...
 <Grid Grid.Row="2">
       <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <ResourceDictionary>
                <converter:UnitConverter x:Key="Unit"/>
            </ResourceDictionary>
        </Grid.Resources>
       <Grid x:Name="Digg" Grid.Row="0" Tapped="Digg_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center">
<!--未点赞前为白色-->
<TextBlock Text="&#xE00B;" Foreground="{Binding DiggColor,Mode=TwoWay}" FontFamily="Segoe MDL2 Assets" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<TextBlock Grid.Row="1" Text="{Binding DiggNum,Converter={StaticResource Unit}}" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

先引用CS文件，xmlns:converter="using:TikTokBillboard.Model"，然后声明UnitConverter(这个是我的Converter文件的名称)，x:key的值的可以随便写，只要和下面使用时相同即可。

DiggNum是目标源，我们就是要把DiggNum的值转化成简写w表示。

View Code

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

namespace TikTokBillboard.Model
{
    /// <summary>
    /// 单位转换
    /// </summary>
    /// <param name="bytes"></param>
    /// <returns></returns>
    public class UnitConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            //默认为0
            string size = "0";
            //非0判断
            if (uint.Parse(value.ToString()) != 0 && uint.Parse(value.ToString()) >= 10000)
            {
                size = String.Format("{0:F2} {1}", Math.Round((1.00 * uint.Parse(value.ToString()) / 10000), 2), "w");
            }
            else
            {
                size = value.ToString();
            }
            return size;
        }
        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}

View Code

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

最后看一下实现效果：

文章参考 https://blog.csdn.net/weixin_30585437/article/details/98146909