Windows 8 XAML : 데이터 바인딩을 통해 GridView에 이미지 목록 표시

Question

사용자가 FileOpenPicker를 통해 선택한 이미지 목록을 표시하려는 C#으로 Windows 8 앱을 작성하려고합니다. XAML 데이터 바인딩을 사용하여 이러한 이미지를 GridView에 표시하려고합니다. 몇 가지 시도했지만 데이터 바인딩이 작동하지 않는 것 같습니다. 어떤 위치에서 GridView의 itemsSource를 정확히 설정해야하는지 잘 모르겠습니다. MainPage 생성자에서이 작업을 수행하면 사용자가 이미지를 선택하면 나중에 데이터 바인딩 된 목록이 채워지기 때문에 GridView가 새로 고쳐지지 않습니다.

나는이 문제를 어떻게 해결합니까? 당신이 GridView을 결합 할 경우

Answer 1

UPDATE 1

는, 당신은 몇 가지를 추가해야합니다. 내 대답을 몇 개의 주석 행으로 업데이트했는지 확인하십시오. 당신은

---

다음

가고 XAML

를 통해 ItemsSource을 공급하기 위해 그 라인을 추가해야합니다.

C 번호

private async void btnBrowsePhotos_Click(object sender, RoutedEventArgs e) 
{ 
    //var objImageItem = new ImageItem(); 
    FileOpenPicker openPicker = new FileOpenPicker(); 

    openPicker.ViewMode = PickerViewMode.Thumbnail; 
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary; 
    openPicker.FileTypeFilter.Add(".jpg"); 
    openPicker.FileTypeFilter.Add(".jpeg"); 
    openPicker.FileTypeFilter.Add(".png"); 

    var files = await openPicker.PickMultipleFilesAsync(); 
    List<ImageItem> ImageList = new List<ImageItem>(); 
    foreach (var file in files) 
    { 
     using (var stream = await file.OpenAsync(FileAccessMode.Read)) 
     { 
      //objImageItem.ImageList.Add(new ImageItem(stream, file.Name)); 
      ImageList.Add(new ImageItem(stream, file.Name)); 
     } 
    } 

    gv.ItemsSource = ImageList; 
    //gv.DataContext = objImageItem; 
} 

public class ImageItem //: INotifyPropertyChanged 
{ 
    /*private ObservableCollection<ImageItem> _ImageList = new ObservableCollection<ImageItem>(); 
    public ObservableCollection<ImageItem> ImageList 
    { 
     get { return _ImageList; } 
     set { _ImageList = value; OnPropertyChanged("ImageList"); } 
    }*/ 

    public BitmapImage Source { get; set; } 
    public string Name { get; set; } 

    public ImageItem() 
    { 

    } 

    public ImageItem(IRandomAccessStream stream, string name) 
    { 
     BitmapImage bmp = new BitmapImage(); 
     bmp.SetSource(stream); 
     Source = bmp; 
     Name = name; 
    } 
} 

XAML

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel> 
     <Button Click="btnBrowsePhotos_Click" Style="{StaticResource BrowsePhotosAppBarButtonStyle}" /> 

     <!-- Add ItemsSource="{Binding ImageList}" to GridView --> 

     <GridView x:Name="gv"> 
      <GridView.ItemTemplate> 
       <DataTemplate> 
        <Grid> 
         <Image Stretch="Fill" Source="{Binding Source}" Height="192" Width="342" /> 
         <Border Opacity=".8" Background="Black" VerticalAlignment="Bottom" > 
          <TextBlock Text="{Binding Name}" FontSize="18"/> 
         </Border> 
        </Grid> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
      <GridView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapGrid MaximumRowsOrColumns="3" /> 
       </ItemsPanelTemplate> 
      </GridView.ItemsPanel> 
     </GridView> 
    </StackPanel> 
</Grid>