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

我需要将项目中的文件夹中的图像加载到stackpanel。在每个图像下还应显示一个名称。图像文件夹可以随时更改，图像的数量也可以更改。对于最多50个图像，我想知道是否可以使用数据绑定来处理此问题。我想到了在XML中包含图像ID、它们的源代码和每个图像的名称，这样我就可以在图像文件夹更改时更改该XML文件，而无需更改其余代码。这可行吗？如果是，怎么做？有人能指引我吗？提前感谢。

一种解决方案是使用文件选择器让用户选择文件夹中的图像，然后将所选图像绑定到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;

        }
    }

下面是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>

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