How to add mockup controls to your Expression Blend library


In Expression Blend 4, one of the new samples we added is called MockupDemonstration. If you haven’t had a chance to use it yet, you can open MockupDemonstration from the Welcome screen, which is available when you first start Expression Blend or when you click Help and then click Welcome Screen. In the Welcome screen, click Samples, and then click MockupDemonstration:

clip_image001[4]

As you can tell quickly from exploring this sample, this sample contains a handful of controls designed to help you create prototypes easily. The catch is that these controls only exist within the confines of this particular sample. Since some of you have requested that it would be useful to have these controls available outside of the sample, this blog post will explain how to make these mockup controls available in other projects.

To enable mockup controls for any SketchFlow project, copy the mockup controls run-time and design-time assemblies from the MockupDemonstration sample to the pre-configured Libraries folder by following the steps below:

1. Copy both Microsoft.Expression.Prototyping.MockupsSL.dll and Design folder from:

Documents > Expression > Blend 4 > Samples > MockupDemonstration > MockupDemonstration > Libraries > Silverlight > Debug
 
(for WPF projects, follow this step but copy files from > Libraries > .NETFramework > Debug)

2. Add copied files to the following destination:

Computer > OS (C:) > Program Files(x86) > Microsoft Expression > Blend 4 > Libraries > Silverlight > 4.0 >
 
(for WPF paste the copied files from the NETFramework folder in the previous step to … > Libraries >  .NETFramework > 4.0)

clip_image007[4]

3. Restart Blend. You can now start using mockup controls by clicking the Mockups category in the Assets panel (the appropriate assembly reference is automatically added to your project).

If you have any questions or comments, please feel free to post below or on our forums.

Thanks,

Dante, Rick, Billy

Comments (21)

  1. Brandon Wittwer says:

    I'm suprised to be the first to comment on this.  The mockup controls are a great addition to sketchFlow.  I just want to let you know. This is going to be very useful for us.  Thanks a bunch.

  2. Joe Healy says:

    The forums link is actually "http://link-to-blend-forums/".  Probably need to fixit.  Thanks…

  3. Andrew says:

    Great controls – but it might have been smarter to have this as an option during setup.

  4. FirstPinkGirl says:

    I suspect I'm super blonde: I've gone to Codeplex to install the MockupsLibrary.msi, but it doesn't install for some reason. And the instructions to install per the blog post only gives me the controls that were already there – odd. Do those blue icons exist? and if so, where do I get them from?

  5. blender says:

    @Andrew

    Hi Andrew, that was our initial intent, but it was challenging finding resources to fully test this sample. We decided to publish this as out of band, but I agree that it would have been preferable to intall this automatically during setup.

  6. blender says:

    @FirstPinkGirl

    After installing, the Mockups controls will appear in your Assets library, under SketchFlow > Mockups.

    The blue icons are IconMockups. Add one to the artboard and in your Properties pane, go to Common Properties and change the IconImage dropdown to your desired icon. Hope this helps :)

  7. jerry says:

    I am sorry ,there is no folder called design in my debug folder.

  8. blender says:

    @jerry

    Have you tried loading and building the project yet? This should create a design folder in your debug folder.

  9. Paul says:

    Those are cool, but can you create your own? If so could you please let me know how.

    Thanks.

  10. blender says:

    @paul

    One way to create something similar is making a user control. Press ctrl+n to create a new item and choose UserControl (don't forget to give it a name). A new document tab will open where you can create your own "mockup item." Once created, rebuild the project (ctrl+shift+b) and your newly created control will appear in the Asset library, under the Projects category.

    Hope this helps, please let me know if you have further questions :)

  11. Mike Keller says:

    Thanks, worked exactly as described.

  12. BenBen says:

    can I use these Mockup controls in SketchFlow 3 ?

  13. laclu007 says:

    I tried the steps outlined above, but still do not see the Mockups under Assets.  Any suggestions?

    Thanks.

  14. Rick Keeney says:

    @BenBen,

    They will not work as-is in Blend/SketchFlow V3.  It may be possible to adopt the library for use in Blend 3 from the sources on codeplex, but it is probably easier to just upgrade to Blend/SketchFlow V4.

  15. Rick Keeney says:

    @laclu007

    I am not sure what might be wrong, but a couple of things to consider:

    You need to restart Blend after copying the files.

    You need the Blend SDK's installed to use the Mockups Library.

    The Mockup Assets only appear for SketchFlow projects.

    They are listed in their own category that is added to the Asset panel.

  16. Blender says:

    @laclu007

    As Rick mentioned, did you restart Blend after following the steps in Blend 4? Are you able to run the Mockup sample? Please let me know if that works. Thanks.

  17. Robb Vandaveer says:

    The instructions above seem to be invalid for WPF. There is only a Silverlight folder in my Libraries folder.

  18. Robb Vandaveer says:

    So the sample project that comes with Blend doesn't appear to have the WPF controls. After a little searching, I found an installer that does have the controls: expressionblend.codeplex.com/…/45452

    It should include the Mockups automatically for you after your install.

  19. George Birbilis says:

    more Blend stuff at expressionblend.codeplex.com

  20. Love Expression Blend and Sketchflow.  Wish I had discovered the application earlier.

    I am using SL5 not SL 4 and found that EB 4 would not open my project.  I downloaded and installed Microsoft Expression Blend Preview for SL5 and this seems to have resolved the problem.  However, as SL5 was released end-2010 I am surprised that I cannot find the SL5 Release Version for Expression Blend and Sketchflow.

    You mentioned that time constraints prevented Sketchflow Mock up files from being included as part of the EB4 setup; unfortunately they were not included in the SL5 preview setup either and if you wish to continue using these then you need to copy the mock up files across manually to the following folder:

    C:Program Files (x86)Microsoft ExpressionBlend Preview for Silverlight 5LibrariesSilverlightv5.0

    Otherwise the instructions for use remain as posted on this chain.