Xamarin & .NET Developer Events in August
The problem to be solved
One drawback with the vanilla ListView that comes with Xamarin.Forms is that once an item is selected it can’t be selected again until you select something else and reselect it. Usually this is fine, unless you use the ListView to navigate away to a new page. When you return you cannot re-navigate to the same page again.
The solution
The solution to this is simple, just hook up to the ItemSelected event for the ListView and set the SelectedItem property to null.
So the short version of you quick-googlers would be the following line of code. (in the View)
//Resettheselecteditemtomakeitselectable again
duckListView.ItemSelected+=(s,e)=>{
duckListView.SelectedItem=null;
And the navigation should be done in the ViewModel
publicDuckSelectedDuck
{
set
{
if(value !=null)
{
//IoComitted,weshouldreallygetsomeoneelseto
//createtheseobjectsforus.
varviewModel=newDuckViewModel(){ Duck =value};
varpage=newDuckView(viewModel);
_navigation.PushAsync(page);
}
}
}
The more verbose version
You could also navigate directly from this event handler, but you should feel it deep in your heart that that is just wrong. Instead we handle navigation in the ViewModel. I’ve created a sample project to do this. Also, I’m doing this without any additional framework that would handle navigation for you so that’s why I need to provide my ViewModel with a navigation interface.
I’ll present each file to you below or just download the sample solution from here.
The Model
Our model is simple. It’s just a duck with a name… As you might recall, a model could be anything really. In this case it’s a simple class.
publicclassDuck
{
publicstringName
{
get;
set;
}
}
{
publicstringName
{
get;
set;
}
}
The ViewModel (s)
We’ve got two ViewModels, but it’s really only the MainViewModel that’s interesting. It initializes it’s own data, which usually should be done async from another source. It doesn’t implement INotifyPropertyChanged either, as is should but for this sample it’s good enough.
What to focus on is the SelectedDuck property that handles the navigation. We only implement a setter for this since we reset the selected item anyhow in the view itself and on top of that navigate away from the page.
///<summary>
/// The sample ViewModel. Should implement INotifyPropertyChanged
///</summary>
publicclassMainViewModel
{
privateINavigation_navigation;
publicMainViewModel(INavigationnavigation)
{
_navigation=navigation;
Ducks=newList<Duck>()
{
newDuck(){ Name =“George“},
newDuck(){ Name =“Bob“},
newDuck(){ Name =“Sarah“},
newDuck(){ Name =“Clint“},
};
}
///<summary>
/// A list of ducks
///</summary>
///<value>The ducks.</value>
publicList<Duck>Ducks
{
get;
set;
}
publicDuckSelectedDuck
{
set
{
if(value !=null)
{
//IoComitted,weshouldreallygetsomeoneelseto
//createtheseobjectsforus.
varviewModel=newDuckViewModel(){ Duck =value};
varpage=newDuckView(viewModel);
_navigation.PushAsync(page);
}
}
}
}
The other ViewModel (DuckViewModel) simply references the selected duck on the page we navigate to.
publicclassDuckViewModel
{
publicDuckViewModel()
{
}
publicDuckDuck
{
get;
set;
}
}
The View
That leaves us with the view that consists of two parts; XAML and the code behind. Usually you don’t want any code expect the ViewModel-binding in the code-behind since it’s very platform coupled, but in this case we need to do an exception. We need to reset the SelectedItem property of the ListView.
publicpartialclassMainView:ContentPage
{
publicMainView()
{
InitializeComponent();
BindingContext=newMainViewModel(this.Navigation);//Shouldbe injected
{
publicMainView()
{
InitializeComponent();
BindingContext=newMainViewModel(this.Navigation);//Shouldbe injected
//Resettheselecteditemtomakeitselectable again
duckListView.ItemSelected+=(s,e)=>{
duckListView.SelectedItem=null;
};
}
}
The XAML parts look like this.
xmlversion=“1.0“encoding=“UTF–8“?>
<ContentPagexmlns=“http://xamarin.com/schemas/2014/forms“xmlns:x=“http://schemas.microsoft.com/winfx/2009/xaml“x:Class=“ListViewNavigation.MainView“>
<ContentPage.Content>
<ContentPagexmlns=“http://xamarin.com/schemas/2014/forms“xmlns:x=“http://schemas.microsoft.com/winfx/2009/xaml“x:Class=“ListViewNavigation.MainView“>
<ContentPage.Content>
<ListViewx:Name=“duckListView“
IsGroupingEnabled=“false“
ItemsSource=“{BindingDucks}“
HasUnevenRows=“true“
SelectedItem=“{BindingSelectedDuck}“>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<LabelFont=“Large“Text=“{BindingName}“/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
Summary
There is a lot missing in forms of Ioc and base frameworks for MVVM (like MvvmLight och MvvmCross). Is there an alternative for the extreme mvvm-purists? Yes, you could hook up a GestureRecognizer on each item in the ListView but some platform specific animations will be lost if you do so.
Please give feedback what ever you feel like! And if there’s a better way, I would love for you to enlighten me! 😀
Related posts
