none
Layout cycle detected, layout could not complete. RRS feed

  • Question

  • How do I troubleshoot this kind of error?  Layout cycle detected.  Layout could not complete.

    I suspect it is related to the Image UI element below in that when I change the source after it has already been set in code-behind, this error occurs without much detail in specifically where the layout error might be.

    Here is my xaml:

        <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <StackPanel Grid.Row="0">
                <TextBlock Text="myapp" Style="{StaticResource TitleStyle}"/>
                <TextBlock Text="details" Style="{StaticResource HeaderStyle}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="80"/>
                </Grid.RowDefinitions>
                <Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <ProgressBar Grid.Row="0" x:Name="PRG_Progress" Height="10" IsIndeterminate="False"/>
                    <TextBlock Grid.Row="1" x:Name="TXTBLCK_Status" Style="{StaticResource HelpTextStyle}" />
                    <StackPanel Grid.Row="2" Orientation="Vertical">
                        <TextBlock Text="Cover Page" Style="{StaticResource HeaderStyle}"/>
                        <Border x:Name="BRDR_Image" BorderBrush="{StaticResource EmFontBrush}" BorderThickness="1" Width="130" Height="200" HorizontalAlignment="Left">
                            <Image x:Name="IMG_Cover" Width="130" Height="200" Source="{Binding CoverImage}" Stretch="UniformToFill"/>
                        </Border>
                    </StackPanel>
                    <ScrollViewer x:Name="SCV_Details" Grid.Row="3">
                        <StackPanel Orientation="Vertical">
                            <phone:LongListSelector x:Name="LLS_BookInfo" ItemsSource="{Binding}">
                                <phone:LongListSelector.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Grid.Column="1" Orientation="Vertical">
                                            <TextBlock Text="{Binding Key}" Style="{StaticResource EmFieldHeaderStyle}"/>
                                            <TextBlock Margin="20,0,0,0" Text="{Binding Value}" Style="{StaticResource EmFieldDataStyle}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </phone:LongListSelector.ItemTemplate>
                            </phone:LongListSelector>
                        </StackPanel>
                    </ScrollViewer>
                    <Grid Grid.Row="4">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Button Grid.Row="1" Grid.Column="0" x:Name="BTN_SaveBook" Content="Save" Click="BTN_SaveBook_Click" Style="{StaticResource EmButtonStyle}" />
                        <Button Grid.Row="1" Grid.Column="1" x:Name="BTN_Manual" Content="Manual" Click="BTN_Manual_Click" Style="{StaticResource EmButtonStyle}"/>
                        <Button Grid.Row="1" Grid.Column="2" x:Name="BTN_Done" Content="Cancel" Click="BTN_Cancel_Click" Style="{StaticResource EmButtonStyle}"/>
                    </Grid>
                </Grid>
    
                <Viewbox Margin="0,0,0,0" Grid.Row="1" Width="480" Height="80" VerticalAlignment="Bottom">
                    <UI:AdControl x:Name="ADC_BKM_ADUnit1" Height="80" Width="480" ApplicationId="test_client" AdUnitId="Image480_80" />
                </Viewbox>
    
            </Grid>
        </Grid>

    Saturday, August 16, 2014 9:08 PM

Answers

  • Found the solution!  At least for me, I don't know about others who might have a similar issue.  It was not the Image control after all.  Although it might still be related since when I didn't set the source more than once, everything is okay.

    The problem is with the LongListSeletor and the way it interacts with the ScrollViewer as well as the StackPanel parent.  I didn't realize this until reading the docs in detail about LongListSelector; it has its own built-in ScrollViewer.  So when I rearranged my presentation to not include the ScrollViewer and StackPanel and instead set the LongListSelector's "ScrollViewer.VerticalScrollBarVisibilty" to auto and put it in it's own Grid cell, all problems went away.

    So basically, this causes the problem:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <ScrollViewer>
            <StackPanel>
            <TextBlock Text="{Binding Title}"/>
            <phone:LongListSelector ItemsSource="{Binding}">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Grid.Column="1" Orientation="Vertical">
                            <TextBlock Text="{Binding Key}"/>
                            <TextBlock Text="{Binding Value}"/>
                        </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
            </StackPanel>
         </ScrollViewer>
    </Grid>

    This solves it:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="{Binding Title}"/>
        <phone:LongListSelector Grid.Row="1" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Auto">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Grid.Column="1" Orientation="Vertical">
                            <TextBlock Text="{Binding Key}"/>
                            <TextBlock Text="{Binding Value}"/>
                        </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
    </Grid>


    • Marked as answer by Jose1966 Sunday, August 17, 2014 8:28 AM
    • Edited by Jose1966 Sunday, August 17, 2014 8:56 AM added full details
    Sunday, August 17, 2014 8:28 AM

