Изменение RowDefinition элемента ListView на Tap - PullRequest
0 голосов
/ 23 февраля 2019

То, что я пытаюсь реализовать, это всплывающее сообщение в чате, в котором вы нажимаете элемент управления / сообщение, и сообщение расширяется, показывая детали даты и статуса просмотра / отправки ниже.У меня есть DataTemplate Selector для различных элементов управления, которые у меня есть для Отправителя и Получателя.

Моя проблема заключается в изменении высоты сообщения в ListView. Я попытался реализовать привязкуRowDefinition для любой переменной Height в моем классе Message (класс, который содержит информацию, касающуюся сообщения).Хотя высота была обновлена, она не отражалась на ListView.Я искал в Интернете существующие шаблоны пользовательского интерфейса чата, но думаю, что большинство из них платные.Поэтому я пытаюсь выполнить следующие действия: Изменить шаблон данных WPF для элемента ListBox, если он выбран .Но для Xamarin нет ListBoxItem, поскольку есть только ListView.

Кроме того, я работаю на Android и iOS.Пример, который кросс-платформенный, чтобы решить эту проблему, будет очень признателен.Ниже приведены части моего кода.

datatemplate.cs

class MessageTemplateSelector : DataTemplateSelector
{
    public MessageTemplateSelector()
    {
        ReceiverDataTemplate = new DataTemplate(typeof(MessageReceiver));
        SenderDataTemplate = new DataTemplate(typeof(MessageSender));
    }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var message = item as Message;
        if (message == null)
            return null;
        return message.isSender ? ReceiverDataTemplate : SenderDataTemplate;
    }

    private readonly DataTemplate ReceiverDataTemplate;
    private readonly DataTemplate SenderDataTemplate;
}

MessageSender.xaml

<?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="Project.layout.MessageSender">
    <ViewCell.View>
        <Grid HorizontalOptions="EndAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="{Binding Path=Height}"/>
                <RowDefinition Height="*" />
                <RowDefinition Height="{Binding Path=Height}" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="75" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="15" />
            </Grid.ColumnDefinitions>
            <Label Text="{Binding Path=timestamp}" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="Center" IsVisible="{Binding Path=Selected}"/>
            <Frame Padding="0" CornerRadius="20" Grid.Column="1" Grid.Row="1" HorizontalOptions="EndAndExpand" >
                <Grid BackgroundColor="White" VerticalOptions="FillAndExpand">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Label Text="{Binding Path=text}" VerticalOptions="FillAndExpand" Margin="15,10"/>
                </Grid>
            </Frame>
            <Label Text="Seen" Grid.Column="1" Grid.Row="2" HorizontalOptions="EndAndExpand" IsVisible="{Binding Path=Selected}"/>
        </Grid>
  </ViewCell.View>
</ViewCell>

Message.cs

class Message
{
        public bool isSender { get; set; }
        public sbyte status { get; set; }
        public string text { get; set; }
        public string timestamp { get; set; }
        public Message(bool isSender, sbyte status, string text, string timestamp)
        {
            this.isSender = isSender;
            this.status = status;
            this.text = text;
            this.timestamp = timestamp;
        }
        public sbyte height = 0;
        public sbyte Height { get { return height; }  set { height = value; } }
        bool selected = false;
        public bool Selected
        {
            get { return selected; }
            set { selected = value;if (value) { Height = 25; } else { Height = 0; } }
        }
    }

Показатьmainpage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Project.model"
             x:Class="Project.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:MessageTemplateSelector x:Key="MessageTemplateSelector"></local:MessageTemplateSelector>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout>
        <ListView x:Name="conversation"
                  ItemTemplate="{StaticResource MessageTemplateSelector}"
                    ItemsSource="{Binding Message}"
                    HasUnevenRows="True"
                    SeparatorVisibility="None"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}"
                  IsPullToRefreshEnabled="true"
                  ItemTapped="Conversation_ItemTapped"
                  Refreshing="Conversation_Refreshing">
        </ListView>
</ContentPage>

MainPage.cs

private void Conversation_ItemTapped(object sender, ItemTappedEventArgs e)
{
    if (e.Item == null) return;
    Message selectedItem = (Message)e.Item;
    Log.Debug("ItemTap","Height before:" + selectedItem.Height);
    if (selectedItem.Selected) { ((ListView)sender).SelectedItem = null; selectedItem.Selected = false; }
    else { selectedItem.Selected = true; }
    Log.Debug("ItemTap", "Height after:" + selectedItem.Height);
}

Это скриншот моего журнала, который присутствует в событии ItemTapped в моем ListView.Как видите, высота обновляется, но она не отражается на ListView.

Proof that height updates on item tap

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...