Проблема Xamarin Forms Cross Platform с видимостью StackLayout в ListView

Question

У меня есть кроссплатформенный проект Xamarin Forms с ListView, ViewCell которого содержит StackLayout. Я скрываю и показываю StackLayout, когда пользователь нажимает на изображение. Существует известная проблема с неправильным изменением размера ViewCell на iOS, и я обнаружил, что решение было использовать метод ForceUpdateSize на ViewCell, чтобы приложение на iOS изменило размер ячейки. Это работает с точки зрения изменения размера ViewCell - однако после вызова метода я теряю три кнопки в нижней части ViewCell. Кнопки расположены в виде сетки, и весь код, xaml и снимки экрана приведены ниже. Любая помощь в решении этой проблемы будет принята с благодарностью.

Страница XAML:

                        <ViewCell x:Name="vcDetails" >
                        <StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="Start">
                            <BoxView x:Name="bvLine" VerticalOptions="Center" BackgroundColor="Black" 
                                                                 HorizontalOptions="FillAndExpand" HeightRequest="4" />
                            <StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="Start">
                                <!-- Info Button and title-->
                                <StackLayout x:Name="slPlaceName" HorizontalOptions="Fill" VerticalOptions="Start" Orientation="Horizontal" Margin="0,0,0,0">
                                    <Image x:Name="btnDropDown" HorizontalOptions="Start" VerticalOptions="Center" Source="circledropdown.png" Margin="0,4,4,0" IsVisible="{Binding ShowDropDown}"/>
                                    <Image x:Name="btnDropUp" HorizontalOptions="Start" VerticalOptions="Center" Source="circledropup.png" Margin="0,4,4,0" IsVisible="{Binding ShowDropUp}"/>
                                    <Label x:Name="lblPlaceName" TextColor="Gray" FontAttributes="Bold" Text="{Binding Title}" FontSize="Medium" Margin="0,0,0,0" VerticalOptions="Center" 
                                                                       HorizontalOptions="FillAndExpand" />
                                    <StackLayout.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="btnDetails_Clicked" CommandParameter="{Binding ID}"/>
                                    </StackLayout.GestureRecognizers>
                                </StackLayout>
                                <StackLayout x:Name="slDetails" Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="StartAndExpand" Margin="8,4,8,4"
                                                                         IsVisible="{Binding ShowDetails}" BackgroundColor="LightGray">
                                    <BoxView VerticalOptions="Start" HorizontalOptions="Fill" BackgroundColor="DarkCyan" HeightRequest="2" Margin="0,0,0,0" />
                                    <Label x:Name="lblStreetAddress" VerticalOptions="Start" HorizontalOptions="Start" HorizontalTextAlignment="Start"  
                                                                           TextColor="Black" FontSize="Small" Text="{Binding AddressLine1}" />
                                    <Label x:Name="lblCityStateZip" VerticalOptions="Start" HorizontalOptions="Start" HorizontalTextAlignment="Start" TextColor="Black" FontSize="Small" 
                                                                           Text="{Binding CityStateZip}" />
                                    <Label x:Name="lblHours" VerticalOptions="Start" HorizontalOptions="Start" TextColor="Black" FontSize="Small" Text="{Binding Hours}" HorizontalTextAlignment="Center" />

                                    <Grid x:Name="gvDetailButtons" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="8,4,8,4">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="auto" />
                                            <RowDefinition Height="auto" />
                                        </Grid.RowDefinitions>
                                        <StackLayout x:Name="btnGoToInfoPage" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="8,0,4,0"
                                                                                 Grid.Column="0" Grid.Row="0" BackgroundColor="DarkGray" Padding="0,2,0,2">
                                            <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
                                                <Image x:Name="btnInfo" HorizontalOptions="Start" VerticalOptions="CenterAndExpand" Source="infosmall.png" Margin="0,0,4,0" />
                                                <Label x:Name="lblbntInfo" Text="{ext:Translate MoreInfo}" TextColor="Black" FontAttributes="Bold"
                                                                                   HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Small"/>
                                            </StackLayout>
                                            <StackLayout.GestureRecognizers>
                                                <TapGestureRecognizer Tapped="btnGoToInfoPage" CommandParameter="{Binding ID}"/>
                                            </StackLayout.GestureRecognizers>
                                        </StackLayout>

                                        <StackLayout x:Name="slGoToEditPage" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="4,0,8,0"
                                                                                 Grid.Column="1" Grid.Row="0" BackgroundColor="DarkGray" Padding="0,2,0,2">
                                            <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
                                                <Image x:Name="btnedit" Source="editsmall.png" Margin="8,0,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                                <Label x:Name="lblbntEdit" Text="{ext:Translate Edit}" TextColor="Black" FontAttributes="Bold" 
                                                                                   HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Small"/>
                                            </StackLayout>
                                            <StackLayout.GestureRecognizers>
                                                <TapGestureRecognizer Tapped="btnedit_Tapped" CommandParameter="{Binding ID}"/>
                                            </StackLayout.GestureRecognizers>
                                        </StackLayout>
                                    </Grid>
                                    <BoxView VerticalOptions="Start" HorizontalOptions="Fill" BackgroundColor="DarkCyan" HeightRequest="2" Margin="0,0,0,0" 
                                                                             Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="1"/>
                                </StackLayout>
                                <StackLayout x:Name="slRatingandDistance" Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="StartAndExpand">
                                    <Label x:Name="lblRatingHeader" Text="{ext:Translate RatingText}" TextColor="Black" FontSize="Small" FontAttributes="Bold"
                                                                   Margin="4,0,0,0" HorizontalOptions="Start" VerticalOptions="Center"/>
                                    <Label x:Name="lblRatingValue" Text="{Binding Rating}"  TextColor="Black" FontSize="Small"
                                                                   HorizontalOptions="Start" VerticalOptions="Center"/>
                                    <Label x:Name="lblDistanceHeader" Text="{ext:Translate DistanceText}"  TextColor="Black" FontSize="Small" FontAttributes="Bold"
                                                                   Margin="4,0,0,0" HorizontalOptions="Start" VerticalOptions="Center"/>
                                    <Label x:Name="lblDistanceValue" Text="{Binding Distance}" TextColor="Black" FontSize="Small"
                                                                   HorizontalOptions="Start" VerticalOptions="Center" />
                                </StackLayout>
                                <Label x:Name="lblAttributes" Text="{Binding AttributesTexts}" 
                                                                       TextColor="Black" FontSize="Small" LineBreakMode="WordWrap" Margin="0,0,0,0" HorizontalOptions="Start" 
                                                                       VerticalOptions="Start"/>
                            </StackLayout>
                            <Grid x:Name="gvButtons" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="4,4,4,4">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <StackLayout x:Name="btnRate" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray" 
                                                                         Margin="2,0,2,0" Grid.Column="0" Padding="0,2,0,2">
                                    <StackLayout x:Name="slLayoutRate" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                                        <Image x:Name="imgRate" Source="smallstar.png" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,4,0" />
                                        <Label x:Name="lblRate" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="{ext:Translate Rate}" 
                                                                    TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
                                    </StackLayout>
                                    <StackLayout.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="btnRate_Clicked"  CommandParameter="{Binding ID}"/>
                                    </StackLayout.GestureRecognizers>
                                </StackLayout>

                                <StackLayout x:Name="btnMap" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray" 
                                                                         Margin="2,0,2,0" Grid.Column="1" Padding="0,2,0,2">
                                    <StackLayout x:Name="slLayoutMap" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                                        <Image x:Name="imgMap" Source="mapblue.png" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,4,0" />
                                        <Label x:Name="lblMap" HorizontalOptions="Center" VerticalOptions="Center" Text="{ext:Translate Map}" 
                                                                    TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
                                    </StackLayout>
                                    <StackLayout.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="btnMap_Clicked" CommandParameter="{Binding ID}"/>
                                    </StackLayout.GestureRecognizers>
                                </StackLayout>

                                <StackLayout x:Name="btnClosed" Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="DarkGray" 
                                                                         Margin="2,0,2,0" Grid.Column="2" Padding="0,2,0,2">
                                    <StackLayout x:Name="slLayoutClosed" Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                                        <Image x:Name="imgClosed" Source="closed.png" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Margin="0,0,4,0" />
                                        <Label x:Name="lblClosed" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{ext:Translate Closed}" 
                                                                    TextColor="Black" FontAttributes="Bold" FontSize="Small" Margin="0,0,0,0" />
                                    </StackLayout>
                                    <StackLayout.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="btnClosed_Clicked" CommandParameter="{Binding ID}"/>
                                    </StackLayout.GestureRecognizers>
                                </StackLayout>
                            </Grid>
                        </StackLayout>
                    </ViewCell>

