data-binding - Windows Metro スタイル アプリのデータ バインディング

Question

プロジェクト内のフォルダーからスタックパネルに画像をロードする必要があります。各画像の下に名前も表示する必要があります。画像フォルダはいつでも変更でき、画像の数も変更できます (最大 50 画像)。これを処理するためにデータ バインディングを使用できるかどうかを知りたいです。イメージ ID、そのソース、および各イメージの名前を XML で保持することを考えました。これにより、残りのコードを変更することなく、イメージ フォルダーが変更されるたびにその XML ファイルを変更できるようになります。それは実現可能ですか？もしそうなら、どのように？誰かが私を案内してもらえますか？前もって感謝します。

Answer 1

1 つの解決策は、Filepicker を使用して、ユーザーがフォルダー内の画像を選択できるようにし、選択した画像を Items コントロールにバインドすることです。その後、そのアイテム コントロールを 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>