Why is child grid not expanding to fill parent grid width?

Question

The grid I'm targeting is the one with background color azure:

Somehow it does not go to the full width of LayoutRoot, and setting it's width programmatically will cause a layoutcycle exception. I've also tried binding the width to parent layout... but that didn't seem to work either :(

<Border Style="{StaticResource ZoomBorderStyle}">
        <Grid x:Name="LayoutRoot">

            <Grid.RowDefinitions>
                <RowDefinition Height="37"/>
                <RowDefinition Height="76"/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <localView:ViewerMenu Width="Auto" 
                                  ZoomIn="ViewerMenu_ZoomIn" 
                                  ZoomOut="ViewerMenu_ZoomOut" 
                                  LayoutOne="ViewerMenu_One" 
                                  LayoutFour="ViewerMenu_Four" 
                                  ResoFull="ViewerMenu_Full" 
                                  Background="White" />

            <localView:ImageDetails Grid.Row="1" 
                                    ImageMetadata="{Binding CurrentImageContext}" 
                                    VerticalAlignment="Top" 
                                    Height="Auto"
                                    HorizontalAlignment="Stretch"
                                    Width="Auto"/>

            <Grid Grid.Row="1" Grid.RowSpan="2" x:Name="ViewerWrapper" Background="Azure"  
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch">


                 <Grid x:Name="QuadPanel" Visibility="Collapsed">
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <zoomControls:QuadPanelImage x:Name="QuadImageTopLeft" Content="{Binding ImageTopLeft}" Margin="15" Grid.Row="0" 
                                                 Grid.Column="0" 
                                                 PanelPosition="TopLeft" 
                                                 MouseLeftDoubleClick="InciteContentControl_MouseLeftDoubleClick"  
                                                 HorizontalContentAlignment="Center"/>
                    <zoomControls:QuadPanelImage x:Name="QuadImageTopRight" Content="{Binding ImageTopRight}" Margin="15" Grid.Row="0" 
                                                 Grid.Column="1" 
                                                 PanelPosition="TopRight" 
                                                 MouseLeftDoubleClick="InciteContentControl_MouseLeftDoubleClick" 
                                                 HorizontalContentAlignment="Center"/>
                    <zoomControls:QuadPanelImage x:Name="QuadImageBottomLeft" Content="{Binding ImageBottomLeft}" Margin="15" Grid.Row="1" 
                                                 Grid.Column="0" 
                                                 PanelPosition="BottomLeft" 
                                                 MouseLeftDoubleClick="InciteContentControl_MouseLeftDoubleClick" 
                                                 HorizontalContentAlignment="Center"/>
                    <zoomControls:QuadPanelImage x:Name="QuadImageBottomRight" Content="{Binding ImageBottomRight}" Margin="15" Grid.Row="1"
                                                 Grid.Column="1" 
                                                 PanelPosition="BottomRight" 
                                                 MouseLeftDoubleClick="InciteContentControl_MouseLeftDoubleClick" 
                                                 HorizontalContentAlignment="Center"/>
                </Grid>

Answer 1

Your layout root is inside a Border. The default behaviour of the border is to fit its content. You have not supplied the ZoomBorderStyle style XAML so not sure if that is interfering.

Try adding HorizontalAlignment="Stretch" to the top level Border (or remove the style, or the border itself, as a test).

If this does not help, please provide more detail/Xaml. If possible reduce the problem to a standalone test that can be used without all the extra control references.

Answer 2

Still don't know why the Grid does not expand to fill the app width after I remove all the borders and set stretch to all the containers. Anyway.. I found a solution which does not throw the layoutrecycle exception error:

Instead of this (which throws the exception when I resize very fast)

void ZoomDocViewer_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            QuadPanel.Height = e.NewSize.Height;
            QuadPanel.Width= e.NewSize.Height;
        }

I get the width from the application instead:

 void ZoomDocViewer_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            QuadPanel.Width = Application.Current.Host.Content.ActualWidth; 
        }

Which doesn't throw the exception!