이미지가있는 Windows Phone 8.1 LongListSelector

Question

내 응용 프로그램에 긴 목록 선택기가 있습니다. 목록 아래에 아이콘과 캡션이 표시되어야합니다. 아이콘은 비트 맵을 생성하는 데 사용될 수있는 바이트 어레이와 같은 서버에서 다운로드되면, 아이콘은 서버로부터 다운로드하여 표시한다

아래 이미지에서 보듯이 그리드로 표시 . 비트 맵을 LongListSelectors 템플릿의 이미지에 바인딩하는 방법 내 데이터 템플릿은 다음과 같습니다.

<phone:LongListSelector.ItemTemplate> 
        <DataTemplate> 
         <Grid Margin="5,5,5,5" Background="{StaticResource PhoneAccentBrush}"> 
          <Grid VerticalAlignment="Center" HorizontalAlignment="Center"> 
           <Image Height="70" Width="70" Margin="10,0,0,0" Source="/Assets/Images/appimg.png"> 
           </Image> 
          </Grid> 
          <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">   
          <TextBlock Margin="5,5,5,5" TextTrimming="WordEllipsis" TextWrapping="NoWrap" Text="{Binding appTitle}"></TextBlock> 
          </StackPanel> 
         </Grid> 
        </DataTemplate> 
</phone:LongListSelector.ItemTemplate> 

현재 템플릿 경로에는 아이콘 경로가 하드 코드되어 있습니다. 비트 맵을 이미지에 바인딩하는 방법에 대한 정보를 입력하십시오.

Answer 1

전화 프로젝트의 어셈블리 이름입니다 가정 할 Conveter

을 사용 PhoneApp1

다음 코드를 변환 만들기 :

using System; 

namespace PhoneApp1.Converters 
{ 
    using System.Globalization; 
    using System.IO; 
    using System.Windows.Data; 
    using System.Windows.Media.Imaging; 

public class ByteToImageConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     var data = value as byte[]; 

     if (data != null) 
     { 
      using(var stream = new MemoryStream(data)) 
      { 
       var bitmapImage = new BitmapImage(); 
       bitmapImage.SetSource(stream); 
       return bitmapImage; 
      } 
     } 
     return null; 
    } 

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

당신의 XAML에서 다음 네임 스페이스 선언을 사용합니다 :

xmlns:converters="clr-namespace:PhoneApp1.Converters" 

xaml :뒤에 0

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
     <Grid.Resources> 
      <converters:ByteToImageConverter x:Key="ByteToImageConverter" /> 
     </Grid.Resources> 
     <phone:LongListSelector x:Name="lstTiles"> 
      <phone:LongListSelector.ItemTemplate> 
       <DataTemplate> 
        <Grid Margin="5,5,5,5" Background="{StaticResource PhoneAccentBrush}"> 
         <Grid VerticalAlignment="Center" HorizontalAlignment="Center"> 
          <Image Height="70" Width="70" Margin="10,0,0,0" Source="{Binding Image, Converter={StaticResource ByteToImageConverter}}"> 
          </Image> 
         </Grid> 
         <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center"> 
          <TextBlock Margin="5,5,5,5" TextTrimming="WordEllipsis" TextWrapping="NoWrap" Text="{Binding Title}"></TextBlock> 
         </StackPanel> 
        </Grid> 
       </DataTemplate> 
      </phone:LongListSelector.ItemTemplate> 
     </phone:LongListSelector> 
    </Grid> 

코드와 모델

public partial class MainPage : PhoneApplicationPage 
{ 
    // Constructor 
    public MainPage() 
    { 
     InitializeComponent(); 

     this.BindTiles(); 
    } 


    private void BindTiles() 
    { 
     var sampleRandomImageBytes = Convert.FromBase64String(@"iVBORw0KGgoAAAANSUhEUgAAAGgAAABbCAYAAACf8sCiAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADeSURBVHhe7dExAQAwDMCgmVj9O21tcORAAe/PbFwF4QrCFYQrCFcQriBcQbiCcAXhCsIVhCsIVxCuIFxBuIJwBeEKwhWEKwhXEK4gXEG4gnAF4QrCFYQrCFcQriBcQbiCcAXhCsIVhCsIVxCuIFxBuIJwBeEKwhWEKwhXEK4gXEG4gnAF4QrCFYQrCFcQriBcQbiCcAXhCsIVhCsIVxCuIFxBuIJwBeEKwhWEKwhXEK4gXEG4gnAF4QrCFYQrCFcQriBcQbiCcAXhCsIVhCsIVxCuIFxBuIJwBeEKos0e0/44s5MWYKUAAAAASUVORK5CYII="); 

     var data = new[] 
     { 
      new AppTitle { Title = "Tile 1", Image = sampleRandomImageBytes }, new AppTitle { Title = "Tile 2", Image = sampleRandomImageBytes }, 
      new AppTitle { Title = "Tile 3", Image = sampleRandomImageBytes }, new AppTitle { Title = "Tile 4", Image = sampleRandomImageBytes } 
     }; 

     lstTiles.ItemsSource = data; 
    } 
} 

public class AppTitle 
{ 
    public string Title { get; set; } 

    public byte[] Image { get; set; } 
}