Search code examples
sketchflowwireframe

Making your own sketchflow style element(or finding something I can't find)

I was trying to find a sketchflow style element, to signify the placement of an image. This element looks like a rectangle or a square, with a cross drawn in it and a text between parantheses at the top center, which describes what exactly it is.

I saw this here: http://seleag.ikdoeict.be/prototype/ (silverlight plugin needed)

Not being able to find it, I decided I would try to make such an element out of other elements, and then use the option "make in to user control"(might not be called that).

However, this is proving to be rather odd. First of all, there's no mention of "style element" anywhere, it's a control. Second, this opens a XAML file, just like a regular wireframe page.

Is this a regular style element I just can't find, or is this something I need to make myself and I'm doing it wrong?

Solution

  • To create a re-useable object, like the image placeholder you mentioned follow the below steps:

    1. Manually create the object with the available drawing tools in one of your xaml files
    2. Once you have the image placeholder object created, select all of the objects that make up that image placeholder element that you've created
    3. Right click on one of the selected items and choose "Make into Component Screen..."; This will open the Make Into Component Screen dialog box. I called mine ImagePlaceHolder. There is an option to create a copy, but we don't want to do that. We want our selection to be replaced with our new ImagePlaceHolder component.
    4. Once you do this you will then see a green ImagePlaceHolder component show up in your SketchFlow Map.
    5. Now you can choose to link your component to your other pages by mouse hovering your component and selecting Insert a Component Screen.