Layout cycle detected error with two progressRings

Question

I want to create a custom user control with two grids in which I want to load images and until images are loaded 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 out 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

Does anyone knows why? Thanks :)

Carpentaria

Actually you didn't mention the error. Which exception is being thrown? – Teofilateosinte

Full error message: "Layout cycle detected. Layout could not complete" – Carpentaria

Can you try giving a specific height and width for all the elements used? – Scyros

Did that. Even tryed to and max/min width/height but without result – Carpentaria

Try removing your Width="190" Height="190" from the <Grid>. Grids like to stretch. If you don't want it to stretch, use a StackPanel or set the Width/Height on the Image and ProgressRing controls. – Cilo

Answer 1

This error indicates that the layout of an element depends on other elements that indirectly depend on the original element. Windows was not able to figure out the overall layout... Much like an infinite loop or infinite recursion.

In your case the cause probably relates to the alignments and sizes. You should be able to solve the problem by simplifying the layout. Keep the outer Grid but add 5 ColumnDefinitions, the middle one having width * and the other ones width Auto. Get rid of the other 4 Grids. Instead, put the two images and progress rings directly into the main Grid in columns number 0, 1, 3, and 4 (using the Grid.Column attached property). Put the desired sizes on the Width and Height properties of the images and progress rings, not on the Grid.

Afterheat