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