Binding Bild von FilePicker und Projektordner in ViewModel

Question

Ich hatte ein Problem mit der Anzeige von Bild, das aus 2 Quellen kommt. Ich habe eine MainPage und MainPageViewModel. Beim ersten Laden der Seite erhalten wir ein Bild aus dem Projektordner mit seinem Pfad. So in MainPage.xaml

<Image Source="{Binding ImageUri}" VerticalAlignment="Center" HorizontalAlignment="Center" Width="300" Height="300"/> 

Und MainPageViewModel

private string _imageUri; 
public RelayCommand PickPhotoCommand { get; set; } 
public string ImageUri 
{ 
    get { return _imageUri; } 
    set 
    { 
     _imageUri = value; 
     NotifyPropertyChanged("ImageUri"); 
    } 
} 

Alles ist klar und einfach. Aber dann kann der Benutzer ein Bild von filePicker auswählen und das alte Bild muss durch das ausgewählte Bild ersetzt werden. Aber wir können Uri nicht von StorageFile abrufen, das von FilePicker zurückgegeben wurde, und nur die Option BitmapImage von StorageFile mit SetSourceAsync() abrufen. Ich habe zwei Lösungen, die mein Problem mit der Anzeige von Bildern auf meiner XAML-Seite lösen. Thi erstes ist - verwenden Bitmap für beiden Quellen, so zum Bild von Projektordnern oder sonstwo ich

ImageUri = new BitmapImage(new Uri("ms-appx:///Assets/StoreLogo.png")); 

verwenden kann und meinen ImageUri Eigenschaft Typen Bitmap ändern. Aber mein Teamlead sagt, dass das keine gute Lösung ist, weil BitmapImage benutzt wurde um das Bild zu ändern (Scale, Crop etc.). Es ist also semantisch inkorrekt. Die zweite Lösung ist - Datei von FilePicker holen, in Temprorary Folder kopieren und dann kopierte Datei von Folder und nehmen Sie den Pfad.

StorageFile file = await openPicker.PickSingleFileAsync(); 
StorageFolder tempFolder = ApplicationData.Current.TemporaryFolder; 
StorageFile copiedFile = await file.CopyAsync(tempFolder, file.Name, NameCollisionOption.ReplaceExisting); 
var fileFromTemp = await ApplicationData.Current.TemporaryFolder.GetFileAsync(copiedFile.Name); 
ImageUri = fileFromTemp.Path; 

Und wir können String für unsere ImageUri Eigenschaft verwenden. Bitte geben Sie Ihr Feedback, welche dieser Lösungen am besten und korrekter ist?

Answer 1

Ändern Sie den Typ Ihrer Ansichtsmodelleigenschaft in ImageSource, d. H. Den Typ der Source-Eigenschaft des Image-Steuerelements.

private ImageSource image; 
public ImageSource Image 
{ 
    get { return image; } 
    set 
    { 
     image = value; 
     NotifyPropertyChanged("Image"); 
    } 
} 

Jetzt können Sie leicht ein BitmapImage z zuweisen

viewModel.Image = new BitmapImage(new Uri("ms-appx:///Assets/StoreLogo.png")); 

oder

var bitmap = new BitmapImage(); 
using (var stream = await file.OpenReadAsync()) 
{ 
    await bitmap.SetSourceAsync(stream); 
} 
viewModel.Image = bitmap; 

sondern auch Instanzen anderer abgeleiteten Typen, wie WriteableBitmap.