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

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

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

    

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

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

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

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

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

using System;
 using System.Windows.Media.Imaging;
 using System.IO;
 using System.Windows.Data;

 namespace TestDemo
{
    public class ImageConverter : IValueConverter
    {
        #region ImageConverter

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null)
            {
                return null;
            }

            byte[] imgByte = (byte[])value;
            BitmapImage img = new BitmapImage();
            img.SetSource(new MemoryStream(imgByte));
            return img;
        }

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

        #endregion
    }
}

 

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

 

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

 

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

 

<Image x:Name="imgCop" Source="{Binding Photo, Converter={StaticResource imgConvert}}" 
       Grid.Row="0" Grid.Column="0" Height="70" Width="60" Stretch="Fill"></Image>

 

    ListBox的完整代码如下：

<ListBox x:Name="lsbLhd" SelectionMode="Extended" BorderBrush="#99bbe8" BorderThickness="1,1,1,1" ScrollViewer.VerticalScrollBarVisibility="Auto" 
                         ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Left" Margin="51,71,0,55" Width="209">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel x:Name="spLhdLayOut">
                                <TextBlock x:Name="tbLhdShowRow" Text="{Binding Name}" Width="207">
                                    <ToolTipService.ToolTip>
                                        <Grid x:Name="ImageLayOut">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition></ColumnDefinition>
                                                <ColumnDefinition></ColumnDefinition>
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition></RowDefinition>
                                            </Grid.RowDefinitions>
                                            <Image x:Name="imgCop" Source="{Binding Photo, Converter={StaticResource imgConvert}}" 
                                                   Grid.Row="0" Grid.Column="0" Height="70" Width="60" Stretch="Fill"></Image>
                                            <Grid x:Name="InfoLayOut" Grid.Row="0" Grid.Column="1">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition></ColumnDefinition>
                                                    <ColumnDefinition></ColumnDefinition>
                                                </Grid.ColumnDefinitions>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition></RowDefinition>
                                                    <RowDefinition></RowDefinition>
                                                    <RowDefinition></RowDefinition>
                                                    <RowDefinition></RowDefinition>
                                                </Grid.RowDefinitions>
                                                <TextBlock Text="　性　别：" FontWeight="Bold" HorizontalAlignment="Right" Grid.Row="0"  Grid.Column="0"/>
                                                <TextBlock Text="{Binding Sex}" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="1"/>
                                                <TextBlock Text="　警员编号：" FontWeight="Bold" HorizontalAlignment="Right" Grid.Row="1"  Grid.Column="0"/>
                                                <TextBlock Text="{Binding Numbering}" HorizontalAlignment="Left" Grid.Row="1"  Grid.Column="1"/>
                                                <TextBlock Text="　人员类别：" FontWeight="Bold" HorizontalAlignment="Right" Grid.Row="2"  Grid.Column="0"/>
                                                <TextBlock Text="{Binding PoliceTypeName}" HorizontalAlignment="Left" Grid.Row="2"  Grid.Column="1"/>
                                                <TextBlock Text="　所在部门：" FontWeight="Bold" HorizontalAlignment="Right" Grid.Row="3"  Grid.Column="0"/>
                                                <TextBlock Text="{Binding DeptName}" HorizontalAlignment="Left" Grid.Row="3"  Grid.Column="1"/>
                                            </Grid>
                                        </Grid>
                                    </ToolTipService.ToolTip>
                                </TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

 

    个人学习，仅供参考……