blocks|key|3946828|text|你不需要一个自定义渲染器来聊天，因为一个简单的ListView就足够了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3946829|基本上，您将把ItemsSource属性绑定到一个ObservableCollection，这样当添加新消息时，它将自动出现在列表视图中。|3946830|此外，如果您认为用户不需要/必须立即查看大量历史聊天消息，则可能需要使用无限滚动技术，例如https://www.youtube.com/watch?v=DG5Asglf0vU|offset|length|3946831|要滚动到最后一条消息：|3946832|Device.BeginInvokeOnMainThread+(()+=>+{
+++++++++++Listviewname.scrollto(items[count-1],+scrolltoposition.end,+false)
+++++++});
+});|code-block|syntax|javascript|3946833|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/watch?v=DG5Asglf0vU^0|0|0|19|17|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$F|Z|G|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

You need not a Custom Renderer for chat as a simple ListView will suffice. 

Basically, you will bind the ItemsSource property to an ObservableCollection so when new messages are added, it will automatically appear on the listview. 

Also, you might want to use Infinite Scrolling technique if there are significant number of historical chat messages that you believe user doesn't need/have to view them at once e.g. <a href="https://www.youtube.com/watch?v=DG5Asglf0vU" rel="nofollow noreferrer">https://www.youtube.com/watch?v=DG5Asglf0vU</a> 

To scroll to the last message:

<pre><code>Device.BeginInvokeOnMainThread (() =&gt; {
 Listviewname.scrollto(items[count-1], scrolltoposition.end, false)
 });
 });
</code></pre>

blocks|key|3946860|text|你不需要一个自定义的渲染器，你只需要使用一个ListView并添加一些逻辑来为你做滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3946861|View.xaml文件：|3946862|

++++++++<ListView+x:Name="MessagesListView"
++++++++++++++Grid.Row="0"
++++++++++++++BackgroundColor="Transparent"
++++++++++++++HasUnevenRows="True"
++++++++++++++ItemTemplate="{StaticResource+MessageTemplateSelector}"
++++++++++++++ItemsSource="{Binding+Messages}"
++++++++++++++SelectionMode="None"
++++++++++++++SeparatorVisibility="None"+/>

|code-block|syntax|javascript|3946863|x:Name属性是重要的部分，您将在后面的代码中使用该名称。|offset|length|style|CODE|3946864|现在是View.xaml.cs文件：|3946865|//+Previous+Implmentation

++++///+<summary>
++++///+Override+of+OnAppearing+method.+Fires+as+page+is+appearing.
++++///+Good+place+to+set+up+event+handlers.
++++///+</summary>
++++protected+override+void+OnAppearing()
++++{
++++++++base.OnAppearing();

++++++++((INotifyCollectionChanged)MessagesListView.ItemsSource).CollectionChanged+%2B=+OnListViewCollectionChanged;
++++}

++++///+<summary>
++++///+Override+of+OnDisappearing+method.+Fires+as+page+is+disappearing.
++++///+Good+place+to+tear+down+event+handlers.
++++///+</summary>
++++protected+override+void+OnDisappearing()
++++{
++++++++base.OnDisappearing();

++++++++((INotifyCollectionChanged)MessagesListView.ItemsSource).CollectionChanged+-=+OnListViewCollectionChanged;
++++}

++++///+<summary>
++++///+Scrolls+a+the+messages+listview+to+the+last+item+whenever
++++///+a+new+message+is+added+to+the+collection.
++++///+</summary>
++++private+void+OnListViewCollectionChanged(object+sender,+NotifyCollectionChangedEventArgs+e)
++++{
++++++++var+myList+=+((IEnumerable<Message>)MessagesListView.ItemsSource).ToList();

++++++++//+Must+be+ran+on+main+thread+or+Android+chokes.
++++++++Device.BeginInvokeOnMainThread(async+()+=>
++++++++{
++++++++++++//+For+some+reason+Android+requires+a+small+delay+or+the+scroll+never+happens.
++++++++++++await+Task.Delay(50);
++++++++++++MessagesListView.ScrollTo(myList.Last(),+ScrollToPosition.End,+false);
++++++++});
++++}

//+Remaining+Implementation|3946866|基本上，只要ListView的ItemSource发生变化，就会触发一个事件。在这种情况下，您将滚动到列表的末尾。|3946867|entityMap^0|0|0|0|0|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$K|10|L|11|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

You don't need a custom renderer, you can just use a ListView and add some logic to do the scroll for you.

The View.xaml file:

<pre><code>&lt;!-- Previous Implementation --&gt;

 &lt;ListView x:Name="MessagesListView"
 Grid.Row="0"
 BackgroundColor="Transparent"
 HasUnevenRows="True"
 ItemTemplate="{StaticResource MessageTemplateSelector}"
 ItemsSource="{Binding Messages}"
 SelectionMode="None"
 SeparatorVisibility="None" /&gt;

&lt;!-- Remaining Implementation --&gt;
</code></pre>

The <code>x:Name</code> attribute is the important part, you're going to use that name in the code behind.

And now the View.xaml.cs file:

<pre><code>// Previous Implmentation

 /// &lt;summary&gt;
 /// Override of OnAppearing method. Fires as page is appearing.
 /// Good place to set up event handlers.
 /// &lt;/summary&gt;
 protected override void OnAppearing()
 {
 base.OnAppearing();

 ((INotifyCollectionChanged)MessagesListView.ItemsSource).CollectionChanged += OnListViewCollectionChanged;
 }

 /// &lt;summary&gt;
 /// Override of OnDisappearing method. Fires as page is disappearing.
 /// Good place to tear down event handlers.
 /// &lt;/summary&gt;
 protected override void OnDisappearing()
 {
 base.OnDisappearing();

 ((INotifyCollectionChanged)MessagesListView.ItemsSource).CollectionChanged -= OnListViewCollectionChanged;
 }

 /// &lt;summary&gt;
 /// Scrolls a the messages listview to the last item whenever
 /// a new message is added to the collection.
 /// &lt;/summary&gt;
 private void OnListViewCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
 {
 var myList = ((IEnumerable&lt;Message&gt;)MessagesListView.ItemsSource).ToList();

 // Must be ran on main thread or Android chokes.
 Device.BeginInvokeOnMainThread(async () =&gt;
 {
 // For some reason Android requires a small delay or the scroll never happens.
 await Task.Delay(50);
 MessagesListView.ScrollTo(myList.Last(), ScrollToPosition.End, false);
 });
 }

// Remaining Implementation
</code></pre>

Basically you're going to set an event to fire whenever the ListView's ItemSource changes. In that event, you're going to scroll to the end of the list.

I need a ListView Renderer for Chat like whatsapp.

when if the new Message comes its automatically scroll down.

Please let me know if have a sample for this.

thanks

Is Anyone have a Listview Renderer for chat

我需要一个像whatsapp聊天的ListView渲染器。当新消息到来时，它会自动向下滚动。如果有样品，请告诉我。谢谢

问谁有聊天用的Listview渲染器？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谁有聊天用的Listview渲染器？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谁有聊天用的Listview渲染器？
EN