c# - Imagen de enlace de bytes en la vista de lista(Windows phone 8.1)

listview windows-phone-8.1

Question

Estoy desarrollando mi primera aplicación para Windows 8.1. Necesito vincular una imagen en una vista de lista. la imagen está en formato de bytes [] . Ya he convertido a una imagen de mapa de bits usando esta función

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;
}
}

ahora necesito vincular esta imagen a un control de imagen en un elemento de vista de lista.

Aquí está mi Código XAML. el nombre de control de imagen es ( 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>

Gracias por adelantado

EDITAR: Aquí está lo que se hace para aclarar más:

1- Uso el nombre de archivo de imagen para obtener una matriz de bytes utilizando un servicio web remoto.

2- Utilizo los bytes[] devueltos bytes[] para obtener un objeto de bitmap .

¿Cómo puedo usar esta matriz o el mapa de bits para el enlace? Probé la muestra aquí , pero no funcionó porque la llamada del servicio web requiere una llamada async que no es posible después de implementar la interfaz IValueConverter

Answer 1

Suponiendo que tiene su BitmapImage en una propiedad, listo para el enlace. Puedes vincular el origen de la imagen al BitmapImage

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

Si no tiene su BitmapImage en una propiedad, entonces simplemente debe establecer el origen del objeto

img_test.Source = myBitmapImage

Answer 2

después de excavar y ver muchas muestras aquí en y otros sitios, tengo que resolver el problema async . Se soluciona usando la clase TaskCompletionNotifier aquí que me permite realizar llamadas async mientras implemento la interfaz ivalueconverter . utilizando la función anterior para obtener la imagen de mapa de bits de la matriz de bytes .

todo lo que tengo que hacer es

 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));
}
}
}

Además, necesito agregar un recurso estático usando esto

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

la clase BytesToImageConverter es la que implementa la interfaz ivalueconverter .

ahora, usa el recurso para unir la imagen

<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"/>

la fuente está obligada a Result

esto hará el truco.

gracias a todos