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