Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 91519

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

$
0
0

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?


Viewing all articles
Browse latest Browse all 91519

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>