We Keep Coding

Xaml button Command does not fire

I'm using the CameraView from the XamarinCommunityToolKit. Why button command "Capture" does not fire when I click it? Is it because code is running in emulator and not in actual physical phone with a real camera?
<?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:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="App2.Views.CapturePage">
<StackLayout>
<xct:CameraView
x:Name="cameraView"
CaptureMode="Photo"
FlashMode="Off"
HorizontalOptions="FillAndExpand"
MediaCaptured="CameraView_MediaCaptured"
OnAvailable="CameraView_OnAvailable"
VerticalOptions="FillAndExpand" />
<Button
x:Name="doCameraThings"
Command="{Binding CaptureCommand, Source={x:Reference cameraView}}"
IsEnabled="True"
Text="Capture" />
<Image
x:Name="previewPicture"
Aspect="AspectFit"
BackgroundColor="LightGray"
HeightRequest="250"
IsVisible="False" />
</StackLayout>
</ContentPage>
ViewModel looks like this:
public class CaptureViewModel : BaseViewModel
{
public Command CaptureCommand { get; }
public CaptureViewModel()
{
CaptureCommand = new Command(CapturePageClicked);
}
private async void CapturePageClicked()
{
//Some code here
}
}

From Xamarin Community Toolkit CameraView, there is one Icommand ShutterCommand for CameraView, so you can binding ShutterCommand to Button.Command.
<StackLayout>
<xct:CameraView
x:Name="cameraview"
CaptureMode="Photo"
FlashMode="On"
HorizontalOptions="FillAndExpand"
MediaCaptured="cameraView_MediaCaptured"
VerticalOptions="FillAndExpand"
/>
<Button
x:Name="doCameraThings"
Command="{Binding ShutterCommand, Source={x:Reference cameraview}}"
IsEnabled="True"
Text="Capture" />
<Image
x:Name="previewPicture"
Aspect="AspectFit"
BackgroundColor="LightGray"
HeightRequest="250"
IsVisible="False" />
</StackLayout>
public partial class Page6 : ContentPage
{
public Page6()
{
InitializeComponent();
}
private void cameraView_MediaCaptured(object sender, Xamarin.CommunityToolkit.UI.Views.MediaCapturedEventArgs e)
{
switch (cameraview.CaptureMode)
{
default:
case CameraCaptureMode.Default:
case CameraCaptureMode.Photo:
previewPicture.IsVisible = true;
previewPicture.Rotation = e.Rotation;
previewPicture.Source = e.Image;
break;
case CameraCaptureMode.Video:
previewPicture.IsVisible = false;
break;
}
}
}
But you can also binding another command to Button.click in Viewmodel.
<xct:CameraView
x:Name="cameraview"
CaptureMode="Photo"
FlashMode="On"
HorizontalOptions="FillAndExpand"
MediaCaptured="cameraView_MediaCaptured"
VerticalOptions="FillAndExpand"
/>
<Button
x:Name="doCameraThings"
Command="{Binding CaptureCommand}"
IsEnabled="True"
Text="Capture" />
<Image
x:Name="previewPicture"
Aspect="AspectFit"
BackgroundColor="LightGray"
HeightRequest="250"
IsVisible="False" />
public class CaptureViewModel
{
public Command CaptureCommand { get; }
public CaptureViewModel()
{
CaptureCommand = new Command(CapturePageClicked);
}
private async void CapturePageClicked()
{
//Some code here
}
}
Binding ViewModel to current page BindingContext
public Page6()
{
InitializeComponent();
this.BindingContext = new CaptureViewModel();
}
simple sample about CameraView, you can take a look:
https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Views/CameraViewPage.xaml

Should ViewModels inherit other ViewModels in Xamarin.Forms?

Should ViewModels inherit other ViewModels?
I have a MerchandiserViewModel that contains the basic properties and database functions for a Merchandiser model.
The MerchandiserViewModel has a SelectedMerchandiser property that holds the selected Merchandiser from the ItemSelected in a ListView
MerchandiserViewModel.cs
public MerchandiserViewModel : INotifyPropertyChanged
{
// Property to hold the selected Merchandiser
// Generally I would make this static but then I can't bind the property
public Merchandiser SelectedMerchandiser {get; set;}
// Other logic...
}
The MerchandiserViewModel is instantiated as a Static Resource in App.xaml so that I only have one instance of the view model.
App.xaml
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MobileApp.App"
xmlns:ViewModels="clr-namespace:MobileApp.ViewModels">
<Application.Resources>
<ViewModels:MerchandiserViewModel x:Key="MerchandiserViewModel" />
<ViewModels:MerchandiserProfileViewModel x:Key="MerchandiserProfileViewModel" />
</Application.Resources>
</Application>
For each View related to a Merchandiser e.g. MerchandiserProfile, EditProfile etc. I create a new ViewModel and inherit the MerchandiserViewModel
MerchandiserProfileViewModel.cs inherits the MerchandiserViewModel
public class MerchandiserProfileViewModel : MerchandiserViewModel
{
// Logic Specific to the Merchandiser Profile View
}
The problem is... when I create a new [Page]ViewModel and inherit the "MerchandiserViewModel" I receive the following error message.
I think this may be because a new instance of the MerchandiserViewModel is created so I am not referencing the initial SelectedMerchandiser property.
This makes me think that inheriting ViewModels isn't a good idea?
How is this situation usually handled? Should I just jam all logic for each page/view into the one MerchandiserViewModel? I want my code to be as clean an separated as possible, so would like to avoid this if possible.
AFTER THOUGHT
Am I able to access the properties of the MerchandiserViewModel in static Resource in C#? this way I could pass the required properties to the new ViewModel without inheriting the MerchandiserViewModel ... keen to hear thoughts on this?

The MerchandiserViewModel has a SelectedMerchandiser property that holds the selected Merchandiser from the ItemSelected in a ListView
According to your description, you want to binding for ListView, for MerchandiserViewModel, you don't need to inherit other ViewModels, I suggest you can take a look the Model-View-ViewModel Pattern
I do one sample that binding ListView using MVVM, please take a look.
<StackLayout>
<ListView
x:Name="listview1"
HasUnevenRows="True"
ItemsSource="{Binding mers}"
SelectedItem="{Binding selecteditem}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label
FontSize="Large"
Text="{Binding Name}"
VerticalOptions="Center" />
<Label
FontSize="Small"
Text="{Binding PhoneNumber}"
VerticalOptions="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
The model class,contains some properties that binding to UI.
public class Merchandiser
{
public string Name { get; set; }
public string PhoneNumber { get; set; }
}
The MerchandiserViewmodel class, the view model implements properties and commands to which the view can data bind to, and notifies the view of any state changes through change notification events. The properties and commands that the view model provides define the functionality to be offered by the UI, but the view determines how that functionality is to be displayed.
public class MerchandiserViewmodel:ViewModelBase
{
public ObservableCollection<Merchandiser> mers { get; set; }
private Merchandiser _selecteditem;
public Merchandiser selecteditem
{
get { return _selecteditem; }
set
{
_selecteditem = value;
RaisePropertyChanged("selecteditem");
}
}
public MerchandiserViewmodel()
{
mers = new ObservableCollection<Merchandiser>();
getdata();
}
private void getdata()
{
for(int i=0;i<20;i++)
{
Merchandiser mer = new Merchandiser();
mer.Name = "merchandiser "+i;
mer.PhoneNumber = "123";
mers.Add(mer);
}
}
}
The ViewModelBase is class that implementinf INotifyPropertyChanged interface, notify data changed. For MerchandiserViewmodel, the Selected Merchandiser(selecteditem) must implement INotifyPropertyChanged to notify data change when you selected item from ListView every time.
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Binding ViewModel to ContentPage
public partial class Page10 : ContentPage
{
public Page10()
{
InitializeComponent();
this.BindingContext = new MerchandiserViewmodel();
}
}
Update:
If you want to navigate to detailed page when select ListView item, you can use constructor pass by value in ListView_ItemSelected event.
<StackLayout>
<ListView
x:Name="listview1" ItemSelected="listview1_ItemSelected" SelectionMode="Single"
HasUnevenRows="True"
ItemsSource="{Binding mers}"
SelectedItem="{Binding selecteditem}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label
FontSize="Large"
Text="{Binding Name}"
VerticalOptions="Center" />
<Label
FontSize="Small"
Text="{Binding PhoneNumber}"
VerticalOptions="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
private async void listview1_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
Merchandiser item = (Merchandiser)e.SelectedItem;
await Navigation.PushAsync(new simplecontrol.Page29(item));
}
Detailed Page:
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Name: " />
<Label
FontSize="Large"
Text="{Binding Name}"
VerticalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="PhoneNumber: " />
<Label
FontSize="Small"
Text="{Binding PhoneNumber}"
VerticalOptions="Center" />
</StackLayout>
</StackLayout>
</ContentPage.Content>
public partial class Page29 : ContentPage
{
public Page29(Merchandiser mer)
{
InitializeComponent();
this.BindingContext = mer;
}
}

Xamarin Forms CollectionView stays empty after binding it

I have a problem. I created this class that creates an ImageSource collection ObservableCollection<TemplateSource>:
public class TemplateListViewModel
{
public ObservableCollection<TemplateSource> sourceList { get; set; }
public TemplateListViewModel()
{
sourceList = new ObservableCollection<TemplateSource>();
loadingTemplates += onLoadingTemplates;
LoadTemplateList();
}
private event EventHandler loadingTemplates = delegate { };
private void LoadTemplateList()
{
loadingTemplates(this, EventArgs.Empty);
}
private async void onLoadingTemplates(object sender, EventArgs args)
{
List<Template> templateList = await App.RestService.GetTemplates(App.User);
foreach (var template in templateList)
{
ImageSource source = ImageSource.FromUri(new Uri("mysite.org/myapp/" + template.FileName));
TemplateSource templateSource = new TemplateSource { Id = template.Id, Source = source };
sourceList.Add(templateSource);
}
}
}
And in my XAML I use this code:
<ContentPage.Content>
<StackLayout HorizontalOptions="Fill">
<Frame IsClippedToBounds="True" HeightRequest="45" CornerRadius="5" Padding="0" Margin="15,15,15,0" BackgroundColor="Transparent">
<Entry Placeholder="Search" ReturnType="Done" PlaceholderColor="Gray" x:Name="txtSearch" Margin="5,0,0,0" TextColor="White" />
</Frame>
<CollectionView ItemsLayout="HorizontalList" ItemsSource="{Binding sourceList}">
<CollectionView.ItemTemplate>
<DataTemplate>
<ff:CachedImage
Source="{Binding .}"
VerticalOptions="Center"
HorizontalOptions="Fill" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage.Content>
And finally in the page.xaml.cs (code behind):
protected override void OnAppearing()
{
TemplateListViewModel vm = new TemplateListViewModel();
BindingContext = vm;
base.OnAppearing();
}
Now I already got help with this code from #Deczaloth, but he couldn't figure out why the CollectionView stays emtpy after I bind it. Now I already checked, but the sourceList does get filled, so thats not the problem.
What am I doing wrong?

I can see one potential problem in your code XD:
When you bind the Source property of CachedImage you set the binding to ".", but you should instead bind to the Source property of the TemplateSource class (in your context "." means a TemplateSource item!), that is you should change your code like so:
<ff:CachedImage
Source="{Binding Source}"
VerticalOptions="Center"
HorizontalOptions="Fill" />

Navigate between views in Xamarin (visual studio) PCL project

I cant find a way to implement an onClick event on a button that will allow the application to navigate between the login and the second view.
How can I do that ?
Here is what i did
I created a method in my LoginViewModel.cs file that should redirect me to the second view.
class LoginViewModel
{
private async Task SecondView_Click()
{
App.Current.MainPage = new NavigationPage(new SecondView());
}
}
Then I've defined a BindingContext in my Login.cs
public partial class Login : ContentPage
{
public Login()
{
InitializeComponent();
BindingContext = new LoginViewModel();
}
}
Then I define a button in my Login.xaml that has a binded command property
<StackLayout
VerticalOptions="CenterAndExpand">
<Entry StyleId="UsernameEntry"
Placeholder="Username"
Text="{Binding Username}" />
<Entry StyleId="PasswordEntry"
Placeholder="password"
Text="{Binding Password}" />
<Button
StyleId="btn_connexion"
Text="Connexion"
Command="{Binding connexion}" />
<Button
StyleId="btn_testSecondView"
Text="Test 2nd View"
Command="{Binding SecondView_Click}"></Button>
</StackLayout>

This works for me
PAGE 1 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"
x:Class="TestRelativeLayout.MyPage1"
Title="TabbedPage">
<StackLayout>
<Button Clicked="Handle_Clicked" Text = "Press">
</Button>
</StackLayout>
</ContentPage>
PAGE 1 XAML.CS
using Xamarin.Forms;
namespace TestRelativeLayout
{
public partial class MyPage1 : ContentPage
{
public MyPage1()
{
InitializeComponent();
}
public void Handle_Clicked(object sender, System.EventArgs e)
{
Application.Current.MainPage = new NavigationPage(new MyPage2());
}
}
}
Try to remove
private async Task
and use
void
private async Task SecondView_Click()
{
App.Current.MainPage = new NavigationPage(new SecondView());
}

Here is what I did.
I found that there is a "clicked" property on that prompt an intellisense dropdown with a "new event handler".
<StackLayout
VerticalOptions="CenterAndExpand">
<Entry StyleId="UsernameEntry"
Placeholder="Username"
Text="{Binding Username}" />
<Entry StyleId="PasswordEntry"
Placeholder="password"
Text="{Binding Password}" />
<Button
StyleId="btn_connexion"
Text="Connexion"
Clicked="connexion" />
<Button
StyleId="btn_testSecondView"
Text="Test 2nd View"
Clicked="SecondView_Click"></Button>
</StackLayout>
Once i did that it created a method in the code behind "Login.xaml.cs".
From there I just paste the navigation method and it worked
private async Task SecondView_Click()
{
App.Current.MainPage = new NavigationPage(new SecondView());
}
The fact that it is a PCL project makes it difficult to find the right information because everything you find on the internet concerns the ios/android solution and not the portable solution.

Changing a ViewCell element on click

I have built a List<> of item objects, which are being used as the ItemsSource to a ListView. on my ListView's ItemSelected event, I am trying to change one of the elements of that particular item. The original values are bound from the object.
Please consider the following example:
itemClass.cs
class itemClass
{
public itemClass()
{
}
public string valueIWantToChange {get; set;}
}
MyPage.cs
public MyPage()
{
InitializeComponent();
List<itemClass> listOfItems= new List<itemClass>();
itemClass item1= new itemClass { valueIWantToChange = "UnClicked"};
listOfItems.Add(item1);
BindingContext = this;
lstView.ItemsSource = listOfItems;
lstView.ItemSelected += (sender, e) =>
{
if (e.SelectedItem == null)
{
return;
}
// The below does nothing but highlights what I am trying to achieve
((itemClass)((ListView)sender).SelectedItem).valueIWantToChange = "Clicked" ;
((ListView)sender).SelectedItem = null;
};
}
My 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:myProject="clr-namespace:myProject"
x:Class="myProject.MyPage">
<StackLayout>
<ListView x:Name="lstView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="0" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Label Text="{Binding valueIWantToChange }" TextColor="Black" FontSize="16" VerticalOptions="Center" HorizontalOptions="Center" Margin="5,5,5,5"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
I have attempted to use Binding commands and PropertyChangedEventHandler but with no success. Any assistance in this would be greatly appreciated.
Edit
I have attempted to use PropertyChangedEventHandlers in a similar way, elsewhere in the app, please see below:
public double FontXLarge
{
set
{
someFontsize = value;
OnPropertyChanged("FontXLarge");
}
get
{
someFontsize = scalableFont(10);
return someFontsize;
}
}
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
The above allows me to bind a fontsize to that scaling font, however if I were to use something similar for string, would it not effect all of the items in the ListView?

I think the best way to implement what you want, it's to use a ViewModel with INotifyPropertyChanged. You can find a lot of example if you're googling a bit. One good link for generic baseclass is this.
Let me know if you find everything you need.