Created
February 8, 2018 13:04
-
-
Save brunoportess/d69161c15aaecd383a5376dfe62b8956 to your computer and use it in GitHub Desktop.
Base para criar chat com template similar ao whatsApp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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