NotifyMe – History | Bartosz Radlak

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.