WPF值轉換器

標籤：wpf值轉換器   ivalueconverter介面   convert方法   convertback方法   資料繫結   

一、摘要

本文通過執行個體示範WPF值轉換器的應用，並在示範過程中，對WPF值轉換器的相關知識點進行解釋說明。

 

二、執行個體示範

1 建立WPF應用程式ConverterExp，程式結構如所示。

 

圖1 程式結構圖

程式的主畫面如所示。

 

圖2 程式主畫面

程式完成功能：

通過改變畫面中ComboBox控制項的選中項來改變TextBlock控制項的Background值。

ComboBox控制項的下拉式清單中可供選擇的項有“red”“green”和“blue”，預設選中的項為“red”。

TextBlock控制項預設的Background值為“red”。

2 建立值轉換器類ColorConverter，類檔案名稱為ColorConverter.cs

WPF的綁定模型中，可以使用值轉換器將值從一種類型轉換成另外一種類型。

本例中的值轉換器ColorConverter將整型資料轉換成SolidColorBrush類型資料。

SolidColorBrush類型表示純色的畫刷，將SolidColorBrush類型的執行個體與TextBlock控制項的Background屬性綁定後，就可以設定TextBlock控制項的背景色。

ColorConverter類的詳細代碼如下所示。

//************************************************************//// IValueConverter介面範例程式碼//// Author：三五月兒// // Date：2014/08/03//// http://blog.csdn.net/yl2isoft////************************************************************using System;using System.Windows.Data;using System.Windows.Media; namespace ConverterExp{    public class ColorConverter : IValueConverter    {        public static Color[] ColorCollection = new Color[] {                                                    Color.FromRgb(255,0,0),//red                                                    Color.FromRgb(0,255,0),//green                                                    Color.FromRgb(0,0,255)//blue                                                };        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)        {            if (value == null)            {                return new SolidColorBrush(ColorCollection[0]);            }            try            {                return new SolidColorBrush(ColorCollection[(int)value]);            }            catch (Exception)             {                 return new SolidColorBrush(ColorCollection[0]);             }        }         public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)        {            throw new NotImplementedException();        }    }}

與綁定進行關聯的值轉換器必須實現介面IValueConverter，IValueConverter介面包含Convert和ConvertBack方法的定義，所以，值轉換器都必須實現Convert和ConvertBack方法。

Convert和ConvertBack方法的區別是：Convert方法表示從綁定資料來源到繫結目標的值轉換，ConvertBack方法表示從繫結目標到綁定資料來源的值轉換。因此，如果繫結模式是一次性綁定或單向綁定，只需要在Convert方法的實現中完成值轉換的工作即可；如果是雙向繫結，就需要同時在Convert和ConvertBack方法的實現中完成值轉換的工作。

本例中的繫結模式是單向綁定，所以，僅需要在Convert方法的實現中完成值轉換的工作，而在ConvertBack方法的實現中，除了拋出NotImplementedException異常外，不用完成任何其他工作。

執行個體中ColorConverter類的Convert方法，一開始會將傳入的value與null進行對比，若value為null，則使用ColorCollection中的第一個顏色值來初始化SolidColorBrush對象並返回；若value不為null，則將value強制轉換為整型，並用轉換後的整型值作為索引在ColorCollection中擷取顏色值來初始化SolidColorBrush對象並返回；方法中若出現異常，則同樣使用ColorCollection中的第一個顏色值來初始化SolidColorBrush對象並返回。

 

3 建立ConverterViewModel類，類檔案名稱為ConverterViewModel.cs

在ConverterViewModel類中，定義了程式主畫面用到的資料來源。

詳細的代碼如下所示。

//************************************************************//// IValueConverter介面範例程式碼//// Author：三五月兒// // Date：2014/08/03//// http://blog.csdn.net/yl2isoft////************************************************************using System.Collections.Generic; namespace ConverterExp{    public class ConverterViewModel    {        public IList<ColorInfo> ColorList { get; set; }        public int SelectedColor { get; set; }        public ConverterViewModel()        {            ColorList = new List<ColorInfo>()            {                   new ColorInfo(){ ID=0, Name="red"},                new ColorInfo(){ ID=1, Name="green"},                new ColorInfo(){ ID=2, Name="blue"}             };            SelectedColor = 0;        }    }    public class ColorInfo    {        public int ID { get; set; }        public string Name { get; set; }    }}

其中，ColorList屬性用於指定ComboBox控制項下拉式清單的選擇項（一個ColorInfo執行個體代表一個選擇項），SelectedColor屬性用於指定ComboBox控制項的被選中項。

 

