Develop Reference

How do I use Xamarin.Essentials MediaPicker with MVVM and DataBinding

I am trying to capture a photo in my app and as this needs to be implemented on different pages I need it to work within MVVM architecture. It works perfectly fine when I test it on the Camera page code behind, but as soon as I implement DataBinding and MVVM, the Emulator camera fails to initialize. I don't get any build or deployment errors and have no idea where to start looking. The documentation isn't much help. The images captured needs to be saved and reused each time the app is opened - something to keep in mind perhaps.
Here is my ViewModel:
using System.Collections.Generic;
using System.Text;
using Xamarin.Essentials;
using Xamarin.Forms;
using XamCam.Views;
using MvvmHelpers;
using System.ComponentModel;
using System.Windows.Input;
namespace XamCam.ViewModels
{
public class CameraViewModels : BaseViewModel
{
public CameraViewModels()
{
TakePhoto = new Command(OnTakePhoto);
}
public ICommand TakePhoto { get; }
private Image image; // = new Image();
public Image CamImage
{
get => image;
set
{
if (image == value)
return;
image = value;
OnPropertyChanged();
}
}
async void OnTakePhoto()
{
var result = await MediaPicker.CapturePhotoAsync();
if (result != null)
{
var stream = await result.OpenReadAsync();
image.Source = ImageSource.FromStream(() => stream);
}
}
}
}
This is my View XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodels="clr-namespace:XamCam.ViewModels"
x:DataType="viewmodels:CameraViewModels"
x:Class="XamCam.Views.Camera"
BackgroundColor="AliceBlue">
<ContentPage.BindingContext>
<viewmodels:CameraViewModels/>
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout BindingContext="CameraViewModel">
<Label Text="Welcome to The XamCam!" />
<Button Text="Take Photo"
Command="{Binding TakePhoto}"/>
<Image BindingContext="{Binding CamImage}"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I suspect that it has something to do with my CamImage property but I am very new to this and I am not sure if this is the correct way to bind a media object.

I suspect that it has something to do with my CamImage property but I am very new to this and I am not sure if this is the correct way to bind a media object.
I suggest you can add ImageSource1 property, not Image property in CameraViewModels.
public class CameraViewModels : INotifyPropertyChanged
{
public CameraViewModels()
{
TakePhoto = new Command(OnTakePhoto);
}
public ICommand TakePhoto { get; }
private ImageSource image;
public ImageSource CamImage
{
get => image;
set
{
if (image == value)
return;
image = value;
RaisePropertyChanged("CamImage");
}
}
async void OnTakePhoto()
{
var result = await Xamarin.Essentials.MediaPicker.CapturePhotoAsync();
if (result != null)
{
var stream = await result.OpenReadAsync();
CamImage = ImageSource.FromStream(() => stream);
}
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
<ContentPage
x:Class="App1.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1">
<ContentPage.BindingContext>
<local:CameraViewModels />
</ContentPage.BindingContext>
<StackLayout>
<StackLayout>
<Label Text="Welcome to The XamCam!" />
<Button Command="{Binding TakePhoto}" Text="Take Photo" />
<Image Source="{Binding CamImage}" />
</StackLayout>
</StackLayout>

Why does not Xamarin bind property?

I want to save data to application on window closing or application crashes.
When user writes to entry the data gets storen in property, but for some reason the binding does not work.
I followed a course on Udemy for this. I think it has something to do with referencing to different place in PCL.
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace TheIVInventory.ViewModels
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class AddItemPage : ContentPage
{
public AddItemPage()
{
InitializeComponent();
BindingContext = Application.Current;
}
private void Button_Clicked(object sender, EventArgs e) //Item added click.
{
}
}
}
Xaml :
<ContentPage
BackgroundColor="#104850"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="TheIVInventory.ViewModels.AddItemPage">
<StackLayout VerticalOptions="Center" x:Name="formLayout" Margin="20">
<Entry PlaceholderColor="White" Keyboard="Chat" Margin="40" Placeholder="Item Name" TextColor="White" Text="{Binding ItemName}"></Entry>
<Entry PlaceholderColor="White" Keyboard="Numeric" Margin="40" Placeholder="Item Price MIN (€)" TextColor="White"></Entry>
<Entry PlaceholderColor="White" Keyboard="Numeric" Margin="40" Placeholder="Item Price MAX (€)" TextColor="White"></Entry>
<Editor PlaceholderColor="White" Margin="40" VerticalOptions="FillAndExpand" Keyboard="Chat" Placeholder="Item Description" TextColor="White"></Editor>
<Button Text="Save" BackgroundColor="#80EEFF" Margin="10" Clicked="Button_Clicked" ></Button>
<Image Source="konjakki.png" Scale="0.15" AnchorY="0" BackgroundColor="#104850" ></Image>
</StackLayout>
</ContentPage>
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace TheIVInventory
{
public partial class App : Application
{
// Setting the item add members.
private const string itemNameKey = "Name";
private const string itemMinPrice = "0";
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage())
{
BarBackgroundColor = Color.FromHex("#104850"),
BarTextColor = Color.White
}; // Making the navigation possible.
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
// Making the add item properties.
public string ItemName
{
get
{
if (Properties.ContainsKey(itemNameKey))
return Properties[itemNameKey].ToString();
return "";
}
set
{
Properties[ItemName] = value;
}
}
public string ItemMinPrice
{
get
{
if (Properties.ContainsKey(itemMinPrice))
return Properties[itemMinPrice].ToString();
return "";
}
set
{
Properties[itemMinPrice] = value;
}
}
}
}

