Элемент ListView не расширяется - высота свертывания в формах Xamarin

Question

У меня есть просмотр списка. В ListView у меня есть ListViewCell. ListViewCell имеет функциональность раскрытия-свертывания. Есть несколько проблем в поведении разваливания.

1 - Если я разверну первый элемент, он будет работать нормально. Но если я сначала разверну второй элемент и разверну первый элемент, то первый элемент будет отставать. Смотрите Случай 1 на снимке экрана.

2 - Если я нажму на элемент списка, он будет отображаться серым цветом на секунду. Я хочу остановить это. Он не должен меняться и окрашиваться при нажатии пользователем на любую ячейку Case-2

3- Если я разверну первый предмет и снова сверну его. Он разрушается, но сохраняет пространство между вторым и первым элементом.

Я заметил это поведение. Над вопросом решить, если я прокручиваю вниз и вверх. Ну, в идеальном случае, пользователь не прокручивает вверх и вниз после каждой операции: D

Примечание: у меня есть элемент ввода, DatePicker и кнопки в ListViewCell. Пользователь должен иметь возможность ввода в него.

Вот мой код. Я также приложил снимок экрана. Пожалуйста, предложите

Просмотр списка главной страницы

<ListView x:Name="WorkHistoryListView"
    ItemsSource="{Binding WorkHistoryList}"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand"
    SeparatorVisibility="None"
    ItemTapped="OnListViewItemTapped"
    Margin="10"
    HasUnevenRows = "true"
    IsPullToRefreshEnabled="False">
    <ListView.ItemTemplate>
        <DataTemplate>
            <localview:WorkHistoryViewCell />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

WorkHistoryViewCell.xaml

<StackLayout Margin="0" Padding="0">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <!-- Blue heading-->
        <StackLayout Margin="0" Padding="0" Grid.Row="0" BackgroundColor="#367fa9">
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
      Padding="15" RowSpacing="10" Margin="0" BackgroundColor="Transparent">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>

                <Label Text="{Binding Name}" HorizontalOptions="Center" Grid.Column="0" Grid.Row="0"/>
                <Label Text="{Binding Date}" HorizontalOptions="Center" Grid.Column="1" Grid.Row="1"/>
                <Label Text="+" HorizontalOptions="End" VerticalOptions="Center" Grid.Column="2" x:Name="LabelCollapse" Grid.Row="0" Grid.RowSpan="2" FontFamily="Roboto">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="LabelOpenCommand"/>
                    </Label.GestureRecognizers>
                </Label>
            </Grid>
        </StackLayout>
        <StackLayout Margin="0" Padding="0" Grid.Row="1" x:Name="FrameVisible">
            <Frame Margin="0" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="White" OutlineColor="Gray">
                <StackLayout Margin="0" VerticalOptions="Fill" Padding="20" IsVisible="{Binding IsWeekly}">
                    <Grid>
                        <Grid.Resources>
                            <ResourceDictionary>
                                <local:InvertBooleanConverter x:Key="invertBooleanConverter" />
                                <Style x:Key="LabelStyle" TargetType="Label">
                                    <Setter Property="FontSize" Value="15"/>
                                    <Setter Property="FontFamily" Value="Roboto"/>
                                    <Setter Property="TextColor" Value="White"/>
                                </Style>
                            </ResourceDictionary>
                        </Grid.Resources>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="125"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Image Source="EditLog.png" Grid.Column="1" Grid.Row="0" HorizontalOptions="End" VerticalOptions="Center"
                                HeightRequest="24">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="OnImageViewItemTapped"/>
                            </Image.GestureRecognizers>
                        </Image>
                        <Label Text="Date" Grid.Column="0" Grid.Row="0" Style="{StaticResource LabelStyle}" 
                               TextColor="Black" FontFamily="Roboto" Margin="0" />
                        <local:ExtendedDatePicker TextColor="LightGray" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1"
                            IsEnabled="False" Date="{Binding Date}" BackgroundColor="White">
                            <DatePicker.Format>dd/MM/yyyy</DatePicker.Format>
                        </local:ExtendedDatePicker>

                        <Label Text="Pay" Grid.Column="0" Grid.Row="2"  Style="{StaticResource LabelStyle}"
                               TextColor="Black" FontFamily="Roboto" Margin="0,10,0,0" />

                        <local:CustomEntry Grid.Column="0" Grid.Row="3" Margin="0,10,0,0" WidthRequest="150" Text="{Binding Pay}"
                            Style="{StaticResource LabelStyle}" TextColor="Black"  HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"/>

                        <Button Text="Submit" BorderRadius="18" TextColor="White" Command="{Binding SubmitWeeklyCommand}" Grid.Column="0" Grid.Row="4" FontFamily="Roboto"/>
                    </Grid>
                </StackLayout>
            </Frame>
        </StackLayout>
    </Grid>
</StackLayout>

WorkHistoryViewCell.xaml.cs // Команда для развертывания свертывания

private void LabelOpenCommand(object sender,TappedEventArgs e)
{
    if (LabelCollapse.Text == "+")
    {
        FrameVisible.IsVisible = false;
        LabelCollapse.Text = "-";
        FrameVisible.IsVisible = true;
    }
    else
    {
        FrameVisible.IsVisible = true;
        LabelCollapse.Text = "+";
        FrameVisible.IsVisible = false;
    }
}

Скриншот

Answer 1

Это происходит потому, что высота ячейки рассчитывается только при первом рендеринге. После этого изменения влияют только на внутренний вид макета.

Попробуйте позвонить ForceUpdateSize(); в конце вашей текущей логики TappedCommand. Это заставит всю ячейку пересчитать свои границы.

Код должен выглядеть так:

private void LabelOpenCommand(object sender,TappedEventArgs e)
{
    if (LabelCollapse.Text == "+")
    {
        FrameVisible.IsVisible = false;
        LabelCollapse.Text = "-";
        FrameVisible.IsVisible = true;
    }
    else
    {
        FrameVisible.IsVisible = true;
        LabelCollapse.Text = "+";
        FrameVisible.IsVisible = false;
    }

    ForceUpdateSize
}

Надеюсь, это поможет.