We Keep Coding

Shell CollectionView is not updating Xamarin Forms

I'm trying to make CollectionView in Shell but it's not updating.
I have one view model connected to Page and AppShell but when I update Collection view only page is updationg.
`public class AppShellViewModel : INotifyPropertyChanged
{
public Command Load { get; }
public ObservableCollection<ListData> _lists { get; set; }
public ObservableCollection<ListData> Lists
{
get { return _lists; }
set
{
_lists = value;
OnPropertyChanged();
}
}
public AppShellViewModel()
{
Lists = new ObservableCollection<ListData>()
{
new ListData(){id=0,name="test",UserId=0},
new ListData(){id=1,name="test1",UserId=1},
new ListData(){id=2,name="test2",UserId=2},
new ListData(){id=3,name="test3",UserId=3},
new ListData(){id=4,name="test4",UserId=4}
};
Load = new Command(async () => await GetUserLists());
}
async Task GetUserLists()
{
for (int i = 5; i < 15; i++)
{
Lists.Add(new ListData {id=i, name=$"test{ i }", UserId=i });
}
}
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}`
Then i have App Shell Collection View
`<Shell.FlyoutContent>
<StackLayout BackgroundColor="#34495e">
<Label Text="YOUR LISTS" FontSize="50" />
<CollectionView ItemsSource="{Binding Lists}" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10" x:DataType="model:ListData">
<Label Text="{Binding name}"
LineBreakMode="NoWrap"
FontSize="13" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</Shell.FlyoutContent>`
And There is Page CollectionView
`<?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="ToDoApp.Views.AboutPage"
xmlns:model="clr-namespace:ToDoApp.Models">
<StackLayout>
<Button Text="Load" Command="{Binding Load}"/>
<Label Text="{Binding error}"/>
<CollectionView ItemsSource="{Binding Lists}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10" x:DataType="model:ListData">
<Label Text="{Binding name}"
LineBreakMode="NoWrap"
FontSize="13" />
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage>`
before update it looks like this
Page before update
Shell before update
And after update the only what changed is content page and shell is the same as before
Page after update
Shell after update

Related to Jason's comment.
WON'T CHANGE TOGETHER
NOT the same instance - BindingContexts similar to these:
// In AppShell.xaml.cs.
public AppShell()
{
InitializeComponent();
BindingContext = new AppShellViewModel();
}
// In AboutPage.xaml.cs.
public AboutPage()
{
InitializeComponent();
BindingContext = new AppShellViewModel();
}
GOOD (SHARED BETWEEN TWO PLACES)
BindingContexts are SAME instance:
// In AppShellViewModel.cs.
public class AppShellViewModel ...
{
private static AppShellViewModel _it;
public static AppShellViewModel It
{
get {
if (_it == null)
_it = new AppShellViewModel();
return _it;
}
}
}
// In AppShell.xaml.cs.
public AppShell()
{
InitializeComponent();
BindingContext = AppShellViewModel.It;
}
// In AboutPage.xaml.cs.
public AboutPage()
{
InitializeComponent();
BindingContext = AppShellViewModel.It;
}

How can I edit and delete a ListView SelectedItem

