Bug 57687 - Android: Labels truncated after returning from navigated page (Triggers related)
Summary: Android: Labels truncated after returning from navigated page (Triggers related)
Status: RESOLVED NOT_REPRODUCIBLE
Alias: None
Product: Forms
Classification: Xamarin
Component: Android ()
Version: 2.3.4
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Jimmy [MSFT]
URL:
Depends on:
Blocks:
 
Reported: 2017-06-22 13:21 UTC by Philipp Sumi
Modified: 2017-11-29 19:03 UTC (History)
4 users (show)

Tags: android label
Is this bug a regression?: ---
Last known good build:


Attachments
No truncation of the label (correct) (84.99 KB, image/png)
2017-06-22 13:21 UTC, Philipp Sumi
Details
Truncated label (buggy) (86.61 KB, image/png)
2017-06-22 13:22 UTC, Philipp Sumi
Details
More randomness (92.87 KB, image/png)
2017-06-28 14:45 UTC, Philipp Sumi
Details
Totall unrelated screenshot (691.61 KB, image/png)
2017-06-28 15:36 UTC, Philipp Sumi
Details
sample project (46.41 KB, application/x-zip-compressed)
2017-07-11 20:46 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 NOT_REPRODUCIBLE

Description Philipp Sumi 2017-06-22 13:21:47 UTC
Created attachment 23056 [details]
No truncation of the label (correct)

I have another weird Label rendering bug - see attached screenshots.

* The first screen shows the label with a placeholder text as it should be. The label (with the yellow background) expands to the full size.

* The second screen shows the label after having navigated to another page and returning. The label still expands to the full available with, but the text is truncated in the middle for no reason.

This is the full XAML. This seems to be related to either the visible flag being set, or the triggers by themselves. If I remove the trigger and make the placeholder permanently visible, it renders fine.



Here's the full XAML:


<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
             x:Class="Ridr.Client.Controls.IconCommandLabel">
  <ContentView.Content>
      <Grid x:Name="LayoutRoot">
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>

          <iconize:IconLabel Text="{Binding IconKey}"
                             IsVisible="{Binding IconKey, Converter={StaticResource StringToBoolConverter}}"
                             VerticalTextAlignment="Center"
                             HorizontalTextAlignment="Center"
                             WidthRequest="{DynamicResource IconColumnWidth}"
                             Margin="0,2,0,2"
                             Grid.Column="0" />


          <!-- render but hide a proxied control (if there is one) behind the label area. Surprisingly, controls can be "focused" even with an invisible parent. -->
          <ContentView x:Name="ProxiedViewContainer"
                         InputTransparent="True"
                         HorizontalOptions="Center"
                         VerticalOptions="Center"
                         Grid.Column="1"
                         WidthRequest="1"
                         HeightRequest="1"
                         Opacity="0"
                         Padding="0" />

          <!-- input transparent column so taps are being registered by the control -->
          <ContentView BackgroundColor="{StaticResource EditorBackgroundColor}"
                       InputTransparent="True"
                       Grid.Column="1">

              <Grid Padding="{DynamicResource SmallPadding}">
                  <Label x:Name="Value"
                         Text="{Binding Text}"
                         HorizontalOptions="FillAndExpand"
                         LineBreakMode="TailTruncation"
                         VerticalTextAlignment="Center">
                      <Label.Triggers>
                          <DataTrigger TargetType="Label"
                                       Binding="{Binding Text}"
                                       Value="">
                              <Setter Property="IsVisible"
                                      Value="False" />
                          </DataTrigger>
                      </Label.Triggers>
                  </Label>

                  <Label Text="{Binding Placeholder}"
                         HorizontalOptions="FillAndExpand"
                         LineBreakMode="TailTruncation"
                         VerticalTextAlignment="Center"
                         IsVisible="True">
                      <Label.Triggers>
                          <DataTrigger TargetType="Label"
                                       Binding="{Binding Text}"
                                       Value="">
                              <Setter Property="IsVisible"
                                      Value="True" />
                          </DataTrigger>
                      </Label.Triggers>
                  </Label>

                  <iconize:IconLabel x:Name="ErrorIcon"
                                     IsVisible="{Binding IsValid, Converter={StaticResource BoolInversionConverter}}"
                                     Text="fa-exclamation-circle"
                                     FontSize="{StaticResource EntryTextFontSize}"
                                     TextColor="{StaticResource ErrorColor}"
                                     VerticalTextAlignment="Center"
                                     HorizontalTextAlignment="End"
                                     Margin="{StaticResource SmallSpacingRight}" />
              </Grid>
          </ContentView>
      </Grid>
    </ContentView.Content>
</ContentView>
Comment 1 Philipp Sumi 2017-06-22 13:22:16 UTC
Created attachment 23057 [details]
Truncated label (buggy)
Comment 2 Philipp Sumi 2017-06-22 13:50:55 UTC
Ok, I think I found the bug.

