Many ImageEx controls causing Windows.UI.Xaml.LayoutCycleException #1328

darshanrampatel · 2017-07-20T13:19:16Z

I have a ListView (containing around ~180 items) where the DataTemplate contains an ImageEx control:

<uwpcontrols:ImageEx
	Grid.Row="1"
	Grid.Column="0"
	Width="128"
	Height="128"
	HorizontalAlignment="Center"
	VerticalAlignment="Center"
	x:Phase="1"
	ImageExFailed="Image_ImageExFailed"
	Source="{x:Bind PictureURL_thumbnail, Mode=OneTime}" />

If I try and load these all at once, I get one of the below exceptions:

Exception Type:  System.Exception
Crashed Thread:  2

Application Specific Information:
Layout cycle detected.  Layout could not complete.
Layout cycle detected.  Layout could not complete.

Exception Type:  System.Exception
Crashed Thread:  3

Application Specific Information:
No installed components were detected.

Multiple animations in the same containing Storyboard cannot target the same property on a single element.

Changing the ImageEx control to a standard Image control doesn't cause this exception:

 <Image
	Grid.Row="1"
	Grid.Column="0"
	Width="128"
	Height="128"
	HorizontalAlignment="Center"
	VerticalAlignment="Center"
	x:Phase="1"
	ImageFailed="Image_ImageFailed"
	Source="{x:Bind PictureURL_thumbnail, Mode=OneTime}" />

Is there anything I can do to work around this apart from switching back to the Image control?

The text was updated successfully, but these errors were encountered:

Code-ScottLe · 2017-07-20T17:57:14Z

ListView will use virtualization on the item container (ItemsStackPanel to be exact), so it is definitely not loading up all 180+ items at the same time. Could you post a project that we can reproduce?

cc @hermitdave .

avknaidu · 2017-07-21T15:25:54Z

@Code-ScottLe @hermitdave @darshanrampatel My stack overflow app loads around 30 users per page and it has no issue. Maybe it is something related to number of ListViewItems? Can you try decreasing the loading count and see if it still crashes?

hermitdave · 2017-07-22T06:57:51Z

Can you post a repro?

darshanrampatel · 2017-07-22T11:17:27Z

Will try and get a repro together this weekend.

darshanrampatel · 2017-07-22T20:03:58Z

@hermitdave @Code-ScottLe @avknaidu

Repro solution

If you uncomment one of the below Image or ImageEx controls in MainPage.xaml, you should see the same behaviour as me:

<DataTemplate x:DataType="vm:Picture">
	<Grid>
		<TextBlock Text="{x:Bind ID}" />
		<!--<Image
			Width="128"
			Height="128"
			HorizontalAlignment="Center"
			VerticalAlignment="Center"
			x:Phase="1"
			ImageFailed="Image_ImageFailed"
			Source="{x:Bind URL}" />-->
		<!--<uwpcontrols:ImageEx
			Width="128"
			Height="128"
			HorizontalAlignment="Center"
			VerticalAlignment="Center"
			x:Phase="1"
			ImageExFailed="Image_ImageExFailed"
			Source="{x:Bind URL}" />-->
	</Grid>
</DataTemplate>

Code-ScottLe · 2017-07-23T02:12:16Z

Few things, your project above doesn't have enough stuffs (missing base Microsoft.Toolkit.Uwp and Microsoft.Toolkit.Uwp.UI).

And I can run your project no problem

hermitdave · 2017-07-23T08:02:12Z

@darshanrampatel how did you add a reference to the controls lib? Nuget is good because it automatically downloads dependencies

darshanrampatel · 2017-07-23T09:57:50Z

@Code-ScottLe Can you try this with the app maximised please?

darshanrampatel · 2017-07-23T09:59:16Z

@hermitdave I did use NuGet... Though I think I added the controls library only, not the main toolkit one. I have fixed this now.

Code-ScottLe · 2017-07-23T16:14:51Z

I only minimized this so I can show you how long it was running. Showing no problem at all.

darshanrampatel · 2017-07-24T09:22:15Z

@Code-ScottLe Hmm, I always get a crash instantly.

See this video: ImageExIssue.zip

Code-ScottLe · 2017-07-25T18:07:24Z

