XAM-Consulting / SlideOverKit

Easily Create Awesome Slideover's in Xamarin.Forms
Apache License 2.0
395 stars 120 forks source link

[iOS] SlidePopupView - ListView content not displayed #92

Open plsgard opened 5 years ago

plsgard commented 5 years ago

Version : 2.1.6.2 OS : iOS 12.1

Hi everyone,

I implemented a SlidePopupView raised from NavigationBar Title View. This SlidePopupView contains a grid with 3 rows : 1 relative layout to get the image "upicon.png", 1 listview, 1 button in order to close the popup.

On Android, no problem, everything is fine.

kudu-android2

On iOS, all datas contained in listview - except images - are not displayed.

kudu-android

I tried multiple layout inside ListView's ViewCell. Same result ; one difference, it seems that if there is multiple stacklayout, specially if they are nested, even images are not displayed.

No problem with SlideMenu ; it works on both platform.

This is my XAML :

<t:SlidePopupView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:views="clr-namespace:Views.Shared" xmlns:t="clr-namespace:SlideOverKit" x:Class="Views.Shared.SwitchView" xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize" xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations">
    <Grid RowSpacing="0" Padding="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="10" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <RelativeLayout Padding="0">
            <Image Source="UpIcon.png" Aspect="Fill" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width, Factor=0.05}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.5}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1}" />
        </RelativeLayout>
        <ListView x:Name="ListView" Grid.Row="1" HorizontalOptions="FillAndExpand" RowHeight="65" VerticalOptions="Start" BackgroundColor="White" ItemsSource="{Binding Items}" SeparatorVisibility="Default" IsPullToRefreshEnabled="false" HasUnevenRows="true"
            CachingStrategy="RecycleElement" ItemSelected="Handle_ItemSelected" SelectedItem="{Binding Selected}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid RowSpacing="0" Margin="0" ColumnSpacing="10" Padding="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <StackLayout Grid.Column="0" Spacing="5" HorizontalOptions="Center" VerticalOptions="Center">
                                <ffimageloading:CachedImage IsVisible="{Binding HasPhoto}" DownsampleToViewSize="true" VerticalOptions="Center" HorizontalOptions="Center" Source="{Binding ThumbnailPictureUrl}" WidthRequest="45" HeightRequest="45" LoadingPlaceholder="loading.gif" ErrorPlaceholder="error.png"
                                    Aspect="AspectFill">
                                    <ffimageloading:CachedImage.Transformations>
                                        <fftransformations:CircleTransformation />
                                    </ffimageloading:CachedImage.Transformations>
                                </ffimageloading:CachedImage>
                                <Frame Padding="0" IsVisible="{Binding HasPhoto, Converter={StaticResource InverseBooleanConverter}}" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="{StaticResource DarkBackgroundColor}" HasShadow="false" HeightRequest="45" WidthRequest="45" CornerRadius="23">
                                    <Frame.Triggers>
                                        <DataTrigger TargetType="Frame" Binding="{Binding IsCurrent}" Value="true">
                                            <Setter Property="BorderColor" Value="{StaticResource PrimaryDark}" />
                                        </DataTrigger>
                                    </Frame.Triggers>
                                    <Label HorizontalTextAlignment="Center" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" FontSize="19" TextColor="White" Text="{Binding FirstLetter}">
                                    </Label>
                                </Frame>
                            </StackLayout>
                            <StackLayout Grid.Column="1" Spacing="5" HorizontalOptions="StartAndExpand" Orientation="Horizontal" VerticalOptions="Center">
                                <Label Text="{Binding Name}" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" LineBreakMode="TailTruncation">
                                    <Label.Triggers>
                                        <DataTrigger TargetType="Label" Binding="{Binding IsCurrent}" Value="true">
                                            <Setter Property="TextColor" Value="{StaticResource PrimaryDark}" />
                                            <Setter Property="FontAttributes" Value="Bold" />
                                        </DataTrigger>
                                    </Label.Triggers>
                                </Label>
                                <Label IsVisible="{Binding HasMultiple}" Text="{Binding UserName}" Style="{StaticResource AppListItemDetailTextStyle}" LineBreakMode="MiddleTruncation" HorizontalTextAlignment="Start" VerticalTextAlignment="Center">
                                </Label>
                            </StackLayout>
                            <iconize:IconImage Grid.Column="2" IsVisible="{Binding IsCurrent}" HorizontalOptions="End" VerticalOptions="Center" IconSize="24" IconColor="{StaticResource PrimaryDark}" Icon="md-check-circle">
                            </iconize:IconImage>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button Grid.Row="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" CornerRadius="0" Margin="0" BackgroundColor="White" x:Name="DoneButton" Text="Close" TextColor="{StaticResource PrimaryDark}" />
    </Grid>
</t:SlidePopupView>

Any ideas ? I saw that some recent commits are about a bug of listview on Android ; maybe it's related/similar for iOS, @jessejiang0214 @rid00z ?

Thanks for your help

NinoStella commented 5 years ago

I'm having a similar issue. I have probably problably catched the cause and it is related to labels only. It seems that labels without WidthRequest property set are not rendered.