Skip to content

Instantly share code, notes, and snippets.

@brunoportess
Created February 8, 2018 13:04
Show Gist options
  • Save brunoportess/d69161c15aaecd383a5376dfe62b8956 to your computer and use it in GitHub Desktop.
Save brunoportess/d69161c15aaecd383a5376dfe62b8956 to your computer and use it in GitHub Desktop.
Base para criar chat com template similar ao whatsApp
<ScrollView>
<Grid RowSpacing="0" ColumnSpacing="0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView
x:Name="MessagesListView"
ItemTemplate="{StaticResource MessageTemplateSelector}"
ItemsSource="{Binding ListaChat}"
HasUnevenRows="True" SeparatorVisibility="None" IsEnabled="True" Grid.Row="0"/>
<StackLayout Orientation="Horizontal" Grid.Row="1" BackgroundColor="White" VerticalOptions="EndAndExpand">
<Entry
HorizontalOptions="FillAndExpand"
Placeholder="Messagem"
Text="{Binding Mensagem}" Keyboard="Chat" Margin="4"/>
<Image Source="ic_send_black_36dp.png" Margin="4">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding SendCommand}" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
</ScrollView>
public class ConsultaTabbedViewModel : BaseViewModel
{
public DelegateCommand SendCommand { get; set; }
private ObservableCollection<Models.Entities.ChatMensagem> _listaChat;
public ObservableCollection<Models.Entities.ChatMensagem> ListaChat
{
get { return _listaChat; }
set { SetProperty(ref _listaChat, value); }
}
private string _mensagem;
public string Mensagem
{
get { return _mensagem; }
set { SetProperty(ref _mensagem, value); }
}
public ConsultaTabbedViewModel()
{
SendCommand = new DelegateCommand(ExecuteSendCommand);
ListaChat = new ObservableCollection<Models.Entities.ChatMensagem>();
AddChat();
}
private void ExecuteSendCommand()
{
if (!String.IsNullOrWhiteSpace(Mensagem))
{
var message = new Models.Entities.ChatMensagem
{
Text = Mensagem,
IsTextIn = false, //Flag para indicar se a mensagem está sendo recebida (True) ou enviada (False).
MessageDateTime = DateTime.Now
};
ListaChat.Add(message);
Mensagem = "";
}
}
private void AddChat()
{
var lista = new ObservableCollection<Models.Entities.ChatMensagem>
{
new Models.Entities.ChatMensagem()
{
BgColor = "#DCF8C6",
IsTextIn = false,
Text = "Mensagem 1"
},
new Models.Entities.ChatMensagem()
{
BgColor = "#DCF8C6",
IsTextIn = false,
Text = "Mensagem 2"
},
new Models.Entities.ChatMensagem()
{
BgColor = "#DCF8C6",
IsTextIn = false,
Text = "Mensagem 3"
},
new Models.Entities.ChatMensagem()
{
Alinhamento = "Start",
BgColor = "White",
IsTextIn = true,
Text = "Mensagem 4"
},
new Models.Entities.ChatMensagem()
{
BgColor = "White",
IsTextIn = true,
Text = "Mensagem 5"
},
new Models.Entities.ChatMensagem()
{
BgColor = "#DCF8C6",
IsTextIn = false,
Text = "Mensagem 6"
},
new Models.Entities.ChatMensagem()
{
BgColor = "White",
IsTextIn = true,
Text = "Mensagem 7"
},
new Models.Entities.ChatMensagem()
{
IsTextIn = false,
BgColor = "#DCF8C6",
Text = "Mensagem 8"
},
new Models.Entities.ChatMensagem()
{
IsTextIn = false,
BgColor = "#DCF8C6",
Text = "Mensagem 9"
},
new Models.Entities.ChatMensagem()
{
IsTextIn = true,
BgColor = "White",
Text = "Mensagem 10"
},
};
ListaChat = lista;
}
}
public class SelectorDataTemplate : DataTemplateSelector
{
private readonly DataTemplate textInDataTemplate;
private readonly DataTemplate textOutDataTemplate;
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
var messageVm = item as ChatMensagem;
if (messageVm == null)
return null;
//Flag para indicar se a mensagem está sendo recebida (True) ou enviada (False).
return messageVm.IsTextIn ? this.textInDataTemplate : this.textOutDataTemplate;
}
public SelectorDataTemplate()
{
this.textInDataTemplate = new DataTemplate(typeof(TextInViewCell));
this.textOutDataTemplate = new DataTemplate(typeof(TextOutViewCell));
}
}
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DocHouse.CustomCells.TextInViewCell">
<Grid ColumnSpacing="2" Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Grid.Column="1" BackgroundColor="#0535f0" CornerRadius="15">
<Frame.HasShadow>
<OnPlatform x:TypeArguments="x:Boolean" iOS="false" Android="true"/>
</Frame.HasShadow>
<StackLayout>
<Label TextColor="White" Text="{Binding Text}" />
</StackLayout>
</Frame>
<Label FontSize="Micro" Grid.Row="1" Grid.Column="1" Text="{Binding MessageDateTime, StringFormat='{0:MM/dd/yyyy hh:mm tt}'}" TextColor="Gray"></Label>
</Grid>
</ViewCell>
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DocHouse.CustomCells.TextOutViewCell">
<Grid ColumnSpacing="2" Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="2"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Grid.Column="1" CornerRadius="15">
<Frame.HasShadow>
<OnPlatform x:TypeArguments="x:Boolean" Android="true" iOS="false"/>
</Frame.HasShadow>
<Frame.BackgroundColor>
<OnPlatform x:TypeArguments="Color" Android="White" iOS="#F5F5F5"/>
</Frame.BackgroundColor>
<StackLayout>
<Label TextColor="Black" Text="{Binding Text}" />
</StackLayout>
</Frame>
<Label Grid.Row="1" FontSize="Micro" Grid.Column="1" HorizontalTextAlignment="End" Text="{Binding MessageDateTime, StringFormat='{0:MM/dd/yyyy hh:mm tt}'}" TextColor="Gray"></Label>
</Grid>
</ViewCell>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment