Hello,
Welcome to our Microsoft Q&A platform!
I have to go and select an image from the gallery and then get its path, which I can do, but how do I then assign that path to the binding, OperatorAvatar?
You can use Xamarin.Essentials: File Picker to select the image from the gallery, but you also need to copy the image to your application's interal storage, If you use external path, this image moved or delete, your image cannot be showed correctly and your path is wrong and need to update DB.
So you can refer to following code to select the image from the gallery , then copy it to your application's internal storage, use and save the internal path to your DB.
async Task<FileResult> PickAndShow(PickOptions options)
{
try
{
var result = await FilePicker.PickAsync(options);
if (result != null)
{
Text = $"File Name: {result.FileName}";
if (result.FileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase) ||
result.FileName.EndsWith("png", StringComparison.OrdinalIgnoreCase))
{
//copy image to your application's path
var newFile = Path.Combine(FileSystem.AppDataDirectory, result.FileName);
using (var stream = await result.OpenReadAsync())
using (var newStream = File.OpenWrite(newFile))
await stream.CopyToAsync(newStream);
ImagePath = newFile;
// Image = ImageSource.FromStream(() => stream);
}
}
return result;
}
catch (Exception ex)
{
// The user canceled or something went wrong
}
return null;
}
Here is ViewModel, I make a test to pick the image, then make it to display to the Image
control. After your image shown in the layout, you can save path to your DB in GetImageCommand
.
public class MyViewModel: INotifyPropertyChanged
{
//add a property to the ViewModel, if the image need to be show in your layout.
string imagePath;
public string ImagePath
{
set
{
if (imagePath != value)
{
imagePath = value;
OnPropertyChanged("ImagePath");
}
}
get
{
return imagePath;
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public MyViewModel()
{
GetImageCommand = new Command<object>(async (key) => {
await PickAndShow(PickOptions.Images);
// After your image shown in the layout, you can save path to your DB at here
});
}
public ICommand GetImageCommand { protected set; get; }
string Text;
async Task<FileResult> PickAndShow(PickOptions options)
{
try
{
var result = await FilePicker.PickAsync(options);
if (result != null)
{
Text = $"File Name: {result.FileName}";
if (result.FileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase) ||
result.FileName.EndsWith("png", StringComparison.OrdinalIgnoreCase))
{
//copy image to your application's path
var newFile = Path.Combine(FileSystem.AppDataDirectory, result.FileName);
using (var stream = await result.OpenReadAsync())
using (var newStream = File.OpenWrite(newFile))
await stream.CopyToAsync(newStream);
ImagePath = newFile;
// Image = ImageSource.FromStream(() => stream);
}
}
return result;
}
catch (Exception ex)
{
// The user canceled or something went wrong
}
return null;
}
}
Here is my layout.
<StackLayout>
<Image Source="{Binding ImagePath}" />
<Button Text="Picker Image"
Command="{ Binding GetImageCommand }"
CommandParameter="{Binding .}" ></Button>
</StackLayout>
Here is my layout background code.
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new MyViewModel();
}
}
Here is running screenshot.
Best Regards,
Leon Lu
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.