Bug 36097 - Images Are Not Rendered When Inside A Layout Used In A DataTemplate
Summary: Images Are Not Rendered When Inside A Layout Used In A DataTemplate
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: Windows ()
Version: 2.0.0
Hardware: PC Windows
: --- normal
Target Milestone: ---
Assignee: Bugzilla
URL:
: 36754 41395 ()
Depends on:
Blocks:
 
Reported: 2015-11-20 09:19 UTC by Guillaume Pugnet
Modified: 2017-07-21 22:47 UTC (History)
21 users (show)

Tags: ac
Is this bug a regression?: Yes
Last known good build: 1.5.2.6469-pre1


Attachments
repro project (21.89 KB, application/zip)
2016-02-02 23:23 UTC, Jimmy [MSFT]
Details
UWP/WinRT repro w/ ContentView (406.79 KB, application/zip)
2016-03-03 00:20 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 Guillaume Pugnet 2015-11-20 09:19:48 UTC
Image defined in ListView DataTemplate are not rendered on Windows 8.1 and UWP.
Resizing the application (invalidating the layout ) makes the image render.

The same code works on iOS and worked on all platforms with Xamarin.Forms v1.5.2
Comment 1 Rui Marinho 2015-12-15 19:55:11 UTC
What version are you trying ?
Comment 2 E.Z. Hart [MSFT] 2015-12-18 23:00:25 UTC
Thank you for taking the time to submit the bug. We tried to reproduce the issue you reported but were unable given the description. If you could please attach a reproduction to the bug by starting with a clean Xamarin.Forms project and adding just the code necessary to demonstrate the issue we would very much appreciate it.

Warm regards,
Xamarin Forms Team
Comment 3 Jimmy [MSFT] 2016-02-02 23:23:32 UTC
Created attachment 14858 [details]
repro project

I’m attaching a sample project that reproduces the issue. In the repro project, it seems that the issue is caused by having a Cell with a Grid whose column or row definitions are all set to ‘*’.

Giving the row/column an explicit size does not fix the issue. However, if you set at least one of the column/row definitions to “auto” then the images will render as expected.


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


### Expected Results
The ListView’s rows should display two images even spaced out horizontally.

In the repro project, change one of the column definitions to “auto” to see the expected result. You can also resize the app window and the image will get rendered.


### Actual Results
None of the images are rendered.


### Tested Versions
The issue is reproducible with Forms 2.0.1 and 2.1-pre3
Comment 4 Jimmy [MSFT] 2016-02-02 23:26:37 UTC
Marking as CONFIRMED due to info in comment #3
Comment 6 Jimmy [MSFT] 2016-03-03 00:20:20 UTC
Created attachment 15231 [details]
UWP/WinRT repro w/ ContentView

After some more investigation, the issue seems to occur with images inside any layout when used as a DataTemplate. When the page first gets loaded, sometimes none of the images get rendered and other times only a few random ones do. But all the images will appear after the window size changes or, on the phone, the page is navigated away from and back to.

I’m attaching another sample project that demonstrates the issue on both UWP and WinRT. In this project, the image is inside a ContentView instead of Grid. But I’ve reproduced the issue using a StackLayout as well. The issue still occurs with the Forms 2.1 stable release.

There is a workaround in comment #3 that applies when using a Grid, but I've seen one unconfirmed report that it did not resolve the issue.


### Regression Status
I can confirm that version 1.5.2.6469-pre1 is the last version where the issue does not occur.
Comment 7 Codey Jenkins 2016-03-11 15:03:43 UTC
I have also confirmed this issue using an Absolute Layout and StackLayout. If my images are placed as direct children of the first view, all images appear. If they are nested inside other views then I get the randomness as well. Changing padding made some differences, but could only get all but the first element to show in the list.
Comment 8 Codey Jenkins 2016-03-11 17:21:45 UTC
Changing the Vertical/Horizontal Options produce different images appearing in the list. Here are two different Views inside DataTemplates that are producing similar results:

<Grid Padding="10" 
      VerticalOptions="FillAndExpand" 
      HorizontalOptions="FillAndExpand">
  <Image Grid.Column="0" Aspect="AspectFit"
            BackgroundColor="White"
          HeightRequest="{Binding ImageWidth}"
          WidthRequest="{Binding ImageWidth}"
            Source="{Binding ImageSource}"/>
    <Label Grid.Column="0" Text="&#xE002;"
            FontFamily="Segoe MDL2 Assets"
            HorizontalTextAlignment="End"
            VerticalTextAlignment="Start"
            HorizontalOptions="EndAndExpand"
            VerticalOptions="StartAndExpand"
            IsVisible="{Binding CheckedEnabled}"
            FontSize="Medium"
            Style="{StaticResource SecondaryLabel}"/>
    <Label Grid.Column="0" Text="&#xE001;"
            FontFamily="Segoe MDL2 Assets"
            IsVisible="{Binding Checked}"
            HorizontalTextAlignment="End"
            VerticalTextAlignment="Start"
            HorizontalOptions="EndAndExpand"
            VerticalOptions="StartAndExpand"
            FontSize="Medium"
            Style="{StaticResource SecondaryAccentLabel}"/>
