Binding base64 String Image into List view Stored

问题:

I have converted Image to base64 string and saved it in SQLite database as public string ProfileImage { get; set; } I want to bind image into a List view as I did binding Name and Address.

XAML

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,10,0,0" Grid.Column="0" HorizontalAlignment="Left">
                <Image  x:Name="proImg" Source="{Binding ProfileImage}"  Stretch="UniformToFill" Height="79" Width="79"/>
            </Border>
            <StackPanel Grid.Column="1" Margin="14.5,0,0,0">
                <TextBlock Margin="5,0,0,0" Grid.Row="0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Name}" FontSize="32" Foreground="White" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
                <TextBlock Margin="5,0,0,0" Grid.Row="1" x:Name="PhoneTxt"  TextWrapping="Wrap" Foreground="White" FontSize="20" Text="{Binding Address}" />
            </StackPanel>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

Code I used to convert base64 String to Image in other Places

public static BitmapImage Base64StringToBitmap(string source)
{
    var ims = new InMemoryRandomAccessStream();
    var bytes = Convert.FromBase64String(source);
    var dataWriter = new DataWriter(ims);
    dataWriter.WriteBytes(bytes);
    dataWriter.StoreAsync();
    ims.Seek(0);
    var img = new BitmapImage();
    img.SetSource(ims);
    return img;
}

Is it possible to bind image source similar way to this

Source="{Binding Base64StringToBitmap(ProfileImage)}"

回答1:

You cannot call method in Xaml Binding like this. You need to convert it by implementing IValueConverter and then bind it. You should use a ValueConverter like this.

public class StringToBitmapConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value != null)
        {
        string source = value.ToString();
var ims = new InMemoryRandomAccessStream();
    var bytes = Convert.FromBase64String(source);
    var dataWriter = new DataWriter(ims);
    dataWriter.WriteBytes(bytes);
    dataWriter.StoreAsync();
    ims.Seek(0);
    var img = new BitmapImage();
    img.SetSource(ims);
    return img;
        }
return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

and use this converter in Xaml like this

xmlns:MyConverter="using:Your converter namespace  path"

<Page.Resources>
    <MyConverter:StringToBitmapConverter x:Key="ImageShow"/>
</Page.Resources>

<Image  x:Name="proImg" Source="{Binding ProfileImage,Converter={StaticResource ImageShow}}"  Stretch="Fill" Height="60" Width="60"/>

回答2:

You should add a XAML IValueConverter to bind the image in your scenario.Converter will do the conversion of Base64String to Bitmap Image.

Add a class with interface IValueConverter as like below.

public class PictureConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value == null)
        {
            return null;
        }

        string item = value.ToString();

        BitmapImage objBitmapImage = new BitmapImage();
        objBitmapImage = NewViewModel.Base64StringToBitmap(item);
        return objBitmapImage;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Now define a key to this converter either in Resource dictionary or in Page

<Page.Resources>
    <local:PictureConverter x:Key="PictureConverter"/>
</Page.Resources>

Then bind your key in XAML

<Image  x:Name="proImg" Source="{Binding ProfileImage,Converter={StaticResource PictureConverter}}"  Stretch="UniformToFill" Height="79" Width="79"/>

Hope now image is being displayed.