The main issue is that you don't appear to have set a BindingContext for your XAML to refer to.
It also looks to me as if you are trying to implement MVVM structure, but have not entirely understood it.
The points that immediately draw my eye are:
Your view code is within a ViewModel namespace rather than View
(which will prove confusing later on).
You have code that should be within a ViewModel class (which will be your Views BindingContext) in your main App code.
I would suggest that you create a Views namespace and move your AddItemPage code to it;
Create an AddItemViewModel and use it to implement your ItemName and ItemMinPrice properties.
Instead of using a button_clicked event in the code behind, bind the Button Command to an ICommand property type in your ViewModel. Then have your ViewModel instantiate the ICommand to use an internal method to run your save code.

If you want to achieve the MVVM in xamarin forms. Your binding way is wrong, you could create a model, put the ItemMinPrice and ItemName in this model like following code.Achieve the INotifyPropertyChanged interface, when data was changed.
class MyModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
string itemMinPrice;
public string ItemMinPrice
{
set
{
if (itemMinPrice != value)
{
itemMinPrice = value;
OnPropertyChanged("ItemMinPrice");
}
}
get
{
return itemMinPrice;
}
}
string itemName;
public string ItemName
{
set
{
if (itemName != value)
{
itemName = value;
OnPropertyChanged("ItemName");
}
}
get
{
return itemName;
}
}
}
Then you can change the bindingContext, like this code BindingContext = new MyModel();
I add a break point in the MyModel, give a itemName in the Entry you can see it was executed like following GIF.
Note: If you want to achieve that model data changed could display the view. You should change Mode to TwoWay like following code.
<Entry PlaceholderColor="White" Keyboard="Chat" Margin="40"
Placeholder="Item Name" TextColor="Black" Text="{Binding ItemName,
Mode=TwoWay}"></Entry>
Here is offical artical about MVVM, you can refer to it.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm

I'm looking for a more reliable option in Xamarin

I dont know how is it called.
I need to create something that works this way:
Do button, when you click button under button you have list and you can choos one option. List should be button's width.
You can find it in aplication to choose for example language of country.
Do Xamarin built-in something to create this? Or can someone show me how implement this?