I can't playback your video for some reason. Make sure you have all of the packages. Even the Animation one. Some of the controls does use some of the animations from our own toolkit.

hermitdave · 2017-07-25T18:21:05Z

I'll take a look in a few minutes

hermitdave · 2017-07-25T19:42:48Z

I can't seem to reproduce the issue. I can maximize and restore back to original size without any issues.

hermitdave · 2017-07-25T19:46:34Z

@darshanrampatel can you please try and run the sample app (download from store) and see if you have the same issue ?
I use ImageEx extensively and whilst I haven't upgraded to 1.5.1, there have been no significant changes for a long time.

darshanrampatel · 2017-07-25T21:58:21Z

@hermitdave I can run the store app with no issue. I am also using ImageEx in my apps extensively and, just so it's clear, this is only an issue when many ImageEx controls on the same page are all being loaded at the same time.

Just to confirm, I am maximising the repro app before I press the refresh button so that the maximum number of ImageEx controls load at the same time.

I have tested this and I can load 120 ImageEx controls (I am changing the number of iterations here) but not 125.

How many ImageEx controls fit on your maximised screen at once?

hermitdave · 2017-07-26T07:07:35Z

@darshanrampatel my daily mail online app has around 400 imageex controls on channel pages. I have a simplified template to not include progress ring.

darshanrampatel · 2017-07-26T08:32:42Z

@hermitdave Interesting.

If I adjust the template to not include the progress ring in the repro app, I don't get any exceptions and can load 200+ controls at once.

Code-ScottLe · 2017-07-26T17:48:02Z

So if you don't have the progress ring, you can load more stuffs? That is a little bit odd.

hermitdave · 2017-07-26T17:57:49Z

@darshanrampatel progress ring itself has tons of animations and lots of those would imply UI thread load.

hermitdave · 2017-07-26T18:00:04Z

@Code-ScottLe not really.. Less stress on UI thread..

Code-ScottLe · 2017-07-26T18:02:19Z

@hermitdave But shouldn't the ListView would just virtualize the entire list? Unless all 200+ items are tiny enough to be displayed all at once.

hermitdave · 2017-07-26T18:35:26Z

@Code-ScottLe in this instance its a grid view and default virtualization would be 4 pages + current which mean lots of images in this instance.. 128x128

Code-ScottLe · 2017-07-26T19:16:21Z

@hermitdave I guess that could reduce the amount of time spending on the UI thread for optimization purpose. Not sure how that is breaking @darshanrampatel in this case with the exception though.

@darshanrampatel can you try your project with reference to the actual toolkit project? It might help you debug this further.

darshanrampatel · 2017-07-27T08:37:43Z

@Code-ScottLe @hermitdave I was playing around with the ImageEx.xaml and came up with a way that I could still keep the ProgressRing but not see any crashes.

All I did was add the Visibility property to the ProgressRing and then set in to Visible/Collapsed as appropariate in the Visual States. According to the documentation for ProgressRing:

If IsActive is false, the ProgressRing is not shown, but space is reserved for it in the UI layout. To not reserve space for the ProgressRing, set its Visibility property to Collapsed.

I can't see any downsides to doing this.

Can you guys please test this? I have update the repro project with this new style.

    <Style TargetType="controls:ImageEx">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="{ThemeResource ApplicationForegroundThemeBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:ImageEx">
                    <Grid Background="{TemplateBinding Background}">
                        <Image
                            Name="PlaceholderImage"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            Opacity="1.0"
                            Source="{TemplateBinding PlaceholderSource}"
                            Stretch="{TemplateBinding PlaceholderStretch}" />
                        <Image
                            Name="Image"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            NineGrid="{TemplateBinding NineGrid}"
                            Opacity="0.0"
                            Stretch="{TemplateBinding Stretch}" />
                        <ProgressRing
                            Name="Progress"
                            Margin="16"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Background="Transparent"
                            Foreground="{TemplateBinding Foreground}"
                            IsActive="False"
                            Visibility="Collapsed" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Failed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderImage" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Loading">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Progress" Storyboard.TargetProperty="IsActive">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Progress" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderImage" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Loaded">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Progress" Storyboard.TargetProperty="IsActive">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Progress" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation
                                            AutoReverse="False"
                                            BeginTime="0"
                                            Storyboard.TargetName="Image"
                                            Storyboard.TargetProperty="Opacity"
                                            From="0"
                                            To="1" />
                                        <DoubleAnimation
                                            AutoReverse="False"
                                            BeginTime="0"
                                            Storyboard.TargetName="PlaceholderImage"
                                            Storyboard.TargetProperty="Opacity"
                                            From="1"
                                            To="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unloaded" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Swifter · 2017-09-15T15:18:26Z

I have a project wherein I use an ImageEx control inside an item template and when this template is used in a FlipView with many ImageEx controls on a page, they never load when IsCacheEnabled="True". Removing this makes them work again, but this was one of the reasons I wanted to use ImageEx. Boo.

I tried the style template above, hoping it might fix the issue but of course it did not. Oh, yes, before you ask, I did enable the cache. :)

hermitdave · 2017-09-15T15:22:43Z

@Swifter could you please post a repro ?

Swifter · 2017-09-15T15:57:38Z

@hermitdave This is a HUGE project, but I will try to make a little one for you.

darshanrampatel · 2017-09-15T16:13:00Z

@Swifter I use ImageEx controls within a FlipView as well and have no issues with the IsCacheEnabled property. My ViewModel.Pictures list contains over 200+ pictures.

 <FlipView
            x:Name="PicturesFlipView"
            Background="Transparent"
            ItemsSource="{x:Bind ViewModel.Pictures, Mode=OneWay}"
            SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
            SizeChanged="PicturesFlipView_SizeChanged">
            <FlipView.ItemTemplate>
                <DataTemplate x:DataType="models:PicturesToPass">
                    <Grid>
                        <ScrollViewer
                            HorizontalScrollBarVisibility="Auto"
                            MaxZoomFactor="3"
                            MinZoomFactor="1"
                            VerticalScrollBarVisibility="Auto"                          
                            ZoomMode="Enabled">
                            <Viewbox
                                MaxWidth="{Binding DataContext.DialogWidth, ElementName=PicturesGrid, Mode=OneWay}"
                                MaxHeight="{Binding DataContext.DialogHeight, ElementName=PicturesGrid, Mode=OneWay}"
                                StretchDirection="DownOnly">
                                <uwpcontrols:ImageEx IsCacheEnabled="True"
                                    DoubleTapped="ImageEx_DoubleTapped"
                                    ImageExFailed="ImageEx_ImageExFailed"
                                    Source="{x:Bind URL, Mode=OneTime}"
                                    Stretch="Uniform" />
                            </Viewbox>
                        </ScrollViewer>                       
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

windowstoolkitbot · 2017-10-17T16:27:24Z

This issue seems inactive. It will automatically be closed in 14 days if there is no activity.

windowstoolkitbot · 2017-10-25T00:01:23Z

This issue seems inactive. It will automatically be closed in 7 days if there is no activity.

darshanrampatel · 2017-10-27T10:41:10Z

@hermitdave @Code-ScottLe Do you want to make a PR to adjust the template to add the Visibility property changing in the VisualStates? I can't see any negative impact from this.

hermitdave · 2017-10-27T14:49:37Z

I'll have a go when i get back to UK.. Getting little computer time while on holiday

Setting Visibility of ProgressRing to Collapsed by default. Modify VisualState to make ProgressRing Visible when Loading. Removed un-necessary modification in Loaded state.

nmetulev · 2017-10-31T22:23:12Z

PR merged

nmetulev added controls 🎛️ improvements ✨ labels Oct 27, 2017

nmetulev assigned hermitdave Oct 27, 2017

nmetulev added this to the v2.1 milestone Oct 27, 2017

hermitdave added a commit that referenced this issue Oct 31, 2017

Addressing #1328

1998edc

Setting Visibility of ProgressRing to Collapsed by default. Modify VisualState to make ProgressRing Visible when Loading. Removed un-necessary modification in Loaded state.

hermitdave mentioned this issue Oct 31, 2017

ImageEx ProgressRing Visibility toggled through VisualState #1581

Merged

3 tasks

nmetulev added the in progress 🚧 label Oct 31, 2017

nmetulev closed this as completed Nov 2, 2017

hermitdave mentioned this issue Apr 11, 2018

ImageEx control - Layout cycle detected. Layout could not complete. #1963

Closed