Код скрывает / показывает макет стека.

private void btnDetails_Clicked(object sender, EventArgs e)
{
    long ll_PlaceID = -1;
    try
    {
        ll_PlaceID = Convert.ToInt64(((TappedEventArgs)e).Parameter);
        ViewModelObjects.NearbyPlaces.ShowDetailText(ll_PlaceID);

        if (Device.RuntimePlatform == Device.iOS)
        {
            ((ViewCell)((Element)sender).Parent.Parent.Parent).ForceUpdateSize();
        }
    }
    catch (Exception ex)
    {
        App.ProcessException(ex);
    }

}

Показать подробности кода из View Model

public void ShowDetailText(long pl_PlaceID)
{
    GBSPlaceDetail lobj_Place = null;
    try
    {
        lobj_Place = (GBSPlaceDetail)(from lobj_Work in GBSPlaceDetails
                                      where lobj_Work.ID == pl_PlaceID
                                      select lobj_Work).ToList()[0];

        if (lobj_Place != null)
            lobj_Place.ShowDetails = !lobj_Place.ShowDetails;
    }
    catch (Exception ex)
    {
        App.ProcessException(ex);
    }
}

Любые предложения будут с благодарностью.

Answer 1

Никто на самом деле не ответил на мой пост, поэтому я начал искать другие элементы управления для использования. Я обнаружил, что SyncFusion также имеет элемент управления ListView. Казалось, это довольно простое добавление для элемента управления Xamarin Forms ListView (добавьте необходимое пространство имен и добавьте префикс всех элементов управления к пространству имен SyncFusion ListView). В iOS вам все еще нужно было вызывать дополнительный код, когда размер элемента списка увеличился, но код SyncFusion, кажется, работает чище, чем код Xamarin, поскольку проблема не проявлялась при использовании SyncFusion ListViewcontrol.

Вот код, который мне пришлось включить в код для страницы моего проекта PCL. (lvPlaces - это имя моего элемента управления ListView в XAML)

if (Device.RuntimePlatform == Device.iOS)
{
    lvPlaces.ForceUpdateItemSize();

}