循序漸進介紹基於CommunityToolkit.Mvvm 和HandyControl的WPF應用端開發(8) -- 使用Converter類實現內容的轉義處理

在我們WPF應用端的時候，和WInform開發或者Vue前端開發一樣，有時候也需要對內容進行轉義處理，如把一些0,1數值轉換為具體含義的文本信息，或者把一些布爾變數轉換為是否等，都是常見的轉換處理，本篇隨筆介紹在WPF應用端對內容使用Converter類實現內容的轉義處理的操作。

1、使用Converter實現內容轉義或者強調顏色

一般在DataGrid中，我們往往都會根據需要對內容或者顏色進行一些轉義處理，如下界面所示用戶列表信息中，對性別和是否過期的內容進行顏色和內容的轉義處理。

在DataGrid的XAML代碼中，如果是常規的內容，通過定義列名稱即可顯示，如下所示。

<DataGridTextColumn
    Width="SizeToCells"
    Binding="{Binding Name}"
    Header="用戶名稱" />

如果是日期或者字元串的格式處理，可以使用StringFormat的屬性處理，如下所示。

<DataGridTemplateColumn MinWidth="100" Header="創建時間">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding CreateTime, StringFormat=yyyy-MM-dd hh:mm}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

而如果需要轉義，則需要設置Converter的對象類，我們的代碼如下所示。

<DataGridTemplateColumn MinWidth="60" Header="性別">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Foreground="{Binding Gender, Converter={StaticResource GenderColorConverter}}" Text="{Binding Gender}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn MinWidth="60" Header="是否過期">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Foreground="{Binding IsExpire, Converter={StaticResource BooleanToColorConverter}}" Text="{Binding IsExpire, Converter={StaticResource BooleanToYesNoStrConverter}}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

2、Converter轉義類的編寫和應用

上面的轉義處理中，可以對多個屬性進行轉義，如前景顏色或者Text文本等等。轉義類的定義也比較簡單，只需要實現IValueConverter介面即可，一般不需要雙向的話，實現Convert函數即可，代碼如下所示。

/// <summary>
/// 用來轉換性別字元串到顏色
/// </summary>
internal class GenderColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is null) return "";

        if(value.ToString() == "男")
        {
            return "green";
        }
        else
        {
            return "red";
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

或者

    public class NumberToYesNoStrConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var flag = ConvertToBoolean(value);
            return flag ? "是" : "否";
        }

        private bool ConvertToBoolean(object value)
        {
            if (value == null)
                return false;

            return value switch
            {
                float f => f != 0.0f,
                double d => d != 0.0f,
                int i => i != 0,
                long l => l != 0.0f,
                _ => throw new NotSupportedException($"value must be a number type, got {value?.GetType()}")
            };
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => throw new NotImplementedException();
    }

public class String2VisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return string.IsNullOrEmpty((string)value) ? Visibility.Collapsed : Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value != null && (Visibility)value == Visibility.Collapsed;
    }
}

public class String2VisibilityReConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return string.IsNullOrEmpty((string)value) ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value != null && (Visibility)value == Visibility.Collapsed;
    }
}

轉義類的函數，可以參考很多案例進行收集一些常用的，也可以自己根據需要創建一些轉義函數，雖然感覺比較麻煩一些，不過重用性較好。一般可以放在頁面或者視窗的視圖代碼中，如下代碼所示。

<Page.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
    <helpers:String2VisibilityConverter x:Key="String2VisibilityConverter" />
    <helpers:String2VisibilityReConverter x:Key="String2VisibilityReConverter" />
</Page.Resources>

如果考慮整個App重用這些轉義類的內容，也可以放在App.xaml，那麼所有的轉義函數就是全局可用的了，我傾向於這種方式，可以減少每個視窗或者頁面的代碼，比較簡潔。

<Application.Resources>
    <ResourceDictionary>
        <!--  整合所有用到的轉義輔助類，減少頁面中添加的處理代碼  -->
        <helpers:IntToBooleanConverter x:Key="IntToBooleanConverter" />
        <helpers:EnumToBooleanConverter x:Key="EnumToBooleanConverter" />
        <helpers:BooleanToYesNoStrConverter x:Key="BooleanToYesNoStrConverter" />
        <helpers:BooleanToColorConverter x:Key="BooleanToColorConverter" />
        <helpers:GenderColorConverter x:Key="GenderColorConverter" />
        ........................

    </ResourceDictionary>
</Application.Resources>

除了DataGrid中使用，我們也可以其他頁面展示的地方使用Converter實現我們的轉義效果，如下所示是編輯用戶詳細信息的頁面，其中對性別顏色進行強調，對賬戶是否過期進行轉義和顏色強調。

 其中Xaml的界面代碼如下所示

<WrapPanel
    Width="350"
    VerticalAlignment="Center"
    Orientation="Horizontal">
    <TextBlock Width="100" Text="賬號過期" />
    <CheckBox
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        VerticalContentAlignment="Top"
        Content="{Binding ViewModel.Item.IsExpire, Converter={StaticResource BooleanToYesNoStrConverter}}"
        FontWeight="Bold"
        Foreground="{Binding ViewModel.Item.IsExpire, Converter={StaticResource BooleanToColorConverter}}"
        IsChecked="{Binding ViewModel.Item.IsExpire, UpdateSourceTrigger=PropertyChanged}"
        IsEnabled="{Binding ViewModel.IsEdit, Mode=OneWay}" />
</WrapPanel>

另外，我們也可以使用它來控制一些UI元素的顯示，如下對於編輯狀態下，不顯示用戶的初始化密碼的文本框架，如下所示。

<TextBox
    x:Name="InitPassword"
    Width="350"
    Margin="5"
    hc:TitleElement.Title="初始密碼"
    hc:TitleElement.TitlePlacement="Left"
    Style="{StaticResource TextBoxExtend}"
    Text="{Binding ViewModel.Item.Password, UpdateSourceTrigger=PropertyChanged}"
    Visibility="{Binding ViewModel.IsEdit, Converter={StaticResource Boolean2VisibilityReConverter}}" />

以及對於角色處理的時候，我們創建角色的時候，僅僅顯示簡單信息，編輯的時候，顯示更多的信息，如下界面代碼控制。

新建角色的時候，界面如下所示。

編輯角色的時候，我們根據角色顯示更多的信息，如下界面所示。

 3、不使用Converter類實現內容轉義

 有時候，為了一些特殊的處理，我們可能不一定使用Converter來實現內容的轉義，我們也可以直接處理，如下DataGrid裡面的列處理，可以直接使用 Triggers 進行轉義的處理，如下代碼所示。

<DataGridTemplateColumn Width="*" Header="授權類型">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock>
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=AuthorizeType}" Value="1">
                                <Setter Property="Text" Value="白名單" />
                                <Setter Property="Foreground" Value="Green" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=AuthorizeType}" Value="0">
                                <Setter Property="Text" Value="黑名單" />
                                <Setter Property="Foreground" Value="Red" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

這種處理，代碼較多一些，而沒法重用，但是貴在直接，而且能夠一次性控制多個內容的處理。 

 以上就是在WPF應用端開發中使用Converter類實現內容的轉義處理的一些應用心得和總結。