I want to create an application that can Create, Read, Update and Delete Merchandiser records.
I am struggling with how to "Update" and "Delete" a record based on a ItemSelected in the ListView.
The item selected in the ListView represents a Merchandiser and is currently being passed into each new View as an argument.
I intend to store data in an SQLite database, but for simplicity have not included any of that logic. Database Commands (Save, Delete etc.) will be created in the MerchandiserViewModel
Here is my slimmed down code so far
Merchandiser.cs Model
public class Merchandiser
{
public string Name { get; set; }
public string PhoneNumber { get; set; }
// Additional Properties not shown for simplicity
}
MerchandiserViewModel.cs ViewModel
public class MerchandiserViewModel : ViewModelBase
{
public ObservableCollection<Merchandiser> MerchandiserList { get; set; }
private Merchandiser selectedItem;
public Merchandiser SelectedItem
{
get { return selectedItem; }
set
{
selectedItem = value;
RaisePropertyChanged();
}
}
public MerchandiserViewModel()
{
MerchandiserList = new ObservableCollection<Merchandiser>();
CreateData();
}
private void CreateData()
{
for (int i = 0; i < 20; i++)
{
Merchandiser merchandiser = new Merchandiser();
merchandiser.Name = $"Merchandiser {i}";
merchandiser.PhoneNumber = $"12{i}6{i*3}{i*8}{i*9/3+2}";
MerchandiserList.Add(merchandiser);
}
}
}
// Database commands and other logic not shown...
}
BaseViewModel.cs
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
MerchandiserListPage.xaml & .cs View - Display List of Merchandiers
<?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="MVVM.Views.MerchandisersListPage">
<ContentPage.Content>
<StackLayout>
<ListView x:Name="MerchandiserListView"
ItemSelected="MerchandiserListView_ItemSelected"
SelectionMode="Single"
HasUnevenRows="True"
ItemsSource="{Binding MerchandiserList}"
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>
</ContentPage.Content>
</ContentPage>
// MerchandisersListPage.xaml.cs - Code Behind
public MerchandisersListPage()
{
InitializeComponent();
this.BindingContext = new MerchandiserViewModel();
}
private async void MerchandiserListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
Merchandiser merchandiser = (Merchandiser)e.SelectedItem;
await Navigation.PushAsync(new MerchandisersProfilePage(merchandiser));
}
MerchandisersProfilePage.xaml & .cs
This page should navigate to the MerchandiserEditPage using an Edit Button but I'm not sure if I am handling the 'Code Behind' correctly?
<?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="MVVM.Views.MerchandisersProfilePage">
<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>
<Button Text="Edit"
Clicked="EditButton_Clicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
// MerchandisersProfilePage.xaml.cs - Code Behind
Merchandiser selectedMerchandiser;
public MerchandisersProfilePage(Merchandiser merchandiser)
{
InitializeComponent();
selectedMerchandiser = merchandiser; // Is this what I should be doing?
this.BindingContext = merchandiser;
}
private async void EditButton_Clicked(object sender, EventArgs e)
{
// Am I doing this the correct way??
await Navigation.PushAsync(new MerchandiserEditPage(selectedMerchandiser));
}
MerchandiserEditPage.xaml & .cs This is where I am stuck.
I will need to update the record in the database by calling a method in the MerchandiserViewModel but am not sure how to do this? The method (which ideally should be called by a Command) to update the database has the following signature UpdateMerchandiser(Merchandiser merchandiser).
Ideally I would like the Save Button to use a Command instead of Clicked so I can access the Save command in the MerchandiserViewModel but this imposes another problem around form validation. How then can I then validate this information (e.g. Name is not empty) before saving it the the database? Because the MerchandiserViewModel doesn't know anything about the MerchandiserEditPage.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="MVVM.Views.MerchandiserEditPage">
<ContentPage.Content>
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Name: " />
<Entry
FontSize="Large"
Text="{Binding Name}"
VerticalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="PhoneNumber: " />
<Entry
FontSize="Small"
Text="{Binding PhoneNumber}"
VerticalOptions="Center" />
</StackLayout>
<!-- Ideally this should use 'Command' instead of 'Clicked' -->
<Button Text="Save"
Clicked="SaveButton_Clicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
// MerchandiserEditPage.xaml.cs - Code Behind
public MerchandiserEditPage(Merchandiser merchandiser)
{
InitializeComponent();
this.BindingContext = merchandiser;
}
// I would prefer not to use an event handler but use a Command in the MerchandiserViewModel instead
// I also need to perform some basic validation e.g. Name entry should not be empty etc.
private async void SaveButton_Clicked(object sender, EventArgs e)
{
// How can I Save/Update the changes?
// Pop() page off the stack and return to the MerchandiserProfileView
await Navigation.PopAsync();
}
I believe the above code is designed in accordance to MVVM, however if not, please advise where I am violating this pattern?
I also want to do similar for deleting a record but once I get the update method sorted I'm sure deleting will follow similar logic.
Note: The code above is not shown in its entirety and is missing SQLite database functionality and other logic for simplicity. All functionality to the database (Save, Update, Delete) is in the MerchandiserViewModel. I will edit or add any additional information to this question as required to help provide a complete picture of the problem.

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.

mvvmcross navigate to viewmodel from tabbed

