How to Export SketchFlow (Blend for Visual Studio 2013) Project correctly

Question

I have a SketchFlow Project, which is a prototype of an application that we are designing, and I am at the stage that I would like to export the project to another format for sharing.

The first thing that I tried was:

File | Export | Export as Images...

However, after this had finished running, I only had 6 screenshots. I have over 30 screens in the prototype. Does anyone have any idea why all screens are not exported?

I then tried:

File | Export | Export to Microsoft Word...

And this results in the following error:

Any thoughts on what is happening here? I have tried looking for a log file, but I couldn't find one.

The final option which I have tried is:

File | Export | Package SketchFlow Project...

Which seems to work perfectly. However, I would like to embed the images into a design document, and don't really want to have to go through taking screenshots manually, which will be the last resort.

Update 1

Ok, seems like it is certain screens that are causing the problem. When I do the "Export to Microsoft Word..." option, and choose only the first screen, the Word document exports correctly. However, when I add in another screen (one of the ones that wasn't included in the "Export as Images" method, I once again get the error that I showed the screenshot of.

Update 2

As requested in comments, the layout of the pages are as follows.

• Header Component - which shows overall title of the application, and some common buttons.
• Navigation Component - Menu Structure for all top level pages
• All screens, with the exception of the Login/Register page, have the Header and Navigation Component added to them

Some screens are using Sample Data to populate elements on the page. Others are just simple controls, laid out on the page.

Update 3

Ok, I have just done a pretty comprehensive test, and when using "Export to Microsoft Word..." if I exclude all the screens that use Sample Data, the export completes successfully. As soon as I include any screen with sample data, it throws the exception. I can only assume that the "Export as images..." is failing silently when it hits the first screen that has Sample Data in it.

Answer 1

This is a bug. It's related to resource resolution. You may be able to work around by making the ItemTemplate property local instead of the default resource.

For example, with a repro built using the databinding showcase instructions - http://www.microsoft.com/en-us/showcase/details.aspx?uuid=db8a7eb6-3039-4008-a9f2-f5c910bcddf3

Replacing the ItemTemplate

 <ListBox HorizontalAlignment="Left" Height="330" Margin="73,40,0,0" Style="{DynamicResource ListBox-Sketch}" VerticalAlignment="Top" Width="535" ItemsSource="{Binding Collection, Source={StaticResource snowboardData}}" DataContext="{Binding Source={StaticResource SampleDataSource}}" ItemTemplate="{DynamicResource ItemTemplate}"/> 

With

 <ListBox HorizontalAlignment="Left" Height="330" Margin="73,40,0,0" Style="{DynamicResource ListBox-Sketch}" VerticalAlignment="Top" Width="535" ItemsSource="{Binding Collection, Source={StaticResource snowboardData}}" DataContext="{Binding Source={StaticResource SampleDataSource}}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <Image Source="{Binding Images}" HorizontalAlignment="Left" Height="64" Width="511"/> <TextBlock Text="{Binding Text}" Style="{DynamicResource BasicTextBlock-Sketch}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> 

Allowed me to export to Word.

This has been reported to Microsoft and should be fixed in a future VS/Blend update.

Answer 2

After some back and forth offline with @shawty, we believe we have come up with the reason why the export is failing. It is not specifically tied to doing an export when Sample Data is being included, but more specifically when using Sample Data with a Sketch Control.

This is what I did to verify this...

1. Created new Sketch Flow Project
2. Added ComboBox control to the page
3. Added DataSource to the Data tab
4. Added Collection Property
5. Added Simple Property to Collection
6. Edited Data to include some sample data
7. Bound the ComboBox to the sample data
8. Ran the application to make sure it is working
9. Ran the Export to Microsoft Word...
10. Everything worked correctly

I then repeated the "exact" same process using the ComboBox - Sketch control, and the Export to Microsoft Word... failed to function, displaying the error message shown in question above.

The suggested workaround from @shawty is as follows:

"The sketch controls are functionally exactly the same as the OOTB ones under the hood, they just have a different dictionary of styles applied to them, my suggestion would be to take the OOTB controls, add your own set of styles to them to give them a similar look and feel. You'd only have to define the resource dictionary once at application level for each appropriate control (Button, Label, Datagrid and any others you use) , and the entire application will just maintain the same look and feel."

While this is a perfectly viable solution, it doesn't take anyway from the fact that I believe that this is a bug in the Sketch Flow application. I just don't know where to raise the bug, as there doesn't seem to be a section on Microsoft Connect to raise a bug about Blend, and/or Sketch Flow. If anyone knows where I can take this, I would love to hear about it.