WPF - DataBinding và chuyển đổi kiểu dữ liệu IValueConverter

Hôm nay chúng ta sẽ tìm hiểu về cách thức để chuyển đổi một kiểu dữ liệu bất kỳ từ sourceValue thành kiểu dữ liệu mà Control hiện tại có thể hiểu. Tình huống chúng ta có thể gặp là làm sao chuyển một kiểu Boolean thành kiểu Visibility để hiện hoặc ẩn Control.

Để làm điều này chúng ta cần tạo một class Converter và class này kế thừa từ interface IValueConverter, interface này có hai thành viên:

Convert: Chuyển đổi từ sourceValue thành kiểu trên Control nhận value
ConvertBack: Chuyển đổi từ Control binding sang kiểu dữ liệu nguồn

[code language="csharp"]
public class Converter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
[/code]

Chúng ta sẽ Implement hai phương thức thành viên trên như sau:

[code language="csharp"]
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var bValue = (bool)value;
if (bValue)
return Visibility.Visible;
return Visibility.Collapsed;
}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var visibility = (Visibility)value;

if (visibility == Visibility.Visible)
return true;
return false;
}
[/code]

Đến đây chúng ta đã xong phần quang trọng nhất, vậy để dùng nó khi dữ liệu được Binding thế nào, trước tiên ta phải khai báo namespace chứa class trên.

[code language="xml"]
xmlns:local="clr-namespace:DataBinding"
[/code]

Và define class Converter ở Resources với khóa là x:Key="BooleanConvert"

[code language="xml"]
<Window.Resources>
<local:Converter x:Key="BooleanConvert" />
</Window.Resources>
[/code]

Việc tiếp theo khá đơn giản, tôi tạo một CheckBox với mục đích để ẩn hoặc hiện một Rectangle, dĩ nhiên tôi sẽ Binding thuộc tính Visibility của Rectangle với thuộc tính IsChecked của CheckBox. Nếu không dùng Converter thì việc Binding này sẽ không mang lại kết quả như mong đợi. Sau đây thôi sẽ sử dụng Convert trong code XAML:

[code language="xml"]
<StackPanel Margin="30">
<CheckBox x:Name="checkBox" Margin="10" Content="Show Rectangle" IsChecked="True"></CheckBox>
<Rectangle Fill="#FF158B0A" Height="200" RadiusY="43" RadiusX="43"
UpdateSourceTrigger=PropertyChanged,Converter='{StaticResource BooleanConvert}'}"/>
</StackPanel>
[/code]

Hoàn chỉnh XAML sẽ như sau:

[code language="xml"]
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DataBinding"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="DataBinding.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:Converter x:Key="BooleanConvert" />
</Window.Resources>
<StackPanel Margin="30">
<CheckBox x:Name="checkBox" Margin="10" Content="Show Rectangle" IsChecked="True"></CheckBox>
<Rectangle Fill="#FF158B0A" Height="200" RadiusY="43" RadiusX="43"
Visibility="{Binding IsChecked, ElementName=checkBox, UpdateSourceTrigger=PropertyChanged,Converter='{StaticResource BooleanConvert}'}"/>
</StackPanel>
</Window>
[/code]

Ta được kết quả:

Chúc các bạn thành công: Download source