I have Xamarin Forms Cross Platform project with a ListView whose ViewCell contains a StackLayout. I hide and show the StackLayout when the user clicks on an image. There is a known issue with the ViewCell not resizing correctly on iOS and solution I found was to use ForceUpdateSize method on the ViewCell in order to for the app on iOS to resize the cell. This is working from the aspect of resizing the ViewCell - however after calling the method, I loose the three buttons at the bottom of ViewCell. The buttons are in a grid and all the code, xaml and screen shots are below. Any help with resolving this would be greatly appreciated.
Page 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>
Code the hides/shows the stack layout.
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);
}
}
Show Details code from the 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);
}
}
Any suggestions would be greatly appreciated.
