从列表视图中的字节绑定图像（Windows phone 8.1）

Question

我正在开发我的第一个 windows phone 8.1 应用程序。我需要在列表视图中绑定图像。图片为 bytes[] 格式。我已经使用此函数转换为位图图像

public async Task<BitmapImage> GetImageFromByteArray(string s_FileName)
    {
        using (InMemoryRandomAccessStream raStream = new InMemoryRandomAccessStream())
        {
            using (DataWriter writer = new DataWriter(raStream))
            {
                byte[] data = await GetImageBytes(s_FileName);
                writer.WriteBytes(data);
                await writer.StoreAsync();
                await writer.FlushAsync();
                writer.DetachStream();
            }

            raStream.Seek(0);
            BitmapImage bitMapImage = new BitmapImage();
            bitMapImage.SetSource(raStream);
            return bitMapImage;
        }
    }

现在我需要将此图像绑定到列表视图项中的图像控件。

这是我的 XAML 代码。图像控件名称为 (img_test)

<Grid>
    <ListView x:Name="lst_Test" Background="White" Foreground="Black" SelectionChanged="lst_BestDrivers_SelectionChanged" Margin="10">
        <ListView.Resources>
            <DataTemplate x:Key="ItemsTest">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="15*" />
            <ColumnDefinition Width="15*" />
            <ColumnDefinition Width="15*" />
            <ColumnDefinition Width="30" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Grid Grid.Column="0" Grid.RowSpan="4" />
        <Grid Grid.Column="1" Grid.ColumnSpan="5" />

        <Image x:Name="img_test" Grid.Column="0" Grid.RowSpan="3" Margin="10,10,10,10" />
        <TextBlock Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="5" Text="{Binding Name}"></TextBlock>
        <StackPanel Orientation="Horizontal" Grid.Column="2" Grid.Row="1">
            <TextBlock Text="{Binding ID}" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
            <Image Source="ms-appx:///Assets/Icons/Icon1png" HorizontalAlignment="Right" VerticalAlignment="Center"></Image>
        </StackPanel>
    </Grid>
            </DataTemplate>
        </ListView.Resources>
        <ListView.ItemTemplate>
            <StaticResource ResourceKey="ItemsTest"/>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

提前致谢

编辑： 以下是为进一步澄清所做的工作：

1- 我使用图像文件名通过远程 Web 服务获取字节数组。

2- 我使用返回的bytes[] 来获取bitmap 对象。

如何使用该数组或位图进行绑定？ 我尝试了 here 中的示例，但它对我不起作用，因为调用 Web 服务需要 async 调用，这在实现 IValueConverter 接口后是不可能的

Answer 1

假设您的 BitmapImage 在属性中，可以绑定。您可以将图像源绑定到 BitmapImage

<Image x:Name="img_test" Source="{Binding MyBitmapImage}" Grid.Column="0" Grid.RowSpan="3" Margin="10,10,10,10" />

如果属性中没有 BitmapImage，则只需设置对象的来源

img_test.Source = myBitmapImage

Answer 2

在 stackoverflow 和其他站点中挖掘并看到许多示例后，我必须解决 async 问题。使用 here 中的TaskCompletionNotifier 类解决了这个问题，它允许我在实现ivalueconverter 接口的同时进行async 调用。使用上述函数从bytes数组中获取位图图像。

我需要做的就是

    public class BytesToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        using (InMemoryRandomAccessStream raStream = new InMemoryRandomAccessStream())
        {
            return new TaskCompletionNotifier<BitmapImage>(GetImageFromByteArray((String)value));
        }
    }
}

另外，我需要使用这个添加一个静态资源

xmlns:Global="using:MYNAMESPACE"
<Page.Resources>
    <Global:BytesToImageConverter x:Key="LocalImageConverter" />
</Page.Resources>

BytesToImageConverter 类是实现ivalueconverter 接口的类。

现在，使用资源绑定图片

<Image DataContext="{Binding PhotoPath, Converter={StaticResource LocalImageConverter}}" 
               x:Name="img_test" 
               Source="{Binding Result}"
               Grid.Column="0" 
               Grid.RowSpan="3" 
               Margin="10,10,10,10" 
               Width="90"
               Height="90"
               Stretch="Fill"/>

源绑定到Result

这样就可以了。

谢谢大家