Sử dụng Chuyển Đổi Giá Trị ValueConverter trong WPF

Trong quá trình phát triển ứng dụng WPF, Silverlight hoặc Windows Phone, đôi khi bạn cần chuyển đổi dữ liệu được ràng buộc theo cách cụ thể. Ví dụ như việc chuyển đổi kiểu dữ liệu DateTime thành định dạng yyyyMMdd hoặc giá trị nào đó phụ thuộc vào nhiều nguồn khác nhau. Lúc này, chúng ta cần tạo Converter tùy chỉnh. .NET Framework cung cấp hai giao diện Converter: **IValueConverter** cho việc chuyển đổi đơn giá trị và **IMultiValueConverter** cho chuyển đổi đa giá trị. Cả hai đều nằm trong không gian tên System.Windows.Data và tồn tại trong tập hợp PresentationFramework.dll. Các chuyển đổi này tuân theo quy tắc vùng địa lý (culture). Phương thức Convert và ConvertBack của chúng đều có tham số culture để chỉ định thông tin về vùng địa lý. Nếu thông tin vùng địa lý không liên quan đến quá trình chuyển đổi, bạn có thể bỏ qua tham số này trong custom converter.

1. Ví dụ về Chuyển Đổi Đơn Giá Trị với IValueConverter

Khi giá trị di chuyển từ nguồn ràng buộc đến đích, phương thức Convert sẽ được gọi. Ngược lại, khi giá trị di chuyển từ đích trở lại nguồn, phương thức ConvertBack sẽ hoạt động. Thông thường, thực hiện của ConvertBack phải là ngược lại của Convert.

/// <summary>
/// Custom Converter chuyển đổi ngày
/// </summary>
public class DateTransformer : IValueConverter
{
    // Gọi khi giá trị truyền từ nguồn sang đích
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return DependencyProperty.UnsetValue;

        var date = (DateTime)value;
        return date.ToString("dd/MM/yyyy");
    }

    // Gọi khi giá trị truyền từ đích về nguồn
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var strDate = value as string;
        if (DateTime.TryParse(strDate, out var parsedDate))
        {
            return parsedDate;
        }
        return DependencyProperty.UnsetValue;
    }
}
Ghi chú: Giá trị trả về DependencyProperty.UnsetValue biểu thị rằng converter không tạo ra bất kỳ giá trị nào. Để sử dụng DateTransformer trong XAML, trước tiên cần khai báo không gian tên:

xmlns:local="clr-namespace:MyApp.Converters"
Sau đó định nghĩa Resources trong phần Window hoặc UserControl:


    

Tiếp theo, áp dụng custom converter cho Binding trong XAML:

<TextBox x:Name="txtBox" 
         Text="{Binding ElementName=calender, Path=SelectedDate, 
                       Converter={StaticResource dateTransform}}" 
         HorizontalAlignment="Left" Height="23" Margin="85,105,0,0" 
         TextWrapping="Wrap" VerticalAlignment="Top" Width="183"/>
Nội dung hoàn chỉnh của file XAML:

<Grid>
    <DatePicker x:Name="calender" 
                HorizontalAlignment="Left" Margin="85,50,0,0" VerticalAlignment="Top" Width="183"
                SelectedDateFormat="Long"/>
    <TextBox x:Name="txtBox" 
             Text="{Binding ElementName=calender, Path=SelectedDate, 
                           Converter={StaticResource dateTransform}}" 
             HorizontalAlignment="Left" Height="23" Margin="85,105,0,0" 
             TextWrapping="Wrap" VerticalAlignment="Top" Width="183"/>
    <Label x:Name="lblResult" Content="Kết quả chọn:" 
           HorizontalAlignment="Left" Margin="19,105,0,0" VerticalAlignment="Top"/>
    <Label x:Name="lblText" Content="{Binding ElementName=calender, Path=Text}" 
           HorizontalAlignment="Left" Margin="85,145,0,0" VerticalAlignment="Top"/>
</Grid>
Kết quả chạy chương trình: Trước khi áp dụng converter: Hiển thị ngày tháng theo định dạng mặc định. Sau khi áp dụng converter: Ngày tháng hiển thị theo định dạng dd/MM/yyyy.

Thẻ: WPF Binding IValueConverter

Đăng vào ngày 3 tháng 6 lúc 02:39