Or you could roll your own in Forms, something like:
ImagePickerDropDown.xaml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ImagePickerDropdownSample.ImagePickerDropdown"
x:Name="imagePickerDropDown" >
<ContentView.Content>
<StackLayout>
<ImageButton x:Name="mainButton"
Source="{Binding Source={x:Reference imagePickerDropDown}, Path=SelectedImage}"
Clicked="ImageClicked" />
<StackLayout x:Name="stackView"
BindableLayout.ItemsSource="{Binding Source={x:Reference imagePickerDropDown}, Path=Images}"
IsVisible="False">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<ImageButton Source="{Binding .}" Clicked="ImageSelected"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</ContentView.Content>
</ContentView>
ImagePickerDropDown.xaml.cs:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace ImagePickerDropdownSample
{
public partial class ImagePickerDropdown : ContentView
{
public ImagePickerDropdown()
{
InitializeComponent();
}
private void ImageSelected(object sender, EventArgs e)
{
var imageSource = (sender as ImageButton).Source;
SelectedImage = imageSource;
mainButton.IsEnabled = true;
stackView.IsVisible = false;
}
private void ImageClicked(object sender, EventArgs e)
{
mainButton.IsEnabled = false;
stackView.IsVisible = true;
}
public static readonly BindableProperty SelectedImageProperty =
BindableProperty.Create(nameof(SelectedImage), typeof(ImageSource), typeof(ImagePickerDropdown), null);
public ImageSource SelectedImage
{
get
{
return (ImageSource)GetValue(SelectedImageProperty);
}
set
{
SetValue(SelectedImageProperty, value);
}
}
public static readonly BindableProperty ImagesProperty =
BindableProperty.Create(nameof(Images), typeof(ObservableCollection<ImageSource>), typeof(ImagePickerDropdown), null);
public ObservableCollection<ImageSource> Images
{
get
{
return (ObservableCollection<ImageSource>)GetValue(ImagesProperty);
}
set
{
SetValue(ImagesProperty, value);
}
}
}
}
Using it XAML:
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="ImagePickerDropdownSample.MainPage"
xmlns:local="clr-namespace:ImagePickerDropdownSample"
Padding="0,50,0,0"
BackgroundColor="Black">
<StackLayout
x:Name="mainLayout">
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="Start"
TextColor="White"/>
<local:ImagePickerDropdown SelectedImage="{Binding SelectedImage}"
Images="{Binding Images}"
WidthRequest="50"
HorizontalOptions="Center"
BackgroundColor="Black"/>
</StackLayout>
</ContentPage>
Using it code behind:
using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace ImagePickerDropdownSample
{
// Learn more about making custom code visible in the Xamarin.Forms previewer
// by visiting https://aka.ms/xamarinforms-previewer
[DesignTimeVisible(false)]
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
Images = new ObservableCollection<ImageSource>();
Images.Add(new FileImageSource() { File = "image1.png" });
Images.Add(new FileImageSource() { File = "image2.png" });
Images.Add(new FileImageSource() { File = "image3.png" });
SelectedImage = Images[0];
BindingContext = this;
}
ImageSource _selectedImage;
public ImageSource SelectedImage
{
get
{
return _selectedImage;
}
set
{
if (_selectedImage != value)
{
_selectedImage = value;
OnPropertyChanged(nameof(SelectedImage));
}
}
}
ObservableCollection<ImageSource> _images;
public ObservableCollection<ImageSource> Images
{
get
{
return _images;
}
set
{
if (_images != value)
{
_images = value;
OnPropertyChanged(nameof(Images));
}
}
}
}
}

Use a Spinner .. basically you need to first create an ArrayAdapter then attach the ArrayAdapter to a Spinner :
//we need a List of some type because the ArrayAdapter takes one as param
var items = new List<string>() {"one", "two", "three"};
//instantiate the ArrayAdapter with context, your Resource is a layout, items is the List
var adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleSpinnerItem, items);
//then instantiate your spinner
var spinner = FindViewById<Spinner>(Resource.Id.spinner);
//and attach the adapter to the spinner like this
spinner.Adapter = adapter;
from #Aaron He
Create android spinner dynamically in Xamarin

Xamarin remove item from list ObservableCollection and listview form

