silverlight 5: force grid being in sync before screen-capture via writeablebitmap

Question

In silverlight 5: I have built a product configurator that also constructs a drawing via combination of image's and Rectangle,Ellipse,Polygon constructions.

The configurator works fine and the drawing is fine as well. When a product is ready it's placed in a gallery (List box) and a thumbnail of the drawing is showing along with some main information. So far so good.

I can also save the configurations that are placed in the gallery to disc (xml) and load them later on to continue and finish. Here is the problem. I read the products one by one to the configurator, all business rules are in place then and the drawing takes place. But at the moment I save the product to the gallery the snapshot of the drawing stays blank.

I'm sure that all steps are fine because when I break at the point before placing the product in gallery, the drawing is showing correct. However, in the gallery the drawing is blank. So I assume a sync/timing/update problem but can't find a way to force redrawing of the grid that contains the images and drawings.

In axml, the listbox:

<ListBox x:Name="lbTiles" Loaded="lbTiles_Loaded" HorizontalAlignment="left" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Margin="2,2,0,0" Height="233" Width="892" d:LayoutOverrides="HorizontalAlignment" Background="Gainsboro" BorderThickness="2" BorderBrush="#FF606060">
<ListBox.ItemsPanel>
  <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal"/>
   </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
  <ListBox.ItemTemplate>
      <DataTemplate >
         <StackPanel Orientation="Vertical" Background="Gainsboro">
            <Border BorderThickness="1" BorderBrush="#4F000000" >
              <Grid >
                 <Image Margin="0,0,0,0" Source="{Binding mImage, Mode=OneWay}" Stretch="Uniform" Height="110" ></Image>
              </Grid>
              </Border>
                <TextBox  TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mName, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" FontSize="11" />
                <TextBox  TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mPrice, Mode=OneWay}" IsTabStop="False" IsHitTestVisible="False" FontSize="11" />
                 <TextBox  TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mTotal, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" FontSize="11" />
                  <TextBox  TextAlignment="Center" IsReadOnly="True" Width="120" Height="23" Text="{Binding mFreight, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" FontSize="11" />
                  </StackPanel>
               </DataTemplate>
          </ListBox.ItemTemplate>
      </ListBox>

The grid:

 <Grid Name="myDrawing" Background="Gainsboro" Height="437" Width="486">
    <Rectangle Name="clrFrame" Visibility="Collapsed" Margin="27,5,32,5" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
       <Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL1" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
       <Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL0" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
        <Rectangle Name="clrWindow_1" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
         <Rectangle Name="clrWindow_2" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
         <Rectangle Name="clrWindow_3" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
         <Ellipse Name="clrWindow_4" Visibility="Collapsed" StrokeThickness="0" IsHitTestVisible="False" />
          <Polygon Name="clrWindow_5" Visibility="Collapsed" StrokeThickness="18" IsHitTestVisible="False"></Polygon>
          <Rectangle Name="clrDoor" Visibility="Collapsed" Margin="136,196,162,122" StrokeThickness="0" IsHitTestVisible="False" ></Rectangle>
          <Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL2" VerticalAlignment="Top" Width="429" IsHitTestVisible="False"/>
          <Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL3" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
          <Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL4" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
          <Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL5" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
           <Image Height="429" HorizontalAlignment="Left" Margin="25.5,4,0,0" Name="imDrawingL6" VerticalAlignment="Top" Width="429" IsHitTestVisible="False" />
      </Grid>

C# Code

for( int i = 0; i < count i++ )
{
xmlread al values to currentCasingComposition.....

writeToScreen(); // apply businessrules and do the drawing
myDrawing.InvalidateMeasure();
myDrawing.InvalidateArrange();
myDrawing.UpdateLayout();
// an exit here leaves me with the product in de confugurator and the drawing is fine
WriteableBitmap bmp = new WriteableBitmap(myDrawing, null); // capture drawing
currentCasingComposition.mImage = bmp;
currentCasingComposition.mImage.Invalidate();
currentCasingComposition.calculatePrice();
    ocCasingCompositions.Add(currentCasingComposition); to gallery via ObservableCollection
}

Who knows the solution?

BR, Ton

Answer 1

UpdateLayout() is asynchronous on the UI thread, so you should wait for it to complete before calling the rest of the block. Unfortunately, I can find nothing on how to get notified when UpdateLayout() completes. All the examples that refer to it use a DispatcherTimer to wait a second or so before carrying on. So what I would do is create a one-off dispatcher timer, set its interval to 1000 milliseconds (or less, as needed) , and execute the rest of your code on it Tick event.