WPF 之转换器
举个例子,比如在邮件系统中,我们在设计数据库的时候,用0代表邮件未读,1代表已读,这个时候我们希望未读的时候用没有打开邮件的图片显示,而已经读的邮件用打开的邮件图片显示出来,这个在web和winform中很好实现,但是在wpf中我们需要借助转换器来实现。
所谓的转换器就是通过一个条件或者一个类型,转换成另外一种结果或者类型,主要实现了IValueConverter接口,下面把刚才的例子简单的用代码写一下
首先我们来定义一个转换器
//定义值转换器 [ValueConversion(typeof(int), typeof(String))] public class DateConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { int reValue = System.Convert.ToInt32(value); string imgPath = "/Financial;component/Images/public/mail0.gif"; if (reValue == 1) { imgPath="/Financial;component/Images/public/mail1.gif"; } return imgPath; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { string strValue = value.ToString(); return value; } }
Convert和ConvertBack的区别:
Convert函数表示从数据源到目标的值转换,ConvertBack函数表示从目标到数据源的值转换。因此,如果绑定模式是一次绑定或单向 绑定,只需实现Convert函数;如果绑定模式是双向绑定,需要实现Convert和ConvertBack函数。
在这里我们不仅需要通过传过来的1和0来判断显示哪个图片,而且还要显示的图片显示在绑定的DataGrid中,所以我们需要使用ConVert和ConVertBack
下一步,我们就要在控件中去绑定了
<UserControl x:Class="PFM.DawnXZ.WPF.UserControls.FeedBack" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local1="clr-namespace:PFM.DawnXZ.WPF.EntityListener" xmlns:my="clr-namespace:PFM.DawnXZ.WPF.UserControls" xmlns:local="clr-namespace:PFM.DawnXZ.WPF.UserControls" mc:Ignorable="d" d:DesignHeight="448" Tag="私信列表" d:DesignWidth="734" Height="448" Width="734" Initialized="UserControl_Initialized" Loaded="UserControl_Loaded"> <UserControl.Resources> <local:DateConverter x:Key="dateConverter"/> </UserControl.Resources> <Grid Name="gdMainPanel"> <Canvas x:Name="cplButtonPanel" Margin="0" Width="734" Height="44" HorizontalAlignment="Left" VerticalAlignment="Top" FlowDirection="RightToLeft"> <Canvas.Background> <ImageBrush ImageSource="/Images/public/navigation.png" /> </Canvas.Background> <my:CPager x:Name="pager" Margin="404,7.5,0,0" FlowDirection="LeftToRight" EventPaging="pager_EventPaging" /> <Button Content=" 添加" Height="29" Name="btnAdd" Width="60" Margin="80,7.5,0,0" Style="{StaticResource ButtonFunction}" Click="btnAdd_Click" Visibility="Collapsed"> <Button.Background> <ImageBrush ImageSource="/Financial;component/Images/function/add.png" /> </Button.Background> </Button> <Button Content=" 刷新" Height="29" Name="btnReload" Width="60" Margin="10,7.5,0,0" Style="{StaticResource ButtonFunction}" Click="btnReload_Click"> <Button.Background> <ImageBrush ImageSource="/Financial;component/Images/function/reload.png" /> </Button.Background> </Button> <Button Content="发件箱" Foreground="Black" Height="23" Name="button2" Width="75" Canvas.Left="297" Canvas.Top="11" Click="button2_Click" /> <Button Content="收件箱" Foreground="Black" Height="23" Name="button1" Width="75" Canvas.Left="190" Canvas.Top="11" Click="button1_Click" /> </Canvas> <DockPanel Name="dplDataPanel" Margin="0,44,0,0" Width="734" Height="404" HorizontalAlignment="Left" VerticalAlignment="Top"> <DataGrid Name="dgDataSource" IsReadOnly="True" Width="740" DataContext="{Binding}" LoadingRow="dgDataSource_LoadingRow" PreviewMouseDoubleClick="dgDataSource_PreviewMouseDoubleClick"> <DataGrid.Columns> <!--<DataGridTextColumn Width="150" Header="" Binding="{Binding userMessage.ReedStatus,Mode=OneWay}" />--> <DataGridTextColumn Width="80" Header="发件人" Binding="{Binding SendUserBase.UserName,Mode=OneWay}" CellStyle="{StaticResource dgvCellLeft10}" /> <DataGridTextColumn Width="400" Header="私信标题" Binding="{Binding Tile,Mode=OneWay}" CellStyle="{StaticResource dgvCellLeft10}" /> <DataGridTemplateColumn Header="状态" Width="100"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding ReadState,Converter={StaticResource dateConverter},Mode=OneWay}" Name="image1" Width="16" Height="14" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> <DataGridTextColumn Width="150" Header="发送时间" Binding="{Binding AddTime,Mode=OneWay,StringFormat='yyyy-MM-dd HH:mm:ss'}" CellStyle="{StaticResource dgvCellLeft10}"/> </DataGrid.Columns> <DataGrid.ContextMenu> <ContextMenu> <!--<Separator />--> <MenuItem x:Name="mitmDelete" Header="删除私信" Click="mitmDelete_Click"> <MenuItem.Icon> <Image Source="/Financial;component/Icons/Error.ico" /> </MenuItem.Icon> </MenuItem> <!--<Separator />--> </ContextMenu> </DataGrid.ContextMenu> </DataGrid> </DockPanel> </Grid> </UserControl>
有几点需要说明:
1、首先我们需要引入空间
xmlns:local="clr-namespace:PFM.DawnXZ.WPF.UserControls"
这里就和web中使用用户控件很类似,然后引入资源
<UserControl.Resources> <local:DateConverter x:Key="dateConverter"/> </UserControl.Resources>
这里我用的是用户控件,所以使用UserControl.Resources,如果不是用户控件,比如window窗体,就要使用window.Resources了(这个问题曾经纠结过)
2、绑定到需要转换的控件中
<DataGridTemplateColumn Header="状态" Width="100"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding ReadState,Converter={StaticResource dateConverter},Mode=OneWay}" Name="image1" Width="16" Height="14" /> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn>
这里面使用了模板列,这个后期会说到,最主要的是这个
<Image Source="{Binding ReadState,Converter={StaticResource dateConverter},Mode=OneWay}" Name="image1" Width="16" Height="14" />
这样我们就可以通过我们定义的转换器来实现我们想要的东西了...