I have a simple app on Xamarin (a to-do list) which purpose is to dynamically create and remove items from a list. I am using ObservableCollection for the list. I spent a ton of time researching about this but I could not get it working.
Right now my app can add items to the list and display it in the main form. Now I want it to delete the corresponding items from the list with a click of a button.
Here is my code:
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App3"
x:Class="App3.MainPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Add" Clicked="addnewitem"/>
</ContentPage.ToolbarItems>
<ContentPage.BindingContext>
<local:viewmod/>
</ContentPage.BindingContext>
<StackLayout>
<Editor x:Name="txtboxNAME"></Editor>
<ListView ItemsSource="{Binding Tasks}" HasUnevenRows="True" x:Name="itemListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame>
<StackLayout>
<Editor Text="{Binding Taskname}"/>
<Switch/>
<Button Text="Delete" CommandParameter="{Binding ItemName}" Clicked="DeleteClicked">
</Button>
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
MainPage.xaml.cs (The code behind the MainPage form)
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace App3
{
public partial class MainPage : ContentPage
{
static int itemid = 0;
public MainPage()
{
InitializeComponent();
BindingContext = new viewmod();
}
private void addnewitem(object sender, EventArgs e)
{
var vm = BindingContext as viewmod;
string itemnameval = "item_" + itemid.ToString();
vm.AddItems(this.txtboxNAME.Text, itemnameval);
itemid++;
}
private void DeleteClicked(object sender, EventArgs e) // Item should be deleted from the list
{
// This does not work
var itemsender = (Xamarin.Forms.Button)sender;
var item = itemsender?.BindingContext as Task;
var vm = BindingContext as viewmod;
vm?.RemoveCommand.Execute(item);
//vm.Tasks.Remove(item); // conversion error
// This does not work either. "allItems" is not defined.
TaskClass listitem = (from itm in allItems
where itm.ItemName == item.CommandParameter.ToString()
select itm).FirstOrDefault<TaskClass>();
allItems.Remove(listitem);
}
}
}
TaskClass.cs
namespace App3
{
class TaskClass
{
public string Taskname { get; set; }
public string ItemName { get; set; }
}
}
viewmod.cs
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace App3
{
class viewmod
{
public ObservableCollection<TaskClass> Tasks { get; set; } = new ObservableCollection<TaskClass>();
public viewmod()
{
}
public void AddItems(string taskn, string taskid)
{
Tasks.Add(new TaskClass { Taskname = $"{taskn}", ItemName=$"{taskid}" });
}
public void DelItem(TaskClass task)
{
Tasks.Remove(task);
}
public Command<TaskClass> RemoveCommand
{
get
{
return new Command<TaskClass>((task) =>
{
Tasks.Remove(task);
});
}
}
}
}

modify your XAML first = the "." syntax passes the entire bound object
<Button Text="Delete" CommandParameter="{Binding .}" Clicked="DeleteClicked" />
then in your code behind
private void DeleteClicked(object sender, EventArgs e)
{
var itemsender = (Xamarin.Forms.Button)sender;
var item = (TaskClass)itemsender?.CommandParameter;
// it would be much cleaner to keep a ref to your VM in your page
// rather than continually casting it from BindingContext
var vm = BindingContext as viewmod;
vm.Tasks.Remove(item);
}

Changing ViewModel Property, in another class Doesn't Update UI

I'm having this issuse in a more complex App so I built a simple App to test it out on. but first the code, which is an odd layout for a simple app but bare in mind that this mimics my other app.
Note, Baseviewmodel inherits from basemodel.
MainPage
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestINotify.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TestINotify">
<ContentPage.BindingContext>
<local:MainPageViewModel />
</ContentPage.BindingContext>
<StackLayout>
<!-- Place new controls here -->
<Label HorizontalOptions="Center"
Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand" />
<Label HorizontalOptions="Center"
Text="{Binding LabelTextProperty}"
VerticalOptions="CenterAndExpand" />
<Button Command="{Binding ChangeTextCommand}" Text="Change Label Text" />
</StackLayout>
</ContentPage>
MainPageViewModel
public class MainPageViewModel : BaseViewModel
{
public ICommand ChangeTextCommand { private set; get; }
private string _labelText = "Default text" ;
public string LabelTextProperty
{
get
{
return _labelText;
}
set
{
_labelText = value;
OnPropertyChanged();
}
}
public MainPageViewModel()
{
ChangeTextCommand = new Command(execute: () =>
{
var handler = new ChangeTextClass();
handler.ChangeTexts();
});
}
}
ChangeTextClass
public class ChangeTextClass
{
public MainPageViewModel mpvm = new MainPageViewModel();
public void ChangeTexts()
{
mpvm.LabelTextProperty = "The Text Was Changed ?";
}
}
BaseModel
public abstract class BaseModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
When i assign the label's text value in the viewmodel by
ChangeTextCommand = new Command(execute: () =>
{
LabelTextProperty = "Local works";
});
It works fine but, so maybe it's be something to do with me creating a new instances of the viewmodel in the class ?