ghost locked as resolved and limited conversation to collaborators Nov 26, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Many ImageEx controls causing Windows.UI.Xaml.LayoutCycleException #1328

Many ImageEx controls causing Windows.UI.Xaml.LayoutCycleException #1328

darshanrampatel commented Jul 20, 2017 •

edited

Code-ScottLe commented Jul 20, 2017

avknaidu commented Jul 21, 2017

hermitdave commented Jul 22, 2017

darshanrampatel commented Jul 22, 2017 via email •

edited

darshanrampatel commented Jul 22, 2017

Code-ScottLe commented Jul 23, 2017

hermitdave commented Jul 23, 2017

darshanrampatel commented Jul 23, 2017 via email •

edited

darshanrampatel commented Jul 23, 2017 via email •

edited

Code-ScottLe commented Jul 23, 2017

darshanrampatel commented Jul 24, 2017

Code-ScottLe commented Jul 25, 2017

hermitdave commented Jul 25, 2017

hermitdave commented Jul 25, 2017

hermitdave commented Jul 25, 2017

darshanrampatel commented Jul 25, 2017 •

edited

hermitdave commented Jul 26, 2017

darshanrampatel commented Jul 26, 2017 •

edited

Code-ScottLe commented Jul 26, 2017

hermitdave commented Jul 26, 2017

hermitdave commented Jul 26, 2017

Code-ScottLe commented Jul 26, 2017

hermitdave commented Jul 26, 2017

Code-ScottLe commented Jul 26, 2017

darshanrampatel commented Jul 27, 2017

Swifter commented Sep 15, 2017 •

edited

hermitdave commented Sep 15, 2017

Swifter commented Sep 15, 2017

darshanrampatel commented Sep 15, 2017

windowstoolkitbot commented Oct 17, 2017

windowstoolkitbot commented Oct 25, 2017

darshanrampatel commented Oct 27, 2017

hermitdave commented Oct 27, 2017

nmetulev commented Oct 31, 2017

Many ImageEx controls causing Windows.UI.Xaml.LayoutCycleException #1328

Many ImageEx controls causing Windows.UI.Xaml.LayoutCycleException #1328

Comments

darshanrampatel commented Jul 20, 2017 • edited

Code-ScottLe commented Jul 20, 2017

avknaidu commented Jul 21, 2017

hermitdave commented Jul 22, 2017

darshanrampatel commented Jul 22, 2017 via email • edited

darshanrampatel commented Jul 22, 2017

Code-ScottLe commented Jul 23, 2017

hermitdave commented Jul 23, 2017

darshanrampatel commented Jul 23, 2017 via email • edited

darshanrampatel commented Jul 23, 2017 via email • edited

Code-ScottLe commented Jul 23, 2017

darshanrampatel commented Jul 24, 2017

Code-ScottLe commented Jul 25, 2017

hermitdave commented Jul 25, 2017

hermitdave commented Jul 25, 2017

hermitdave commented Jul 25, 2017

darshanrampatel commented Jul 25, 2017 • edited

hermitdave commented Jul 26, 2017

darshanrampatel commented Jul 26, 2017 • edited

Code-ScottLe commented Jul 26, 2017

hermitdave commented Jul 26, 2017

hermitdave commented Jul 26, 2017

Code-ScottLe commented Jul 26, 2017

hermitdave commented Jul 26, 2017

Code-ScottLe commented Jul 26, 2017

darshanrampatel commented Jul 27, 2017

Swifter commented Sep 15, 2017 • edited

hermitdave commented Sep 15, 2017

Swifter commented Sep 15, 2017

darshanrampatel commented Sep 15, 2017

windowstoolkitbot commented Oct 17, 2017

windowstoolkitbot commented Oct 25, 2017

darshanrampatel commented Oct 27, 2017

hermitdave commented Oct 27, 2017

nmetulev commented Oct 31, 2017

darshanrampatel commented Jul 20, 2017 •

edited

darshanrampatel commented Jul 22, 2017 via email •

edited

darshanrampatel commented Jul 23, 2017 via email •

edited

darshanrampatel commented Jul 23, 2017 via email •

edited

darshanrampatel commented Jul 25, 2017 •

edited

darshanrampatel commented Jul 26, 2017 •

edited

Swifter commented Sep 15, 2017 •

edited