Bug 53988 - Row heights incorrect on iOS when using ControlTemplate inside cell
Summary: Row heights incorrect on iOS when using ControlTemplate inside cell
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: iOS ()
Version: 2.3.4
Hardware: PC Windows
: --- normal
Target Milestone: ---
Assignee: Jason Smith [MSFT]
URL: https://github.com/gentledepp/Xam.Dyn...
Depends on:
Blocks:
 
Reported: 2017-03-26 15:30 UTC by Alexander Marek
Modified: 2017-06-19 21:05 UTC (History)
5 users (show)

Tags: iOS ListView bug ControlTemplate rowheight
Is this bug a regression?: ---
Last known good build:


Attachments
screenshots for ios and uwp (android fails to start with the latest bits) (41.01 KB, application/x-zip-compressed)
2017-03-26 15:30 UTC, Alexander Marek
Details
repro project (294.44 KB, application/x-zip-compressed)
2017-03-27 17:48 UTC, Jimmy [MSFT]
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED FIXED

Description Alexander Marek 2017-03-26 15:30:18 UTC
Created attachment 20850 [details]
screenshots for ios and uwp (android fails to start with the latest bits)

We actually knew this bug since Xamarin.Forms 2.3.x but hoped that it would be fixed in one of the upcoming prereleases, but in 2.3.4.214-pre5 the issue still exists.

I created a public github repo (which has Xamarin.Forms as submodule as I could not have debugged it otherwise)
https://github.com/gentledepp/Xam.Dynamic.Rowheights


When you run it on Android or UWP, you get a list, where the second item ("Checkbox") is considerably higher and shows the subviews "a", "b" and "c"

On iOS, however, this view is cut off and you cannot se "a", "b" or "c"

Have a look at the attached screenshots.

Any workarounds would be greatly appreciated!
Comment 1 Alexander Marek 2017-03-26 15:45:59 UTC
The culprit for the wrong rowheight seems to be the fact that we're using a controltemplate for all the QuestionViewCells.

To get (at least the rowheight) correctly, you need:
* to change QuestionCheckboxViewCell.xaml to **not** inherit from QuestionViewCellBase but from ViewCell - so no more control templates involved
Comment 2 Alexander Marek 2017-03-26 16:01:19 UTC
so for example, to get the QuestionCheckboxViewCell to be rendered correctly,
copy the contents of the controltemplate from QuestionViewCellBase.xaml to QuestionCheckboxViewCell.xaml and do not inherit from QuestionViewCellBase anymore.

=> Change from:

<?xml version="1.0" encoding="utf-8" ?>
<cells1:QuestionViewCellBase x:Class="Xam.Dynamic.Rowheights.Controls.Cells.QuestionCheckboxViewCell"
                            xmlns="http://xamarin.com/schemas/2014/forms"
                            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:controls1="clr-namespace:Xam.Dynamic.Rowheights.Controls;assembly=Xam.Dynamic.Rowheights"
                            xmlns:viewModels="clr-namespace:Xam.Dynamic.Rowheights.ViewModels;assembly=Xam.Dynamic.Rowheights"
                            xmlns:cells1="clr-namespace:Xam.Dynamic.Rowheights.Controls.Cells;assembly=Xam.Dynamic.Rowheights"
                            mc:Ignorable="d"> 
    <controls1:CheckboxGroup x:Name="CheckboxGroup"
                            Margin="16,8"
                            ItemsSource="{Binding Children}">
        <controls1:CheckboxGroup.Variant>
            <Binding Path="FieldType"
                     Converter="{StaticResource AnswerFieldTypeToCheckboxVariantConverter}" />
        </controls1:CheckboxGroup.Variant>
        <controls1:CheckboxGroup.MultiselectEnabled>
            <Binding Path="FieldType"
                     Converter="{StaticResource AnswerFieldTypeToMultiselectEnabledConverter}" />
        </controls1:CheckboxGroup.MultiselectEnabled>
    </controls1:CheckboxGroup>
</cells1:QuestionViewCellBase>


to:


<?xml version="1.0" encoding="utf-8" ?>
<ViewCell x:Class="Xam.Dynamic.Rowheights.Controls.Cells.QuestionCheckboxViewCell"
                            xmlns="http://xamarin.com/schemas/2014/forms"
                            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:controls1="clr-namespace:Xam.Dynamic.Rowheights.Controls;assembly=Xam.Dynamic.Rowheights"
                            mc:Ignorable="d">

  <Grid HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <BoxView WidthRequest="6"
             VerticalOptions="FillAndExpand" />
    <Grid Grid.Column="1"
          HorizontalOptions="FillAndExpand"
          Style="{DynamicResource ListItemRootLayoutStyle}">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>
      <Label Style="{DynamicResource ListItemTextStyle}"
             Text="{Binding Title}" />

      <controls1:CheckboxGroup x:Name="CheckboxGroup"
                               Grid.Row="1"
                              Grid.Column="0"
                              Grid.ColumnSpan="3"
                               BackgroundColor="DimGray"
                              Margin="16,8"
                              ItemsSource="{Binding Children}">
        <controls1:CheckboxGroup.Variant>
          <Binding Path="FieldType"
                   Converter="{StaticResource AnswerFieldTypeToCheckboxVariantConverter}" />
        </controls1:CheckboxGroup.Variant>
        <controls1:CheckboxGroup.MultiselectEnabled>
          <Binding Path="FieldType"
                   Converter="{StaticResource AnswerFieldTypeToMultiselectEnabledConverter}" />
        </controls1:CheckboxGroup.MultiselectEnabled>
      </controls1:CheckboxGroup>
      
    </Grid>
    <BoxView Grid.Column="2"
             WidthRequest="8"
             VerticalOptions="FillAndExpand"/>
  </Grid>
</ViewCell>
Comment 3 Alexander Marek 2017-03-26 18:06:17 UTC
note to the repro stuff.
In order for Xamarin.Forms to build in the demo solution, you will have to manually remove the "nuget restore" step from the Xamarin.Forms.Platform.csproj

That causes the build to fail and since this project has no nuget package references it does not make sense anyway...
Comment 4 Jimmy [MSFT] 2017-03-27 17:48:36 UTC
Created attachment 20913 [details]
repro project

I was able to reproduce this issue with a sample project I created based on the project linked to in the description. As mentioned, this appears to occur when using a ControlTemplate within a ViewCell. I also tested with UWP and Android and this issue is only affecting iOS.

This is similar to the recent issues reported with row height on iOS and scrolling the cell off-screen than back causes it to be rendered correctly. However it may not be directly related because unlike bug #51536, this issue occurs even on Forms 2.3.3.180 and is still present in the latest 2.3.4 pre-release. I am confirming this report so the team can investigate further.


### Steps to Reproduce
1. Run the attached iOS project


### Expected Results
Each cell will have a Label and Entry visible.


### Actual Results
Only the Label is initially visible. Scrolling the cell off-screen and back will display the expected result.


### Version Test
2.3.5.73-nightly    BAD
2.3.4-pre6          BAD
2.3.4-pre5          BAD
2.3.3.193           BAD
2.3.3.180           BAD
Comment 5 Jason Smith [MSFT] 2017-06-19 21:05:48 UTC
Should be fixed in 2.3.6