CollectionView项目动画
我正在使用聊天功能创建应用程序。我制作了简单的“键入指示器”,显示带有文本“用户正在键入...”中的收集视图(标签)中的新项目。因此,现在我想对此标签进行动画或添加一些动画,例如3个指示用户正在键入的点。有可能做到这样的事情吗?任何帮助都感谢,谢谢。
@编辑 下面的代码描述了我的聊天布局:
<ContentPage.Content>
<StackLayout x:Name="content_stackLayout">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<CollectionView
x:Name="chat_collectionView"
Grid.Row="0"
VerticalOptions="Start"
HorizontalOptions="Center"
ItemSizingStrategy="MeasureAllItems"
SelectionMode="None"
ItemsSource="{Binding Messages}"
ItemsUpdatingScrollMode="KeepLastItemInView"
>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HorizontalOptions="{Binding messageAlignment}" Margin="30,5,30,5">
<Image
Source="{Binding image}"
Margin="{Binding imageMargin}"
HeightRequest="40"
WidthRequest="40"
Aspect="AspectFit" />
<Frame
BorderColor="Black"
CornerRadius="{Binding cornerRadius}"
BackgroundColor="{Binding kolorWiadomosci}"
Margin="{Binding messageMargin}">
<Label
Text="{Binding message}"
FontAttributes="{Binding textAttribute}"
x:Name="label"
FontSize="Title"
VerticalOptions="CenterAndExpand" />
</Frame>
</StackLayout>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<StackLayout
Grid.Row="1"
Orientation="Horizontal"
x:Name="sendMessage_stackLayout"
HeightRequest="80"
Padding="8"
>
<Entry
Margin="10,10,0,5"
Placeholder="your message..."
ClassId="message_entry"
x:Name="message_entry_label"
HorizontalOptions="FillAndExpand"
ClearButtonVisibility="WhileEditing"
Keyboard="Chat"
ReturnType="Send"
TextColor="Black"
BackgroundColor="#2596be"
/>
<Button
WidthRequest="200"
HeightRequest="30"
Text="Send"
FontSize="Title"
x:Name="button_send_label"
HorizontalOptions="End"
Clicked="Button_Clicked"
BorderWidth="5"
BorderColor="Black"
CornerRadius="5"
/>
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>
该模型从另一个带有SignalR的应用程序接收消息,创建新消息并将它们添加到列表中,如下:
public class Message
{
public string message{ get; set; }
//public Thickness messageMargin{ get; set; }
public string image{ get; set; }
//public Thickness imageMargin{ get; set; }
public FontAttributes textAttribute{ get; set; }
public string author{ get; set; }
public LayoutOptions messageAlignment{ get; set; }
public Color textColor{ get; set; }
public double cornerRadius { get; set; }
}
我已经与ViewModel绑定了, 它发射了我的“聊天应用程序”收到的Signalr boolean方法。如果USERTYPING = true-应用程序添加新消息,说“用户正在键入”。我想以某种方式对其进行动画动画,或者在不可能的情况下,为此行为开发另一个解决方案。
I'm creating application with chat function. I made simple 'typing indicator' that shows new item in collectionView (Label) with text 'User is typing...'. So now i would like to animate this Label or add some animation like 3 dots that indicates user is typing. Is it somehow possible to make something like this? Any help appreciated, Thank you.
@EDIT
Code below describes my Chat layout:
<ContentPage.Content>
<StackLayout x:Name="content_stackLayout">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<CollectionView
x:Name="chat_collectionView"
Grid.Row="0"
VerticalOptions="Start"
HorizontalOptions="Center"
ItemSizingStrategy="MeasureAllItems"
SelectionMode="None"
ItemsSource="{Binding Messages}"
ItemsUpdatingScrollMode="KeepLastItemInView"
>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HorizontalOptions="{Binding messageAlignment}" Margin="30,5,30,5">
<Image
Source="{Binding image}"
Margin="{Binding imageMargin}"
HeightRequest="40"
WidthRequest="40"
Aspect="AspectFit" />
<Frame
BorderColor="Black"
CornerRadius="{Binding cornerRadius}"
BackgroundColor="{Binding kolorWiadomosci}"
Margin="{Binding messageMargin}">
<Label
Text="{Binding message}"
FontAttributes="{Binding textAttribute}"
x:Name="label"
FontSize="Title"
VerticalOptions="CenterAndExpand" />
</Frame>
</StackLayout>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<StackLayout
Grid.Row="1"
Orientation="Horizontal"
x:Name="sendMessage_stackLayout"
HeightRequest="80"
Padding="8"
>
<Entry
Margin="10,10,0,5"
Placeholder="your message..."
ClassId="message_entry"
x:Name="message_entry_label"
HorizontalOptions="FillAndExpand"
ClearButtonVisibility="WhileEditing"
Keyboard="Chat"
ReturnType="Send"
TextColor="Black"
BackgroundColor="#2596be"
/>
<Button
WidthRequest="200"
HeightRequest="30"
Text="Send"
FontSize="Title"
x:Name="button_send_label"
HorizontalOptions="End"
Clicked="Button_Clicked"
BorderWidth="5"
BorderColor="Black"
CornerRadius="5"
/>
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>
I've got binding with viewModel which receives messages from another App with SignalR, creates a new messages and adds them to List called "Messages" like below:
public class Message
{
public string message{ get; set; }
//public Thickness messageMargin{ get; set; }
public string image{ get; set; }
//public Thickness imageMargin{ get; set; }
public FontAttributes textAttribute{ get; set; }
public string author{ get; set; }
public LayoutOptions messageAlignment{ get; set; }
public Color textColor{ get; set; }
public double cornerRadius { get; set; }
}
So now when another person in second App is typing, it fires SignalR boolean method that my 'Chat App' receives. If UserTyping = true - App adds new message saying 'User is typing'. I would like to animate it somehow or if not possible, develop another solution for this behaviour.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论