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"  />

 

這樣我們就可以通過我們定義的轉換器來實現我們想要的東西了...