</Grid>

And an absolute view:

<AbsoluteLayout Padding="15" 
                WidthRequest="{x:Static sirutilities:DeviceSizer.WidthSmall}" 
                HeightRequest="{x:Static sirutilities:DeviceSizer.HeightMedium}"
                BackgroundColor="Yellow">
    <Image Aspect="AspectFit"
            BackgroundColor="White"
            Source="{Binding ImageSource}"
            AbsoluteLayout.LayoutFlags="All"
            AbsoluteLayout.LayoutBounds="0,0,1,1"/>
    <Label Text="&#xE002;"
            FontFamily="Segoe MDL2 Assets"
            IsVisible="{Binding CheckedEnabled}"
            FontSize="Medium"
            Style="{StaticResource SecondaryLabel}"
            AbsoluteLayout.LayoutFlags="All"
            AbsoluteLayout.LayoutBounds="1,.1,.2,.2"/>
    <Label Text="&#xE001;"
            FontFamily="Segoe MDL2 Assets"
            IsVisible="{Binding Checked}"
            FontSize="Medium"
            Style="{StaticResource SecondaryAccentLabel}"
            AbsoluteLayout.LayoutFlags="All"
            AbsoluteLayout.LayoutBounds="1,.1,.2,.2"/>
  </AbsoluteLayout>
Comment 9 Samantha Houts [MSFT] 2016-04-13 19:41:40 UTC
*** Bug 36754 has been marked as a duplicate of this bug. ***
Comment 10 François M 2016-04-19 11:54:13 UTC
Hi,

I encounter the same issue on UWP with a data template whose view is an absolute layout. Either I see no images or only on a few random rows.

Is there an eta for the solution?
Thank you.

François.
Comment 11 FieldstrikeMobile 2016-04-20 14:04:03 UTC
I am also seeing this bug in my project
Comment 12 John Hardman 2016-05-20 11:11:01 UTC
I am also getting this problem on both UWP and WinRT 8.1 using XF 2.2.0.31

My images are in a grid already. Setting one of the columns to Auto does not fix it for me.

A screenshot of what I am seeing can be found on the thread at https://forums.xamarin.com/discussion/65313/no-images-in-a-grid-inside-a-listview-on-windows-phone
Comment 13 François M 2016-05-23 09:23:55 UTC
Any update on that issue? Any solution or workaround?
Comment 14 Paul DiPietro [MSFT] 2016-05-31 16:46:34 UTC
*** Bug 41395 has been marked as a duplicate of this bug. ***
Comment 15 MarcinL 2016-06-23 15:15:12 UTC
Any plans on fixing this one?
Comment 16 Samantha Houts [MSFT] 2016-09-20 23:28:36 UTC
Thank you for taking the time to submit this report. After reviewing the description of this bug, we believe it no longer affects the current version of Xamarin.Forms as of 2.2.0. If you are still experiencing the issue after updating your packages, please reopen this report with an attached reproduction. 

For your convenience, we have created some reproduction best practices viewable here: https://gist.github.com/jassmith/92405c300e54a01dcc6d  

Warm regards, 
Xamarin Forms Team
Comment 17 John Hardman 2016-09-21 18:08:50 UTC
It's still a problem in XF 2.3.2.127 

I don't understand how a bug as fundamental as this can be marked RESOLVED FIXED, when there is no indication that any Xamarin.Forms code has been changed to fix it. There are no source-code check-ins mentioned above, not any comments from a Xamarin developer saying they have done anything.

There are a couple of repro projects already associated with this bug. Note however, that in my experience there is no obvious pattern as to when the problem exhibits itself - you might need to run the repro projects more than once to see the problem.
Comment 18 John Hardman 2016-09-21 18:10:06 UTC
I don't seem to be able to re-open this bug. Can anybody else do it?
Comment 19 Samantha Houts [MSFT] 2016-09-21 18:17:42 UTC
I ran both repro projects with version 2.1.0, and I saw the issue consistently. When I updated the projects to 2.3.3-pre2, I did not see the issue. I backed the version down to 2.2.0.45, and it continued to function as expected in both UWP and WinRT.

Can you provide more details? Are you experiencing this issue on a phone, tablet, or your local machine?
Comment 20 François M 2016-09-23 12:47:08 UTC
I still see the issue with 2.3.0.107
Comment 21 Paula 2016-09-28 11:15:52 UTC
The Issue still presents itself in 2.2.0.45 and above. Please what version can I use that this issue was fixed in?
Comment 22 Samantha Houts [MSFT] 2016-09-29 18:06:06 UTC
@John Hardman, @François M, @Paula:

I've taken the following test case:

https://gist.github.com/samhouts/f213069c2eaf08370b7ffc8e435df3c9

and tested it against our code base on our current version (2.3.3+), 2.2.0, 2.1.0, and 2.0.0. The test case includes two pages. The first contains a Grid with column widths set to *. The second contains an AbsoluteLayout.

With 2.0.0, the images do not appear on either tab until I have scrolled the list past the first page or resized the app. FAIL

With 2.1.0, all but the images in the first row appear until I have scrolled or resized. FAIL

With 2.2.0, all of the images appear. PASS

With 2.3.3+, all of the images appear. PASS

The test case was written based on the reproduction projects that were attached to this report, plus information gathered from the linked forum post and code samples in the comments of this report. 

Since I am unable to reproduce the issue with the code in the Gist or with the attached reproductions in later versions, there must be a separate factor that is the actual cause. Would it be possible for you to take a look at what might be different with your code to help me identify what factor is perpetuating the problem? It would be much appreciated.
Comment 23 John Hardman 2016-09-29 19:18:27 UTC
@Samantha Houts

Yes, I'll take another look and see what I can find. It might not be for a few days though.

@Paula @François M - Do you have a convenient repro sample that Samantha could look at in the meantime?
Comment 24 John Hardman 2016-10-03 16:53:01 UTC
@Samantha Houts - Yes, I am definitely still seeing this using XF 2.3.1.114

I don't have a simple repro sample currently - I am seeing this in my app code.

The long code sample associated with 44680 (with the tests for UWP in the bools at the top changed to false) demonstrates this problem, when the MyAppToggleImageButton object is used in ViewCells in a ListView.

I don't see the problem on Android or iOS, only Windows platforms (I am more concerned about UWP than WinRT 8.1).
Comment 25 John Hardman 2016-10-03 20:08:41 UTC
As per Codey Jenkins above, I can confirm this happens with AbsoluteLayout as well as Grid.

I can also confirm that changing HorizontalOptions and VerticalOptions makes a difference (I raised that as a separate bug before noticing it mentioned above).

I'll update my sample on 44680 to include the AbsoluteLayout code.
Comment 26 Paula 2016-10-03 20:36:42 UTC
@John and Every one else.
My utmost apologies, I have being committing a serious blunder. For UWP apps I did not check to make sure the "BUILD ACTION" was set to CONTENT as the link below specified 
https://developer.xamarin.com/guides/xamarin-forms/working-with/images/

John sorry for the inconvenience again. Everyone please check your build action by double-clicking on the image in visual studio and checking the "PROPERTIES" tab and making sure the build action is set to CONTENT
Comment 27 François M 2016-10-18 06:47:23 UTC
Hi,

I have the problem with images I download (through azure files sdk) so it's not related to "build action" (at least in my case).

The images within the first two rows (which are the only that can be sen without scrolling) don't show. If I scroll down and up the image of the second row does appear but never the one of the first row. And the problem remains whatever the image source.
Comment 28 dengere 2016-11-01 15:50:31 UTC
@Paula
All are settled well but doesn't work. 
And also download from azure source doesn't work. (it is not build in source)
Comment 29 dpedrinha 2016-11-10 04:12:33 UTC
Wow, nice! Just a few days for this bug 1 year birthday!

Same problem here, and it's not even with images, a simple button won't show it's text.

It does only after any layout change.

Plus, when tapped, the button won't stop the event and trigger the ListView item click event too.

Using Forms 2.3.2.118 pre1 because last time I checked it's the latest stable version (since the newer "stable" ones won't even compile any project).
Comment 30 Samantha Houts [MSFT] 2016-11-18 18:44:06 UTC
@dpedrinha@gmail.com:

It seems like you may be experiencing a different issue. Do you have a reproduction project you can share to help us diagnose the problem?
Comment 31 sudeep 2016-11-23 23:06:33 UTC
I have been facing this issue since last year and I had to lot of tweaks and let go of my initial idea of using listview/gridview.
For anyone who wants to reproduce this issue with latest Xamarin Forms version, I have a viewcell code. Use it as datatemplate with custom data of yours with grouping enabled and see for yourselves, Images are not rendered until a window resize is done for UWP.

public class CustomCell : ViewCell
    {
        public CustomCell()
        {
            //instantiate each of our views
            var cellWrapper = new StackLayout();
            var horizontalLayout = new StackLayout();
            var logo = new Image();
            var left = new Label();
            var right = new Label();

            //set bindings
            logo.Aspect=Aspect.AspectFit;
            logo.HeightRequest = 30;
            logo.WidthRequest = 30;
            logo.SetBinding(Image.SourceProperty, "LogoImage");
            left.SetBinding(Label.TextProperty, "StartTime");
            right.SetBinding(Label.TextProperty, "Subject");
            

            //Set properties for desired design
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            horizontalLayout.Spacing = 50;
            right.HorizontalTextAlignment = TextAlignment.Start;
            left.TextColor = Color.Black;
            right.TextColor = Color.Black;

            //add views to the view hierarchy
            horizontalLayout.Children.Add(logo);
            horizontalLayout.Children.Add(left);
            horizontalLayout.Children.Add(right);
            cellWrapper.Children.Add(horizontalLayout);
            Height = 30;
            View = cellWrapper;
        }
    }
Comment 32 sudeep 2016-11-23 23:07:30 UTC
I have been facing this issue since last year and I had to lot of tweaks and let go of my initial idea of using listview/gridview.
For anyone who wants to reproduce this issue with latest Xamarin Forms version, I have a viewcell code. Use it as datatemplate with custom data of yours with grouping enabled and see for yourselves, Images are not rendered until a window resize is done for UWP.

public class CustomCell : ViewCell
    {
        public CustomCell()
        {
            //instantiate each of our views
            var cellWrapper = new StackLayout();
            var horizontalLayout = new StackLayout();
            var logo = new Image();
            var left = new Label();
            var right = new Label();

            //set bindings
            logo.Aspect=Aspect.AspectFit;
            logo.HeightRequest = 30;
            logo.WidthRequest = 30;
            logo.SetBinding(Image.SourceProperty, "LogoImage");
            left.SetBinding(Label.TextProperty, "StartTime");
            right.SetBinding(Label.TextProperty, "Subject");
            

            //Set properties for desired design
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            horizontalLayout.Spacing = 50;
            right.HorizontalTextAlignment = TextAlignment.Start;
            left.TextColor = Color.Black;
            right.TextColor = Color.Black;

            //add views to the view hierarchy
            horizontalLayout.Children.Add(logo);
            horizontalLayout.Children.Add(left);
            horizontalLayout.Children.Add(right);
            cellWrapper.Children.Add(horizontalLayout);
            Height = 30;
            View = cellWrapper;
        }
    }
Comment 33 sudeep 2016-11-23 23:16:44 UTC
Ahh.. Sorry folks, I didn't update my Forms version. I just rechecked and this issue does not exist in  2.3 Xam Forms.
Comment 34 dpedrinha 2016-11-24 16:06:47 UTC
Ok, Samantha, I filled a new bug then. I still think it's the same problem (bad rendering and event handling for core objects for Forms). 

Here's the link with a case project attached:
https://bugzilla.xamarin.com/show_bug.cgi?id=47701

Best

Daniel
Comment 35 Samantha Houts [MSFT] 2016-11-29 19:51:41 UTC
We've tracked down the code changes that fixed the original report:

https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.WinRT/ImageRenderer.cs#L53

Basically, the ImageRenderer now invalidates itself when it is done renderering asynchronously so that it can be redrawn properly. 

This was released with version 2.2.0, and it should resolve all cases where you are using the built-in ImageRenderer or a custom renderer that is inheriting from the ImageRenderer and not somehow invalidating this call.

In order to better diagnose this issue, can anyone who is still experiencing the problem after updating Xamarin.Forms to 2.2 or greater please confirm whether or not they are using a custom renderer to display the image?

Thank you.
Comment 36 Rui Marinho 2017-05-23 18:11:58 UTC
Thank you for your bug report. As we have not received the information requested, we cannot properly triage your bug and are marking it resolved.
Comment 37 Sahin Ozdemir 2017-07-21 09:41:09 UTC
also put it in the following bug:
https://bugzilla.xamarin.com/show_bug.cgi?id=40139

But I have a specific issue with images not showing up in listboxes.
---
it seems that with the pre6 version the ListViewSelectedItemBehavior command now fires twice in a row when you click on a listview item. This makes our app crash due to unexpected behavior.

Can this be fixed?
Comment 38 E.Z. Hart [MSFT] 2017-07-21 22:47:44 UTC
(In reply to Sahin Ozdemir from comment #37)
> also put it in the following bug:
> https://bugzilla.xamarin.com/show_bug.cgi?id=40139
> 
> But I have a specific issue with images not showing up in listboxes.
> ---
> it seems that with the pre6 version the ListViewSelectedItemBehavior command
> now fires twice in a row when you click on a listview item. This makes our
> app crash due to unexpected behavior.
> 
> Can this be fixed?

Sahin,

Please file a separate bug.