Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

How to solve overalpping probkem in Listview item ?

sagarsagar Member ✭✭✭

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

When menus bind first without expand.

two menus are there, If I click on first menu it looks like

it is overlapping with second menu.

If I expand the 2nd menu then it looks like

My UI code is

`<ContentPage.Content>



    <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?

Sign In or Register to comment.