Skip to content

Instantly share code, notes, and snippets.

@kevinmutlow
Created October 10, 2017 05:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinmutlow/adf0ae37995ab7267f98f85ad450a4b8 to your computer and use it in GitHub Desktop.
Save kevinmutlow/adf0ae37995ab7267f98f85ad450a4b8 to your computer and use it in GitHub Desktop.
ListView with Email-style DataTemplate + ViewModel + Model
using System;
using System.Collections.Generic;
using System.Text;
namespace App.Core.Models
{
public class EmailListItemModel : BaseModel
{
private DateTime _dateReceived;
public DateTime DateReceived
{
get { return _dateReceived; }
set { SetPropertyValue(ref _dateReceived, value); }
}
private string _from;
public string From
{
get { return _from; }
set { SetPropertyValue(ref _from, value); }
}
private string _subject;
public string Subject
{
get { return _subject; }
set { SetPropertyValue(ref _subject, value); }
}
private string _bodyText;
public string BodyText
{
get { return _bodyText; }
set { SetPropertyValue(ref _bodyText, value); }
}
private bool _isRead;
public bool IsRead
{
get { return _isRead; }
set { SetPropertyValue(ref _isRead, value); }
}
private bool _isFlagged;
public bool IsFlagged
{
get { return _isFlagged; }
set { SetPropertyValue(ref _isFlagged, value); }
}
private bool _hasAttachment;
public bool HasAttachment
{
get { return _hasAttachment; }
set { SetPropertyValue(ref _hasAttachment, value); }
}
private bool _hasReply;
public bool HasReply
{
get { return _hasReply; }
set { SetPropertyValue(ref _hasReply, value); }
}
}
}
<?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:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
x:Class="App.Core.Pages.ListViews.EmailListPage1"
Title="{ Binding PageTitle }">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,5,0,0" />
</OnPlatform>
</ContentPage.Padding>
<ListView
ItemsSource="{ Binding InboxItems }"
HasUnevenRows="True"
SeparatorVisibility="None"
CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
Margin="0"
Padding="5"
RowSpacing="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="12" />
</Grid.RowDefinitions>
<!-- ICONS -->
<StackLayout
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="3"
Spacing="2"
Padding="0,3,0,0">
<Image
Source="ic_circle_small.png"
WidthRequest="20"
IsVisible="{ Binding IsRead }" />
<Image
Source="ic_reply.png"
WidthRequest="18"
IsVisible="{ Binding HasReply }" />
<Image
Source="ic_attachment.png"
WidthRequest="16"
IsVisible="{ Binding HasAttachment }"
TranslationY="3"/>
</StackLayout>
<Label
Grid.Row="0"
Grid.Column="1"
Text="{ Binding From }"
TextColor="#333333"
FontSize="Medium"
FontAttributes="Bold">
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,2,0,0" />
</OnPlatform>
</Label.Margin>
</Label>
<Label
Grid.Row="0"
Grid.Column="2"
Text="{ Binding DateReceived, StringFormat='{0:dd/MM/yyyy}'}"
TextColor="#AAAAAA"
FontSize="Small"
HorizontalOptions="End">
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,3,0,0" />
</OnPlatform>
</Label.Margin>
</Label>
<Image
Grid.Row="0"
Grid.Column="3"
Source="ic_chev_right.png"
HorizontalOptions="Start"
WidthRequest="12"
TranslationY="-2">
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,5,0,0" />
</OnPlatform>
</Label.Margin>
</Image>
<Label
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="3"
Text="{ Binding Subject }"
TextColor="#333333"
FontSize="Medium" />
<Label
Grid.Row="2"
Grid.Column="1"
Grid.ColumnSpan="3"
Text="{ Binding BodyText }"
TextColor="#AAAAAA"
LineBreakMode="TailTruncation"
FontSize="Medium"
VerticalTextAlignment="Start" />
<BoxView
Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="3"
HeightRequest="1"
VerticalOptions="End"
BackgroundColor="#dddddd" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
using App.Core.ViewModels.ListViews;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace App.Core.Pages.ListViews
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class EmailListPage1 : ContentPage
{
public EmailListPage1 ()
{
InitializeComponent ();
BindingContext = new EmailListPage1ViewModel(this.Navigation);
}
}
}
using App.Core.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace App.Core.ViewModels.ListViews
{
public class EmailListPage1ViewModel : BasePageViewModel
{
private readonly INavigation Navigation;
public EmailListPage1ViewModel(INavigation navigation)
{
Navigation = navigation;
PageTitle = "Inbox";
Task.Run(() => InitAsync());
}
#region Properties
public ObservableCollection<EmailListItemModel> InboxItems { get; set; } = new ObservableCollection<EmailListItemModel>();
#endregion
#region Commands
#endregion
#region Methods
async void InitAsync()
{
var items = await this.FetchData();
foreach (var item in items)
InboxItems.Add(item);
}
Task<List<EmailListItemModel>> FetchData()
{
//TODO - replace this with your API call & move out to a service class
var items = new List<EmailListItemModel>();
items.Add(new EmailListItemModel {
DateReceived = DateTime.Now,
From = "KVN Tech",
Subject = "Building Xamarin XAML snippets",
IsRead = true,
HasAttachment = true,
HasReply = true,
BodyText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed auctor lacus, finibus ullamcorper nulla. Ut tortor dolor, molestie vel lacus in, pellentesque tincidunt lorem. Nullam sed eros ac nisl fringilla auctor vitae lacinia neque. Cras et vulputate libero. Aenean consequat velit id velit feugiat tempus."
});
items.Add(new EmailListItemModel {
DateReceived = DateTime.Now.AddDays(-2),
From = "Sandra Bullock",
Subject = "Got some Lorem Ipsum",
IsRead = true,
HasAttachment = false,
HasReply = false,
BodyText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed auctor lacus, finibus ullamcorper nulla. Ut tortor dolor, molestie vel lacus in, pellentesque tincidunt lorem."
});
items.Add(new EmailListItemModel {
DateReceived = DateTime.Now.AddDays(-3),
From = "Justin Roberts",
Subject = "Where do you want to go?",
IsRead = false,
HasAttachment = false,
HasReply = true,
BodyText = "Some shorter body text here"
});
items.Add(new EmailListItemModel {
DateReceived = DateTime.Now.AddDays(-7),
From = "Joseph Soap",
Subject = "Intro to XAML",
IsRead = false,
HasAttachment = true,
HasReply = false,
BodyText = "Done!" });
return Task.FromResult(items);
}
#endregion
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment