Not able to show image and maps same time in listview

[Shraddha Patange]

hello,

Am using sflistview to display user posts which can be image overlay text or map post

am successfully able to bind images to the list view but when I bind map control then all images will be overlay by the map control

code = 

<StackLayout x:Name="ImagePostLayout" BackgroundColor="{Binding PostBackgroundColor}">

                                                                <Grid RowSpacing="0">

                                                                    <Grid.RowDefinitions>

                                                                        <RowDefinition Height="300"></RowDefinition>

                                                                    </Grid.RowDefinitions>

                                                                    <Image x:Name="RecentPostImg" HeightRequest="300" Grid.Row="0" Grid.Column="0" Source="{Binding ImageUrl}" Opacity="{Binding Opacity}"></Image>

                                                                    <Label x:Name="PostTextLbl" Grid.Row="0" Grid.Column="0" Text="{Binding PostText}" TextColor="{Binding PostColor}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontSize="15"></Label>

                                                                    <StackLayout x:Name="MapPost">

                                                                        <maps:Map x:Name="map" HasZoomEnabled="True" IsShowingUser="True">

                                                                            <maps:Map.ItemTemplate>

                                                                                <DataTemplate>

                                                                                    <maps:Pin Type="Place" Position="{Binding MapPosition}" />

                                                                                </DataTemplate>

                                                                            </maps:Map.ItemTemplate>

                                                                        </maps:Map>

                                                                    </StackLayout>

                                                                </Grid>

                                                            </StackLayout>

[Lakshmi Natarajan]

Hi Shraddha, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Not able to show image and maps same time in listview” from our side. We would like to inform you that when loading elements inside Grid, then it is recommended to define row and column for each elements. The default value of the Row and Column is 0. So, when loading elements without defining row/column then it will be layout on the first row/column. This is caused the map control to overlay the Image. Please refer to the documentation regarding the same from here. 

 

Please refer the following code snippets to overcome the reported scenario, 

XAML: Add RowDefinition for Grid and provide row for the Map control. 

<syncfusion:SfListView x:Name="listView" AutoFitMode="DynamicHeight" ItemSpacing="5" ItemsSource="{Binding ContactsInfo}"> 

    <syncfusion:SfListView.ItemTemplate > 

        <DataTemplate> 

            <StackLayout x:Name="ImagePostLayout" BackgroundColor="Beige"> 

                <Grid RowSpacing="0"> 

                    <Grid.RowDefinitions> 

                        <RowDefinition Height="300"></RowDefinition> 

                        <RowDefinition Height="Auto"></RowDefinition> 

                    </Grid.RowDefinitions> 

                    <Image x:Name="RecentPostImg" HeightRequest="300" Grid.Row="0" Grid.Column="0" Source="{Binding ContactImage}" ></Image> 

                    <Label x:Name="PostTextLbl" Grid.Row="0" Grid.Column="0" Text="{Binding ContactName}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontSize="15"></Label> 

                    <StackLayout x:Name="MapPost" BackgroundColor="Accent" Grid.Row="1"> 

                        <maps:Map x:Name="map" HasZoomEnabled="True" IsShowingUser="True"> 

                            <maps:Map.ItemTemplate> 

                                <DataTemplate> 

                                    <maps:Pin Type="Place" Position="{Binding MapPosition}" /> 

                                </DataTemplate> 

                            </maps:Map.ItemTemplate> 

                        </maps:Map> 

                    </StackLayout> 

                </Grid> 

            </StackLayout> 

        </DataTemplate> 

    </syncfusion:SfListView.ItemTemplate> 

</syncfusion:SfListView> 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan