ListView Item doesn't expand-collapse height in Xamarin Forms

Hi,

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

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- 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- If I expand first item and collapse it again. It collapse but it keep white space between second and first item.

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

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

Main Page List View

<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 //Command to expand collapse

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

Screenshot
enter image description here

Answers

  • ManojkumarMaliManojkumarMali USMember ✭✭✭

    Hi,

    I can't say anything on your first issue.
    For 2nd, give background color to your list view. This may resolve your issue if not then set background color to your parent stack layout of WorkHistoryViewCell.xaml file.
    For 3rd, I think due to frame your list view is not resizing automatically. Instead frame use other layout and test again.

  • developer007developer007 Member ✭✭

    @ManojkumarMali said:
    Hi,

    I can't say anything on your first issue.
    For 2nd, give background color to your list view. This may resolve your issue if not then set background color to your parent stack layout of WorkHistoryViewCell.xaml file.
    For 3rd, I think due to frame your list view is not resizing automatically. Instead frame use other layout and test again.

    Thanks for reply

    2nd: Not working at all
    3rd: Not working at all

Sign In or Register to comment.