All replies

  • Found the solution!  At least for me, I don't know about others who might have a similar issue.  It was not the Image control after all.  Although it might still be related since when I didn't set the source more than once, everything is okay.

    The problem is with the LongListSeletor and the way it interacts with the ScrollViewer as well as the StackPanel parent.  I didn't realize this until reading the docs in detail about LongListSelector; it has its own built-in ScrollViewer.  So when I rearranged my presentation to not include the ScrollViewer and StackPanel and instead set the LongListSelector's "ScrollViewer.VerticalScrollBarVisibilty" to auto and put it in it's own Grid cell, all problems went away.

    So basically, this causes the problem:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <ScrollViewer>
            <StackPanel>
            <TextBlock Text="{Binding Title}"/>
            <phone:LongListSelector ItemsSource="{Binding}">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Grid.Column="1" Orientation="Vertical">
                            <TextBlock Text="{Binding Key}"/>
                            <TextBlock Text="{Binding Value}"/>
                        </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
            </StackPanel>
         </ScrollViewer>
    </Grid>

    This solves it:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="{Binding Title}"/>
        <phone:LongListSelector Grid.Row="1" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Auto">
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Grid.Column="1" Orientation="Vertical">
                            <TextBlock Text="{Binding Key}"/>
                            <TextBlock Text="{Binding Value}"/>
                        </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
    </Grid>


    • Marked as answer by Jose1966 Sunday, August 17, 2014 8:28 AM
    • Edited by Jose1966 Sunday, August 17, 2014 8:56 AM added full details
    Sunday, August 17, 2014 8:28 AM
  • Found the solution!  At least for me, I don't know about others who might have a similar issue.  It was not the Image control after all.  Although it might still be related since when I didn't set the source more than once, everything is okay.

    The problem is with the LongListSeletor and the way it interacts with the ScrollViewer parent.  I didn't realize this until reading the docs in detail about LongListSelector; it has its own built-in ScrollViewer.  So when I rearranged my presentation to not include the ScrollViewer and instead set the LongListSelector's "ScrollViewer.VerticalScrollBarVisibilty" to auto, all problems went away.

    As far as technically answering my own question, I still don't know how to troubleshoot these kind of problem with xaml except to read the docs very carefully and fully understand what you are doing.  I'm calling this answered because I found that LongListSelector is directly responsible for my particular problem.

    Sunday, August 17, 2014 8:31 AM
  • Thanks for this, I was running into the same error with a UWP APP I am developing and I have a ScrollViewer wrapping a StackPanel that contains an UWP Toolkit AdaptiveGridView. Once I removed the ScrollViewer and StackPanel and set the AdaptiveGridView's ScrollViewer property to auto as you did it worked just fine.

    I agree though, not a very helpful error message to go on.

    Friday, December 30, 2016 12:20 PM
  • I was having the sema error message, I had a dev express grid inside a ScrollViewer, removing the scrollviewer was the solution for me too, the devexopress grid has its own scroll I think they were conflicting one to each other.
    Thursday, June 1, 2017 4:26 PM
  • This is not exactly an answer, but for someone who is coming from Google/Bing it might be useful.

    ScrollViewer will not work if it is inside a Expander component as well! Remove or comment out the scrollviewer and the error will disappear.


    Thursday, April 18, 2019 12:50 PM