Start of registration loop detected by two progressRings

Question

I want to create a user control with two grids in which I want to load images before loading images. I want to show the progressRing control. The problem occurs when I add a second ProgressRing. My XAML looks like this:

<Grid Margin="0,0,0,21" Background="{ThemeResource PhoneAccentBrush}"> <Grid x:Name="leftImage" Margin="10" Width="190" Height="190" HorizontalAlignment="Left"> <Image x:Name="imageHolderLeft" x:FieldModifier="public" Width="180" Height="180" ImageFailed="imageHolderLeft_ImageFailed" ImageOpened="imageHolderLeft_ImageOpened"/> <Grid> <ProgressRing x:Name="waitImageLeft" IsActive="True" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" Foreground="{ThemeResource AppBarBackgroundThemeBrush}"/> </Grid> </Grid> <Grid x:Name="rightImage" Margin="10" Width="190" Height="190" HorizontalAlignment="Right"> <Image x:Name="imageHolderRight" x:FieldModifier="public" Width="180" Height="180" ImageOpened="imageHolderRight_ImageOpened" ImageFailed="imageHolderRight_ImageFailed"/> <Grid> <ProgressRing x:Name="waitImageRight" IsActive="True" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" Foreground="{ThemeResource AppBarBackgroundThemeBrush}"/> </Grid> </Grid> </Grid> 

So, when I comment on one ProgressRing , it works fine, but when there are two of them, my program crashes with the following error: Layout cycle detected. Layout could not complete Layout cycle detected. Layout could not complete

Does anyone know why? Thanks:)

Answer 1

This error indicates that the location of the element depends on other elements, which indirectly depend on the original element. Windows could not determine the overall layout ... Very similar to an infinite loop or infinite recursion.

In your case, the reason is probably related to alignment and size. You should be able to solve the problem by simplifying the layout. Save the external mesh, but add 5 ColumnDefinitions, the middle one has a width *, and the rest is Auto. Get rid of the other 4 grids. Instead, place the two images and progressive rings directly on the main grid in columns 0, 1, 3, and 4 (using the attached Grid.Column property). Place the desired dimensions in the Width and Height properties of the images and progress rings, not in the grid.