4 程式主畫面的實現

4.1 MainWindow.xaml

<Window x:Class="ConverterExp.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:localUtil="clr-namespace:ConverterExp"        Title="Converter示範程式" Height="350" Width="525" WindowStyle="ToolWindow">    <Grid>        <Grid.Resources>            <localUtil:ColorConverter x:Key="ColorConverter"/>        </Grid.Resources>        <Grid.RowDefinitions>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <ColumnDefinition ></ColumnDefinition>            <ColumnDefinition ></ColumnDefinition>            <ColumnDefinition ></ColumnDefinition>            <ColumnDefinition ></ColumnDefinition>            <ColumnDefinition ></ColumnDefinition>            <ColumnDefinition ></ColumnDefinition>        </Grid.ColumnDefinitions>        <Label Content="顏色:" Grid.Row="3" Grid.Column="1" Margin="45,7,0,7"/>        <TextBlock Background="{Binding SelectedValue,ElementName=ComboBox_ColorSelect,Converter={StaticResource ColorConverter}}" Grid.Row="3" Grid.Column="2" Height="25" Width="80" Margin="0,7,0,7"></TextBlock>        <ComboBox Cursor="Hand" x:Name="ComboBox_ColorSelect" Height="25" Width="80" ItemsSource="{Binding ColorList}" SelectedValuePath="ID"  DisplayMemberPath="Name" SelectedValue="{Binding SelectedColor}" Grid.Row="3" Grid.Column="3"  Margin="0,7,0,7"></ComboBox>    </Grid></Window>

4.2 MainWindow.xaml.cs

//************************************************************//// IValueConverter介面範例程式碼//// Author：三五月兒// // Date：2014/08/03//// http://blog.csdn.net/yl2isoft////************************************************************using System.Windows;namespace ConverterExp{    /// <summary>    /// MainWindow.xaml 的互動邏輯    /// </summary>    public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();            this.DataContext = new ConverterViewModel();        }    }}

MainWindow.xaml.cs的代碼中，通過代碼“this.DataContext = new ConverterViewModel()”設定主畫面的綁定資料來源。

MainWindow.xaml檔案中的以下內容與文章主題有關，下面將對此部分內容做重點說明。

<TextBlock Background="{Binding SelectedValue,ElementName=ComboBox_ColorSelect,Converter={StaticResource ColorConverter}}" Grid.Row="3" Grid.Column="2" Height="25" Width="80" Margin="0,7,0,7"></TextBlock><ComboBox Cursor="Hand" x:Name="ComboBox_ColorSelect" Height="25" Width="80" ItemsSource="{Binding ColorList}" SelectedValuePath="ID"  DisplayMemberPath="Name" SelectedValue="{Binding SelectedColor}" Grid.Row="3" Grid.Column="3"  Margin="0,7,0,7"></ComboBox>

通過閱讀代碼，可以瞭解到：

資料來源中的ColorList屬性與ComboBox的ItemsSource屬性綁定，使ComboBox的下拉式清單方塊中包含選擇項“red”“green”和“blue”；

資料來源中的SelectedColor屬性與ComboBox的SelectedValue屬性綁定，SelectedColor初始化時被賦值為0，表示ComboBox預設選中的為第一項，值為“red”；

ComboBox的SelectedValuePath屬性與ColorInfo執行個體的ID屬性綁定，ComboBox的DisplayMemberPath屬性與ColorInfo執行個體的Name屬性綁定，這樣一來，當更改ComboBox的選中項時，SelectedValue屬性將儲存選中項的ID，而在畫面中顯示的是選中項的Name。

TextBlock控制項的Background屬性與ComboBox控制項的SelectedValue屬性綁定。這樣一來，當ComboBox控制項中被選中的項發生改變時，TextBlock控制項的Background值也會一起發生變化。例如：ComboBox控制項被選中的顏色為“red”時，則ComboBox控制項的SelectedValue屬性值為0，從而TextBlock控制項的Background屬性的綁定值就為0；當ComboBox控制項被選中的顏色為“green”時，則ComboBox控制項的SelectedValue屬性值為1，從而TextBlock控制項的Background屬性的綁定值就為1。與此同時，使用值轉換器完成值的轉換工作，當Background的值變為0時，值轉換器會將0轉換成相應的SolidColorBrush對象，並使用轉換後的SolidColorBrush對象來完成綁定操作。

 

三 總結

WPF的綁定中，可以使用值轉換器將值從一種類型轉換成另外一種類型。

值轉換器必須實現IValueConverter介面的Convert和ConvertBack方法。