本文介绍了ListView 项目不会在 Xamarin Forms 中展开折叠高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个列表视图.在 ListView 我有 ListViewCell.ListViewCell 具有展开折叠功能.展开折叠行为几乎没有问题.

I have a List View. In ListView I have ListViewCell. ListViewCell have expand-Collapse functionality. There are few problems in expand collapse behaviours.

1- 如果我展开第一项,它工作正常.但是,如果我先展开第二个项目并展开第一个项目,则第一个项目会落后.请参阅屏幕截图中的案例 1.

1- If I expand first item, it works fine. But If I expand second item first and expand first item, it first item goes behind. See Case-1 in screen shot.

2- 如果我单击列表视图项,它会以灰色显示一秒钟.我想阻止这一切.当用户单击任何单元格时,它不应改变和颜色.案例-2

2- If I click on list view item, it show in gray color for a second. I want to stop this. It should not change and color when user click on any cell. Case-2

3- 如果我展开第一项并再次折叠它.它会折叠,但会在第二项和第一项之间保留空白.

3- If I expand first item and collapse it again. It collapse but it keep white space between second and first item.

我注意到了这种行为.如果我向下和向上滚动,上述问题会解决.好吧,在理想情况下,用户不会在每次操作后上下滚动:D

I have noticed this behavior. Above issue resolve if I scroll down and up. Well, in ideal case, user doesn't scroll up and down after every operation :D

注意:我在 ListViewCell 中有 Entry、DatePicker 和 Buttons.用户必须能够在其中输入.

Note: I have Entry, DatePicker and Buttons in ListViewCell. User must be able to input in it.

这是我的代码.我还附上了屏幕截图.请推荐

Here is my code. I have also attached screen shot. Please suggest

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

截图

推荐答案

发生这种情况是因为 单元格的高度 仅在第一次渲染时计算.之后,更改仅影响内部布局视图.

It happens 'cause the cell's height is calculated only on the first rendering. After that, the changes affect just the inner layout view.

尝试在当前 TappedCommand 逻辑的末尾调用 ForceUpdateSize();.它将强制整个单元格重新计算其边界.

Try call ForceUpdateSize(); at the end of your current TappedCommand's logic. It'll force the entire cell to recalculate its bounds.

代码应如下所示:

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 Forms 中展开折叠高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-14 19:06