CollectionView项目动画

发布于 2025-02-08 21:15:02 字数 4488 浏览 1 评论 0原文

我正在使用聊天功能创建应用程序。我制作了简单的“键入指示器”,显示带有文本“用户正在键入...”中的收集视图(标签)中的新项目。因此,现在我想对此标签进行动画或添加一些动画,例如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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文