Question

我有一个列表视图。在ListView中，我有ListViewCell。 ListViewCell具有扩展折叠功能。展开崩溃行为几乎没有问题。

1-如果我展开第一个项目，则效果很好。但是，如果我先展开第二项然后再展开第一项，则它会落后第一项。参见屏幕截图中的案例1。

2-如果我单击列表视图项，它会以灰色显示一秒钟。我想停止这个。用户单击任何单元格时，它不应更改和变色。情况2

3-如果我展开第一个项目然后再次折叠它。它崩溃了，但在第二项和第一项之间保留了空白。

我已经注意到这种行为。如果我上下滚动，以上问题解决。好吧，在理想情况下，用户不必在每次操作后都上下滚动：D

注意：我在ListViewCell中有Entry，DatePicker和Button。用户必须能够输入。

这是我的代码。我还附上了屏幕截图。请建议

主页列表视图

<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
}

希望对您有帮助。

ListView项在Xamarin表单中不会展开折叠高度

主页列表视图

WorkHistoryViewCell.xaml

WorkHistoryViewCell.xaml.cs //展开折叠的命令

1 个答案: