Question

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

Answer 1

一种解决方案是使用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>

Windows Metro Style应用程序数据绑定

1 个答案: