的Windows Metro风格应用程序的数据绑定

我有一个要求，在项目中一个StackPanel从文件夹载入图像。在每张图片下，还应该显示一个名字。图像文件夹可以随时更改，图像数量也可以更改（最多50张图像）我想知道是否可以使用数据绑定来处理此问题。我想过在XML中为每个图像分配图像ID，它们的来源和名称，以便每当图像文件夹发生更改时都可以更改该XML文件，而无需更改其余代码。这是可行的吗？如果是这样如何？有人能指导我吗？先谢谢你。的Windows Metro风格应用程序的数据绑定

来源

2012-10-03 harsh

一种解决方案将是使用一个Filepicker让用户选择的文件夹内的图像，然后将选择的图像结合到一个ItemsControl。然后itemscontrol可以放在Stackpanel中。这是使用该解决方案的快速示例。

这里的代码隐藏采摘的图像文件：

private List<EditableImage> availableImagesList = new List<EditableImage>(); 

    private async void FilePicker_Clicked(object sender, RoutedEventArgs e) 
    { 

     FileOpenPicker openPicker = new FileOpenPicker(); 
     openPicker.ViewMode = PickerViewMode.List; 
     openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary; 

     //TODO: add supported image file types 
     openPicker.FileTypeFilter.Add("jpg,png,gif"); 

     // We prompt the user to pick one or more files 
     IReadOnlyList<StorageFile> files = await openPicker.PickMultipleFilesAsync(); 

     if (files.Count > 0) 
     { 
      availableImages.DataContext = null; 
      String fp = ""; // The path of the picked image 
      int index = availableImagesList.Count; 

      foreach (StorageFile file in files) 
      { 
       // Copying the selected image to local app data folder 
       //TODO: check if the selected file is actually and image 
       if (file != null) 
       { 
        StorageFile fileCopy = await file.CopyAsync(ApplicationData.Current.LocalFolder, file.DisplayName + file.FileType, NameCollisionOption.ReplaceExisting); 
        fp = fileCopy.Path; 
       } 

       //Creating the image 
       CustomImage picToAdd = new CustomImage(index+1, file.DisplayName, fp); 

       //Adding the image as an UI element to the app bar 
       availableImagesList.Add(picToAdd); 
      } 

      availableImages.DataContext = availableImagesList; 

     } 
    }

的CustomImage模型：

public class CustomImage 
{ 
    private static Uri _baseUri = new Uri("ms-appx:///"); 

    private int _id; 
    public int Id 
    { 
     get { return _id; } 
     set 
     { 
      this.SetProperty(ref this._id, value); 
     } 
    } 

    private string _name; 
    public string Name 
    { 
     get { return _name; } 
     set 
     { 
      this.SetProperty(ref this._name, value); 
     } 
    } 

    private string _imgPath; 
    public string ImgPath 
    { 
     get { return _imgPath; } 
     set 
     { 
      this.SetProperty(ref this._imgPath, value); 
     } 
    } 

    private String _imagePath = null; 

    private ImageSource _image = null; 
    public ImageSource Image 
    { 
     get 
     { 
      if (this._image == null && this._imagePath != null) 
      { 
       this._image = new BitmapImage(new Uri(CustomImage._baseUri, this._imagePath)); 
      } 
      return this._image; 
     } 

     set 
     { 
      this._imagePath = null; 
      this.SetProperty(ref this._image, value); 
     } 
    } 

    public void SetImage(String path) 
    { 
     this._image = null; 
     this._imagePath = path; 
     this.OnPropertyChanged("Image"); 
    } 

    public CustomImage(int id, string name, string imagepath) 
    { 

     SetImage(imagepath); 
     _id = id; 
     _name = name; 

    } 
}

下面是对的StackPanel内的ItemsControl的XAML：

  <StackPanel x:Name="loadedImages" HorizontalAlignment="Left" Orientation="Horizontal"> 

       <!--Displaying the selected images in stackpanel--> 
       <ItemsControl ItemsSource="{Binding}" ItemsPanel="{StaticResource LoadedItemsPanel}"> 
        <ItemsControl.ItemTemplate> 
         <!--The template for each object that is displayed as an UI element--> 
         <DataTemplate> 
          <Grid Height="88" Margin="2,0" Width="88" > 
           <Image Source="{Binding Image}"/> 
           <TextBlock Text="{Binding Name}"/> 
          </Grid> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </StackPanel>

在你页面资源，您还必须定义：

<ItemsPanelTemplate x:Key="LoadedItemsPanel"> 
     <WrapGrid Orientation="Horizontal"/> 
    </ItemsPanelTemplate>

来源

2012-10-03 09:45:59 fincooper

的Windows Metro风格应用程序的数据绑定

回答

相关问题