在Windows Phone 8.1中，从字节绑定图像到ListView的方法是什么？

Question

我正在开发我的第一个Windows Phone 8.1应用程序。我需要在列表视图中绑定一张图片。该图片以bytes[]格式存在。我已经使用以下函数将其转换为Bitmap图像：

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- 我使用图像文件名通过远程网络服务获取一个字节数组。

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

我该如何使用这个数组或位图进行绑定？ 我尝试了这里的示例，但它对我没有用，因为调用网络服务需要一个async调用，而在实现IValueConverter接口后这是不可能的。

- Abd-elhameed Quraim

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

- StijnvanGaal

---

我没有它的属性，我所拥有的只是数据源中的文件名，用于获取位图对象。 - Abd-elhameed Quraim

编辑后无属性。但这并非真正的约束。 - StijnvanGaal

这是列表视图项的一部分；我该怎么做？ - Abd-elhameed Quraim

Answer 2

在stackoverflow和其他网站上查看了许多示例后，我已经解决了async问题。使用这里中的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

这样就可以解决问题了。

感谢大家。

- Abd-elhameed Quraim