Windows Metro Style應用程序數據綁定

Question

我需要將圖像從項目中的文件夾加載到Stackpanel。 在每個圖像下還應顯示一個名稱。 image文件夾可以隨時更改，圖像數量也可以更改。（最多50張圖像）我想知道是否可以使用數據綁定來處理此問題。 我想到了在XML中具有圖像ID，它們的來源和每個圖像的名稱，以便每當圖像文件夾更改時就可以更改該XML文件，而無需更改其余代碼。 那可行嗎？ 如果可以，怎么辦？ 有人可以指導我嗎？ 先感謝您。

Answer 1

一種解決方案是使用Filepicker，讓用戶選擇文件夾中的圖像，然后將所選圖像綁定到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>