在Silverlight 3.0的ToolTipService中显示数据库的图片

      项目继续进行中，在做人员管理模块时，遇到了工作人员可能重名的情况，如果多绑定几列来显示人员的区分信息，显得页面冗杂。就想到了用ToolTipService来显示一些区分信息，当用户的鼠标悬停到某行数据时，显示该行数据的一些详细信息。

　　从数据库中取出的人员信息的实例都放在一个List<T>中，在后台代码将之赋给ListBox的ItemsSource，前台进行数据绑定。最终呈现效果如下：

    

     效果不太细腻，有待完善。

     话说正题，string类型的字段很容易绑定，使用<TextBlock Text="{Binding Name}" />即可，但是从数据库中取出的二进制图片进行绑定时遇到了麻烦……

     开始想使用Image控件的OnLoad事件，但是针对每行数据绑定时有困难，又想通过获取ListBox每行中包含的子控件Image，在后台赋值，但试了几次获取不到这个空间，目前还没有搞明白怎么从<ToolTipService.ToolTip></ToolTipService.ToolTip>中获取包含的子控件，高手指导一下。

    无奈下想起了数据绑定转换器，试了试果然有效，而且比上面两种解决方案都方便，所以放出来给大家看看。

    首先，写一个图片转换帮助类，因为从数据库中取出的是byte[]格式的图片数据，所以要转换成BitmapImage类型

代码

   
   

    
    
    
     1 
    
    using
    
     System;

    
     2 
    
     
    
    using
    
     System.Windows.Media.Imaging;

    
     3 
    
     
    
    using
    
     System.IO;

    
     4 
    
     
    
    using
    
     System.Windows.Data;

    
     5 
    
    

    
     6 
    
     
    
    namespace
    
     TestDemo

    
     7 
    
    {

    
     8 
    
     
    
    public
    
     
    
    class
    
     ImageConverter : IValueConverter

    
     9 
    
     {

    
    10 
    
     
    
    #region
    
     ImageConverter
    
    

    
    11 
    
    

    
    12 
    
     
    
    public
    
     
    
    object
    
     Convert(
    
    object
    
     value, Type targetType, 
    
    object
    
     parameter, System.Globalization.CultureInfo culture)

    
    13 
    
     {

    
    14 
    
     
    
    if
    
     (value 
    
    ==
    
     
    
    null
    
    )

    
    15 
    
     {

    
    16 
    
     
    
    return
    
     
    
    null
    
    ;

    
    17 
    
     }

    
    18 
    
    

    
    19 
    
     
    
    byte
    
    [] imgByte 
    
    =
    
     (
    
    byte
    
    [])value;

    
    20 
    
     BitmapImage img 
    
    =
    
     
    
    new
    
     BitmapImage();

    
    21 
    
     img.SetSource(
    
    new
    
     MemoryStream(imgByte));

    
    22 
    
     
    
    return
    
     img;

    
    23 
    
     }

    
    24 
    
    

    
    25 
    
     
    
    public
    
     
    
    object
    
     ConvertBack(
    
    object
    
     value, Type targetType, 
    
    object
    
     parameter, System.Globalization.CultureInfo culture)

    
    26 
    
     {

    
    27 
    
     
    
    throw
    
     
    
    new
    
     NotImplementedException();

    
    28 
    
     }

    
    29 
    
    

    
    30 
    
     
    
    #endregion
    
    

    
    31 
    
     }

    
    32 
    
    }
   
   

 

    其次就是在前台引用这个数据转换器，如：

 

  
  

   
   
   
    
   
   <
   
   UserControl.Resources
   
   >
   
   
 
   
   <
   
   sCtrl:ImageConvert x:Key
   
   =
   
   "
   
   imgConvert
   
   "
   
   />
   
   
 
   
   </
   
   UserControl.Resources
   
   >
  
  

 

    之后就是在<ToolTipService.ToolTip></ToolTipService.ToolTip>中需要绑定图片的Image控件出使用这个数据转换器，如：

 

代码

   
   

    
    
    
    1 
    
    <
    
    Image x:Name
    
    =
    
    "
    
    imgCop
    
    "
    
     Source
    
    =
    
    "
    
    {Binding Photo, Converter={StaticResource imgConvert}}
    
    "
    
     

    
    2 
    
     Grid.Row
    
    =
    
    "
    
    0
    
    "
    
     Grid.Column
    
    =
    
    "
    
    0
    
    "
    
     Height
    
    =
    
    "
    
    70
    
    "
    
     Width
    
    =
    
    "
    
    60
    
    "
    
     Stretch
    
    =
    
    "
    
    Fill
    
    "
    
    ></
    
    Image
    
    >
   
   

 

    ListBox的完整代码如下：

