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?