locked
How to solve overlapping problem in list-view using xamarin forms? RRS feed

  • Question

  • User366365 posted

    Hi, I am working on xamarin forms, where I have a binding list view item dynamically from the API for dynamic menus with submenus but the list view is overlapping the other item. Please refer to the below images.

    When menus bind first it looks like

    When I click on first menu it expand to show submenus like below

    here first menu overlapping with second.

    When I click on second menu it looks like

    my code

     <ContentPage.Content>
      <StackLayout>
        <StackLayout Orientation="Horizontal" BackgroundColor="#fa4e0a">
            <Image Source="dp" WidthRequest="70" HeightRequest="50" Margin="15,10,0,10" HorizontalOptions="Start" />
            <Label x:Name="lbl_MenuPageWelComeMsg" TextColor="White" FontSize="Medium" FontAttributes="Bold" Margin="2,0,0,0" VerticalOptions="Center" />
        </StackLayout>
    
        <ListView x:Name="Menusource" ItemsSource="{Binding MainMenues}" SeparatorVisibility="None" HasUnevenRows="true"  SelectionMode="Single">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Vertical">
                            <Grid Padding="15">
                                <Label Text="{Binding MenuName}"  FontSize="16" VerticalOptions="Center" HorizontalOptions="Start"/>
                                <Image x:Name="im" Source="{Binding ArrowIconSource}" IsVisible="{Binding IsSubmenu}" HeightRequest="15" WidthRequest="15" VerticalOptions="Center" 
                                           HorizontalOptions="End">
                                </Image>
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer 
                                                Tapped="MainMenuTapped"
                                                NumberOfTapsRequired="1" />
                                </Grid.GestureRecognizers>
                            </Grid>
                            <Grid Padding="5,0,0,0" Margin="15,0,0,0" IsVisible="{Binding IsChildrenVisible}" HeightRequest="{Binding ChildrenRowHeightRequest}">
                                <ListView ItemsSource="{Binding Submenues}" ItemTapped="SubMenuTapped" SeparatorVisibility="None" SelectionMode="Single" HasUnevenRows="false">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <Grid Padding="10">
                                                    <Label Text="{Binding SubMenuTitle}"  VerticalOptions="Center" HorizontalOptions="Start" />
                                                    <Image IsVisible="False" Source="rightarrow.png" HeightRequest="12" WidthRequest="12" VerticalOptions="Center" HorizontalOptions="End"/>
                                                    <BoxView VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" HeightRequest="1" WidthRequest="30" Color="#5b5d68"></BoxView>
                                                </Grid>
                                            </ViewCell>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </Grid>
                            <!--<BoxView VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="1" WidthRequest="50" Color="#5b5d68"></BoxView>-->
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
        <StackLayout VerticalOptions="End" BackgroundColor="#fa4e0a">
            <Button TextColor="White" x:Name="Btn_Logout" Text="Logout" Clicked="Btn_Logout_Clicked" BackgroundColor="#fa4e0a"></Button>
        </StackLayout>
      </StackLayout>
    </ContentPage.Content>
    

    How to overcome from this problem?

    Monday, December 30, 2019 4:33 AM

Answers

  • User369978 posted

    Do you set the ChildrenRowHeightRequest according to count of the sub menu item in viewModel ?

     public ViewModel()
        {
            Submenues = new List<string>() { "1", "2", };
    
            ChildrenRowHeightRequest = Submenues.Count * 40;
        }
    

    It works fine on my side .

    Check the screenshot and project .

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, December 30, 2019 9:08 AM

All replies

  • User2148 posted

    you don't have to add one listview inside another. For this, you can use Grouping

    Monday, December 30, 2019 8:15 AM
  • User369978 posted

    Do you set the ChildrenRowHeightRequest according to count of the sub menu item in viewModel ?

     public ViewModel()
        {
            Submenues = new List<string>() { "1", "2", };
    
            ChildrenRowHeightRequest = Submenues.Count * 40;
        }
    

    It works fine on my side .

    Check the screenshot and project .

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, December 30, 2019 9:08 AM