- First of all, it's only on Android, iOS is fine.
- It's not the trigger alone. I tried it with a binding and a converter, but the result is the same.
- I noticed that the truncation seems to happening at the position of the third row. This is indeed rendered within a grid:

<controls:IconCommandLabel IconKey="fa-circle-o"
                            Text="xxx"
                            Placeholder="xxx"
                            Grid.Column="0"
                            Grid.Row="0"
                            Grid.ColumnSpan="2" />


And this is the grid's columns:

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="8*" />
                            <ColumnDefinition Width="6*" />
                        </Grid.ColumnDefinitions>



I then tried to changed the column width from 8* to 4* and left the second column at 6*, so truncation would happen earlier. This actually didn't move the position the label was truncated, but fixed the issue, don't ask me why.

4*/3* - that's the same ration as originally. Same bug.
9*/6*, 10*/6* - the truncation still is at the same place, so it's not synced with the first column width and the "fix" was a red herring?
10*/2* - Fixes the issue.

I don't think I understand that pattern ;)
Comment 3 Jimmy [MSFT] 2017-06-23 17:50:50 UTC
Hey Philipp, could you attach a repro project to the report? I put together the code you provided in a new project as best I could but I am not seeing the issue. Thanks!
Comment 4 Philipp Sumi 2017-06-28 14:06:10 UTC
Hi Jimmy

Sorry, I just went for a shorter string. I'm not sure what I could give you beyond that report if you can't repro this. If you want, you can send me a copy of your repro project and I can compare it to what I have.
Comment 5 Philipp Sumi 2017-06-28 14:45:27 UTC
Created attachment 23176 [details]
More randomness

Don't ask me why - here's another rendering screwup when coming back from the pushed page. Now it's the second watermark and both the text buttons :(
Comment 6 Philipp Sumi 2017-06-28 15:21:34 UTC
FYI: Resolved this with a nested grids. The outer grid doesn't have columns, so now column span anymore. For the row with two columns, I just used a second grid with a single row and two columns:

<Grid>
  <StuffOnRow1>
  <StuffOnRow2>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="8*" />
      <ColumnDefinition Width="6*" />
    </Grid.ColumnDefinitions>
  </Grid>
  <StuffOnRow4 />
</Grid>


Side note: When popping the pushed page, labels also tend to lose their alignments if only text alignments are set. That's a bug that has been lurking around for months (or since ever) too. Setting HorizontalOptions/VerticalOptions, while not recommended from a performance point of view is pretty much the only way I found to prevent random rendering issues across the app:


<Label Text="{Binding Foo}"
     IsVisible="{Binding Bar}"
     VerticalTextAlignment="Center"
     VerticalOptions="Center"
     HorizontalTextAlignment="Center"
     HorizontalOptions="Center" />
Comment 7 Philipp Sumi 2017-06-28 15:30:55 UTC
(the label alignment issue can also be observed in the screenshots - the icons are all labels with icons fonsts. when you compare the two buggy screens with the correct one, you can see that the labels have reset their positions to top/left rather than center/center when returning to the page. Setting VerticalOptions/HorizontalOptions as well fixed that.
Comment 8 Philipp Sumi 2017-06-28 15:36:08 UTC
Created attachment 23178 [details]
Totall unrelated screenshot

Ok, this is unrelated, but sort of awesome. What the hell did you guys do to my Home icon??? ;)
Comment 9 Jimmy [MSFT] 2017-07-11 20:46:47 UTC
Created attachment 23481 [details]
sample project

Hey Philipp, it sounds like you were able to workaround this, however I'd still like to get this issue looked at. I still can't reproduce the issue, so I'm attaching the project I've been using. If you are able to take a look at the project and make it reproduce the issue that would super helpful. Thank you!
Comment 10 Philipp Sumi 2017-07-11 22:19:06 UTC
Jimmy,

I tried to repro with your sample, but to no avail. I added bindings, activated the triggers, put it into carousel, toggled visibility - and it still works just fine :). I also went back to 2.3.4.247 (I'm not on 2.3.5 yet), but it's still working.

There is a layout bug lurking somewhere, but it seems to be super rare. Maybe the dev(s) who wrote the actual XF or Android label could pinpoint it looking at the screenshots? Alternatively, I could give you guys access to my repo and you could access the sources directly, but beyond that, I wouldn't know what to do. Sorry!
Comment 11 Paul DiPietro [MSFT] 2017-11-29 18:40:31 UTC
Marking this as not reproducible for the time being per the above comments. If this still occurs as of the latest 2.5.0 build of Forms and can be reproduced in a project, please do reopen this with that project attached. Considering the number of fixes between 2.3.4 and 2.5, the issue may have been resolved in that time.
Comment 12 Philipp Sumi 2017-11-29 19:03:36 UTC
That's fine, I hacked aroudn the issue. FYI: David Ortinau currently has my sources, to look at another layout issue when returning from (popping a) pushed view.