Why does stackpanel break my pivotviewer?

I have a working pivotviewer with 128 images of cars that I put together myself. I used one of the many tutorials on the web to get it working, and it works well. Then I thought I should decorate the page a bit so I put the grid in which the pv resided inside a bounding stackpanel with a couple of textblocks above it to tell what the collection is. Everything loads fine except the images. Comment out the stackpanel lines and it works perfectly.

Any ideas? How could something so simple fail?

Here is all of the code in MainPage.xaml:

<StackPanel>
    <TextBlock
        FontSize="24"
        HorizontalAlignment="Center"
        VerticalAlignment="Top">
        Silverlight Pivotviewer Example
    </TextBlock>
    <TextBlock
        FontSize="16"
        HorizontalAlignment="Center"
        VerticalAlignment="top">
        Cool Automobiles
    </TextBlock>
    <Grid x:Name="LayoutRoot" Background="White">
        <pivoter:PivotViewer 开发者_高级运维x:Name="pivotViewer" />
    </Grid>
</StackPanel>

Your Grid, "LayoutRoot", is your main layout control. You need to wrap your StackPanel within the Grid control.

Something like this:

<Grid x:Name="LayoutRoot" Background="White"
  <StackPanel>
    <TextBlock
        FontSize="24"
        HorizontalAlignment="Center"
        VerticalAlignment="Top">
        Silverlight Pivotviewer Example />
    <TextBlock
        FontSize="16"
        HorizontalAlignment="Center"
        VerticalAlignment="top">
        Cool Automobiles />
    <pivoter:PivotViewer x:Name="pivotViewer" />
  </StackPanel>
</Grid>

After your declaration of your Grid, I would add some rows, i.e. 0, 1, 2. Then I would layout your Stackpanels, PivotViewer, etc.

Hope this helps.

This is a known issue. The StackPanel is a dimensionless element. You need to add Width and Height values to the StackPanel and the PivotViewer will begin working correctly.

This is what we did. We added an event handler to the SizeChanged event on the dialog then sized the PivotViewer. Also after the Initialise or Loaded event call it too...see how you go?

  void PivotDialog_SizeChanged( object sender, SizeChangedEventArgs e )
  {
     SizePivotViewer( );
     m_PivotViewer.UpdateLayout( );
  }

  private void SizePivotViewer( )
  {
     m_PivotViewer.Width = ActualWidth;
     m_PivotViewer.Height = ActualHeight - 20; // Magic number so text will display properly at bottom of Pivot!
  }