代码

   
   

    
    
    
     1 
    
    <
    
    ListBox x:Name
    
    =
    
    "
    
    lsbLhd
    
    "
    
     SelectionMode
    
    =
    
    "
    
    Extended
    
    "
    
     BorderBrush
    
    =
    
    "
    
    #99bbe8
    
    "
    
     BorderThickness
    
    =
    
    "
    
    1,1,1,1
    
    "
    
     ScrollViewer.VerticalScrollBarVisibility
    
    =
    
    "
    
    Auto
    
    "
    
     

    
     2 
    
     ScrollViewer.HorizontalScrollBarVisibility
    
    =
    
    "
    
    Disabled
    
    "
    
     HorizontalAlignment
    
    =
    
    "
    
    Left
    
    "
    
     Margin
    
    =
    
    "
    
    51,71,0,55
    
    "
    
     Width
    
    =
    
    "
    
    209
    
    "
    
    >
    
    

    
     3 
    
     
    
    <
    
    ListBox.ItemTemplate
    
    >
    
    

    
     4 
    
     
    
    <
    
    DataTemplate
    
    >
    
    

    
     5 
    
     
    
    <
    
    StackPanel x:Name
    
    =
    
    "
    
    spLhdLayOut
    
    "
    
    >
    
    

    
     6 
    
     
    
    <
    
    TextBlock x:Name
    
    =
    
    "
    
    tbLhdShowRow
    
    "
    
     Text
    
    =
    
    "
    
    {Binding Name}
    
    "
    
     Width
    
    =
    
    "
    
    207
    
    "
    
    >
    
    

    
     7 
    
     
    
    <
    
    ToolTipService.ToolTip
    
    >
    
    

    
     8 
    
     
    
    <
    
    Grid x:Name
    
    =
    
    "
    
    ImageLayOut
    
    "
    
    >
    
    

    
     9 
    
     
    
    <
    
    Grid.ColumnDefinitions
    
    >
    
    

    
    10 
    
     
    
    <
    
    ColumnDefinition
    
    ></
    
    ColumnDefinition
    
    >
    
    

    
    11 
    
     
    
    <
    
    ColumnDefinition
    
    ></
    
    ColumnDefinition
    
    >
    
    

    
    12 
    
     
    
    </
    
    Grid.ColumnDefinitions
    
    >
    
    

    
    13 
    
     
    
    <
    
    Grid.RowDefinitions
    
    >
    
    

    
    14 
    
     
    
    <
    
    RowDefinition
    
    ></
    
    RowDefinition
    
    >
    
    

    
    15 
    
     
    
    </
    
    Grid.RowDefinitions
    
    >
    
    

    
    16 
    
     
    
    <
    
    Image x:Name
    
    =
    
    "
    
    imgCop
    
    "
    
     Source
    
    =
    
    "
    
    {Binding Photo, Converter={StaticResource imgConvert}}
    
    "
    
     

    
    17 
    
     Grid.Row
    
    =
    
    "
    
    0
    
    "
    
     Grid.Column
    
    =
    
    "
    
    0
    
    "
    
     Height
    
    =
    
    "
    
    70
    
    "
    
     Width
    
    =
    
    "
    
    60
    
    "
    
     Stretch
    
    =
    
    "
    
    Fill
    
    "
    
    ></
    
    Image
    
    >
    
    

    
    18 
    
     
    
    <
    
    Grid x:Name
    
    =
    
    "
    
    InfoLayOut
    
    "
    
     Grid.Row
    
    =
    
    "
    
    0
    
    "
    
     Grid.Column
    
    =
    
    "
    
    1
    
    "
    
    >
    
    

    
    19 
    
     
    
    <
    
    Grid.ColumnDefinitions
    
    >
    
    

    
    20 
    
     
    
    <
    
    ColumnDefinition
    
    ></
    
    ColumnDefinition
    
    >
    
    

    
    21 
    
     
    
    <
    
    ColumnDefinition
    
    ></
    
    ColumnDefinition
    
    >
    
    

    
    22 
    
     
    
    </
    
    Grid.ColumnDefinitions
    
    >
    
    

    
    23 
    
     
    
    <
    
    Grid.RowDefinitions
    
    >
    
    

    
    24 
    
     
    
    <
    
    RowDefinition
    
    ></
    
    RowDefinition
    
    >
    
    

    
    25 
    
     
    
    <
    
    RowDefinition
    
    ></
    
    RowDefinition
    
    >
    
    

    
    26 
    
     
    
    <
    
    RowDefinition
    
    ></
    
    RowDefinition
    
    >
    
    

    
    27 
    
     
    
    <
    
    RowDefinition
    
    ></
    
    RowDefinition
    
    >
    
    

    
    28 
    
     
    
    </
    
    Grid.RowDefinitions
    
    >
    
    

    
    29 
    
     
    
    <
    
    TextBlock Text
    
    =
    
    "
    
    　性　别：
    
    "
    
     FontWeight
    
    =
    
    "
    
    Bold
    
    "
    
     HorizontalAlignment
    
    =
    
    "
    
    Right
    
    "
    
     Grid.Row
    
    =
    
    "
    
    0
    
    "
    
     Grid.Column
    
    =
    
    "
    
    0
    
    "
    
    />
    
    

    
    30 
    
     
    
    <
    
    TextBlock Text
    
    =
    
    "
    
    {Binding Sex}
    
    "
    
     HorizontalAlignment
    
    =
    
    "
    
    Left
    
    "
    
     Grid.Row
    
    =
    
    "
    
    0
    
    "
    
     Grid.Column
    
    =
    
    "
    
    1
    
    "
    
    />
    
    

    
    31 
    
     
    
    <
    
    TextBlock Text
    
    =
    
    "
    
    　警员编号：
    
    "
    
     FontWeight
    
    =
    
    "
    
    Bold
    
    "
    
     HorizontalAlignment
    
    =
    
    "
    
    Right
    
    "
    
     Grid.Row
    
    =
    
    "
    
    1
    
    "
    
     Grid.Column
    
    =
    
    "
    
    0
    
    "
    
    />
    
    

    
    32 
    
     
    
    <
    
    TextBlock Text
    
    =
    
    "
    
    {Binding Numbering}
    
    "
    
     HorizontalAlignment
    
    =
    
    "
    
    Left
    
    "
    
     Grid.Row
    
    =
    
    "
    
    1
    
    "
    
     Grid.Column
    
    =
    
    "
    
    1
    
    "
    
    />
    
    

    
    33 
    
     
    
    <
    
    TextBlock Text
    
    =
    
    "
    
    　人员类别：
    
    "
    
     FontWeight
    
    =
    
    "
    
    Bold
    
    "
    
     HorizontalAlignment
    
    =
    
    "
    
    Right
    
    "
    
     Grid.Row
    
    =
    
    "
    
    2
    
    "
    
     Grid.Column
    
    =
    
    "
    
    0
    
    "
    
    />
    
    

    
    34 
    
     
    
    <
    
    TextBlock Text
    
    =
    
    "
    
    {Binding PoliceTypeName}
    
    "
    
     HorizontalAlignment
    
    =
    
    "
    
    Left
    
    "
    
     Grid.Row
    
    =
    
    "
    
    2
    
    "
    
     Grid.Column
    
    =
    
    "
    
    1
    
    "
    
    />
    
    

    
    35 
    
     
    
    <
    
    TextBlock Text
    
    =
    
    "
    
    　所在部门：
    
    "
    
     FontWeight
    
    =
    
    "
    
    Bold
    
    "
    
     HorizontalAlignment
    
    =
    
    "
    
    Right
    
    "
    
     Grid.Row
    
    =
    
    "
    
    3
    
    "
    
     Grid.Column
    
    =
    
    "
    
    0
    
    "
    
    />
    
    

    
    36 
    
     
    
    <
    
    TextBlock Text
    
    =
    
    "
    
    {Binding DeptName}
    
    "
    
     HorizontalAlignment
    
    =
    
    "
    
    Left
    
    "
    
     Grid.Row
    
    =
    
    "
    
    3
    
    "
    
     Grid.Column
    
    =
    
    "
    
    1
    
    "
    
    />
    
    

    
    37 
    
     
    
    </
    
    Grid
    
    >
    
    

    
    38 
    
     
    
    </
    
    Grid
    
    >
    
    

    
    39 
    
     
    
    </
    
    ToolTipService.ToolTip
    
    >
    
    

    
    40 
    
     
    
    </
    
    TextBlock
    
    >
    
    

    
    41 
    
     
    
    </
    
    StackPanel
    
    >
    
    

    
    42 
    
     
    
    </
    
    DataTemplate
    
    >
    
    

    
    43 
    
     
    
    </
    
    ListBox.ItemTemplate
    
    >
    
    

    
    44 
    
     
    
    </
    
    ListBox
    
    >
   
   

 

    个人学习，仅供参考……