Hello. A few days ago I got a feedback from application users about storing sent messages. So I decided to add this feature to my application.
Therefore I had to create some new views and change main layout. The choice fell on TabbedPage.
Now after successful login, application navigates to MainPage which is TabbedPage.
NavigationService.NavigateTo(ViewTypes.MainPage);
and XAML of MainPage is:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="NotifyMe.App.Views.MainPage" xmlns:Res="clr-namespace:NotifyMe.App.Resources" xmlns:pages="clr-namespace:NotifyMe.App.Views;assembly=NotifyMe.App" Title="" BarBackgroundColor="{x:Static Res:Colors.LighterBackground}"> <TabbedPage.Children> <pages:FriendsPage Icon="people.png" Title="Friends"/> <pages:HistoryPage Icon="history.png" Title="History"/> </TabbedPage.Children> </TabbedPage>
As you can see there is a new view – HistoryPage.
<views:BasePage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:TypeArguments="ViewModels:HistoryViewModel" xmlns:Res="clr-namespace:NotifyMe.App.Resources" x:Class="NotifyMe.App.Views.HistoryPage" xmlns:views="clr-namespace:NotifyMe.App.Views;assembly=NotifyMe.App" xmlns:ViewModels="clr-namespace:NotifyMe.App.ViewModel" Style="{StaticResource contentPageStyle}" Title="ListView"> <ListView x:Name="historyList" ItemsSource="{Binding SentMessages}" HasUnevenRows="true" Margin="0,16,0,0"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout BackgroundColor="{x:Static Res:Colors.LighterBackground}" Orientation="Vertical" Margin="0,8,0,0" Padding="16,0,16,0" VerticalOptions="CenterAndExpand"> <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand"> <Label Text="{Binding Receiver}" TextColor="{x:Static Res:Colors.Primary}" HorizontalOptions="StartAndExpand" FontSize="Medium" /> <Label Text="{Binding Date}" TextColor="{x:Static Res:Colors.Primary}" HorizontalOptions="EndAndExpand" FontSize="Micro" VerticalOptions="Center" /> </StackLayout> <Label Text="{Binding Body}" TextColor="{x:Static Res:Colors.Primary}" FontSize="Small" /> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </views:BasePage>
It is a simple ContentPage with ListView styled by DataTemplate. The ListView’s source is ObservableCollection of SentMessage model in HistoryViewModel.
public class HistoryViewModel : BaseViewModel { private ObservableCollection<SentMessage> sentMessages; public HistoryViewModel(INavigationService navigationService) : base(navigationService) { SentMessages = new ObservableCollection<SentMessage>(); SentMessages.Add(new SentMessage() { Body = "Message...", Receiver = "John Doe", Date = DateTime.Now.AddHours(1).ToString() }); SentMessages.Add(new SentMessage() { Body = "Message...", Receiver = "Michael Douglas", Date = DateTime.Now.AddDays(-1).ToString() }); SentMessages.Add(new SentMessage() { Body = "Message...", Receiver = "Miroslav Francesc", Date = DateTime.Now.ToString() }); SentMessages.Add(new SentMessage() { Body = "Message...", Receiver = "Vlad Cornelius", Date = DateTime.Now.AddDays(-2).AddHours(-3).ToString() }); } public ObservableCollection<SentMessage> SentMessages { get { return sentMessages; } set { sentMessages = value; } } }
All data is hard coded now, but I am going to create a database service.
I decided to store all data locally on device so I will use Realm.
Rendered iOS isn’t so pretty so I am sure I will have to write custom renderers again.
Second part released. Available here.