I have a Xamarin Forms application using mvvmcross. There I have navigation via TabbedPages. Each page has a xaml + code behind and viewmodel.
Relevant code for first page:
<?xml version="1.0" encoding="utf-8" ?>
<pages:BaseTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:ABBI_XPlat_3.Pages;assembly=ABBI_XPlat_3"
x:Class="ABBI_XPlat_3.Pages.DeviceListPage"
Title="Discover devices"
x:Name="DevicePage">
<pages:BaseTabbedPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="DeviceItemTemplate"> ... </DataTemplate>
</ResourceDictionary>
</pages:BaseTabbedPage.Resources>
<pages:BaseTabbedPage.Children>
<pages:BasePage Title="Scan for devices">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<StackLayout BackgroundColor="#FF6969" Padding="10" IsVisible="{Binding IsStateOn, Converter={StaticResource InverseBoolean}}">
<Label Text="{Binding StateText}" FontSize="18" HorizontalTextAlignment="Center"></Label>
</StackLayout>
<ListView Grid.Row="1" ItemsSource="{Binding Devices}" SelectedItem="{Binding SelectedDevice, Mode=TwoWay}"
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding RefreshCommand}"
IsRefreshing="{Binding IsRefreshing, Mode=OneWay}"
RowHeight="80"
ItemTemplate="{StaticResource DeviceItemTemplate}">
</ListView>
<StackLayout Grid.Row="2" Orientation="Horizontal">
<Button Text="Connect" Command="{Binding ConnectToSelectedCommand}" HorizontalOptions="FillAndExpand"/>
<Button Text="Stop Scan" Command="{Binding StopScanCommand}" HorizontalOptions="End"/>
<ActivityIndicator IsRunning="{Binding IsRefreshing}"
HeightRequest="24"
WidthRequest="24"
VerticalOptions="Center"
HorizontalOptions="End"/>
</StackLayout>
</Grid>
</pages:BasePage>
<pages:ServiceListPage Title="Services"/>
<pages:OtherTabbedPage Title="Services"/>
</pages:BaseTabbedPage.Children>
</pages:BaseTabbedPage>
I am able to call different viewmodels from buttons in my main view model using:
public MvxCommand ConnectToSelectedCommand => new MvxCommand(ConnectToSelectedDeviceAsync, CanDisplayServices);
private async void ConnectToSelectedDeviceAsync()
{
ShowViewModel<ServiceListViewModel>(new MvxBundle(new Dictionary<string, string> { { DeviceIdKey, SystemDevices.FirstOrDefault().Id.ToString() } }));
}
within my main ViewModel. But I want to be able to use the tabs to navigate between ViewModels. At the moment if I click on a tab, then it brings up the page, but without the associated ViewModel.
Help please!

So what you have to do to get MvvmCross to bind the Pages to the VMs is have a MvxTabbedPage as the Root TabbedPosition & have your pages that go in the tabs as the Detail TabbedPosition. Then in the MvxTabbedPage's ViewModel, you have to Navigate to all the Detail Tab's ViewModels. Here is an example.
namespace NameSpace
{
// Tabbed Detail Page
[MvxTabbedPagePresentation(Title = "Home", Icon = "ic_home_black.png")]
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class HomePage : MvxContentPage<HomeViewModel>
{
public HomePage()
{
InitializeComponent();
}
}
// Tabbed Root Page
[MvxTabbedPagePresentation(TabbedPosition.Root, WrapInNavigationPage = true)]
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class TabbedPage : MvxTabbedPage<TabbedViewModel>
{
public TabbedProjectDetailsPage()
{
InitializeComponent();
}
}
// Tabbed Detail ViewModel
public class HomeViewModel : MvxViewModel
{
IMvxNavigationService _navigation;
public HomeViewModel(IMvxNavigationService navigation)
{
_navigation = navigation;
}
}
// Tabbed Root ViewModel
public class TabbedViewModel : MvxNavigationViewModel
{
public TabbedProjectDetailsViewModel(IMvxLogProvider log, IMvxNavigationService navigation) : base(log, navigation)
{
}
MvxCommand _navHome;
public ICommand NavigateHome
{
get
{
_navHome = _navHome ?? new MvxCommand(async () =>
{
await NavigationService.Navigate<HomeViewModel>();
});
return _navHome;
}
}
public void ShowViewModels()
{
this.NavigateHome.Execute(null);
}
bool appeared = false;
public override void ViewAppearing()
{
base.ViewAppearing();
if (!appeared)
{
ShowViewModels();
}
appeared = true;
}
}
}

Finally managed to solve the problem. It was so simple that I could not find an answer anywhere. I just had to add a bindingcontext to the codebehind of the page.
public ServiceListPage()
{
InitializeComponent();
this.BindingContext = new ViewModels.ServiceListViewModel(Plugin.BLE.CrossBluetoothLE.Current.Adapter, UserDialogs.Instance);
}