you to insert icons, line returns, specify column alignments and sizes.
Here’s an example:
Name,Last\nName,Age v,Kids,Likes,Actions
Peter,Severin,34,[x],{computer},[Edit] [View]
Henri,Severin,4,[],{train},[Edit] [View]
Olga,Severin,59,[x],{note},[Edit] [View]
[-] You can even
[+] Have
[+] Treetable
Which renders to this:
Cell Attributes
Various cell attributes can be given using special instructions at the beginning of a table cell. The general syntax
is:
instructions. Cell Content
Column Aligns and Widths
Cell attributes can be used to specify column aligns and widths. Here are a few examples that show what’s
available:
<. Align to left, (align:left). Also align to left
>. Align to right, (align:right). Also align to right
=. Center, (align:center). Also center
(w:30). Width of 30 pixels, (w=30). The same, (width:30). Also works
=(w=30). Width and align, (w:30)(align=center). The same, (width:30)(align:center). Also works
Note that specifying column widths only works when given in the header row. Column widths are expressed in
pixels, but limited to the minimum width of the column’s content. If you wish to make a column as narrow as
possible then give it the width of 1 pixel using: (w:1).
Cell Background
Cell attributes can also be used to control cell background. Here’s an example:
(bg:red). Red cell, (bgcolor:#0000FF)(align:left). Blue cell
WireframeSketcher User Guide
18
Pdf fillable form - C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#.net, ASP.NET, MVC, WinForms, WPF
Online C# Tutorial to Automatically Fill in Field Data to PDF
create a pdf form to fill out; create a fillable pdf form
Pdf fillable form - VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
create fillable form pdf online; convert pdf fillable form to html
Row Background
Row attributes can be used to control row background. Here’s an example:
(bg:red)|Row with red background
|Row with default selection background
(bgcolor:#00F)|Row with blue background
Regular row
This syntax also works for List and Tree widgets.
Using Icons in Tables
You can insert any icon using the {icon-name} syntax. There are also some text shortcuts and their equivalent
icon syntax:
Selected checkbox: [x], {checked}
• 
Unselected checkbox: [], [ ], {unchecked}
• 
Selected radio button: (x), (*), (o), {selected}
• 
Unselected radio button: (), ( ), {unselected}
• 
Collapsed tree node: [+], {expand}
• 
Expanded tree node: [-], {collapse}
• 
Ascending sort: ^, {asc}
• 
Descending sort: v, {desc}
• 
Neutral sort: v^, ^v, {neutral}
• 
Using Links in Tables
You can use [link] link syntax to create working links.
Breaking Text in Multiple Lines
Insert \n sequence inside the text to break it in multiple lines. Use Shift+Enter shortcut to do it without typing.
Multiple Selection in Tables
To mark a row as selected you can prepend it with ‘|’ character, like this:
|This is a selected row
Using spreadsheet to edit data
When editing complex tables you can use a spreadsheet application like Excel, Numbers, LibreOffice Calc or
Google Spreadsheet (use the last link to quickly open a new spreadsheet page). Just copy the contents of the Table
widget and then paste it to spreadsheet. After you are done editing the data, select the range of cells to transfer and
then copy & paste their contents back into the Table widget.
Note that to make copy & paste from other apps as seamless as possible, Table widget accepts both comma and
tab characters as cell separators.
WireframeSketcher User Guide
19
C# PDF Field Edit Library: insert, delete, update pdf form field
A professional PDF form creator supports to create fillable PDF form in C#.NET. An advanced PDF form maker allows users to create editable PDF form in C#.NET.
convert word doc to fillable pdf form; create fillable pdf form
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Convert multiple pages PowerPoint to fillable and editable PDF documents.
add fillable fields to pdf; create a pdf form to fill out and save
Working with Images
The Image widget lets you use image files in your wireframes. Supported formats are BMP, GIF, JPEG, PNG and
TIFF. You can use several methods to add an image to a screen:
Drop the Image widget from the palette. You’ll be prompted for an image file.
• 
Drag & drop the image file directly from the Project Explorer view into the editor. You may have to
uncheck the Link with Editor option ( ) in Project Explorer view first.
• 
Drag & drop the image from local file system or from the browser. The image will be copied to “assets”
folder. Later you can rename the image file in Project Explorer.
• 
Paste an image from the clipboard. You’ll be prompted for a file name to save the image to.
• 
Copy & Paste image files from the Project Explorer view into the editor.
• 
Working with SVG Images
SVG Image widget lets you work with SVG vector graphic images. SVG images are the ideal choice for custom
clipart and new widgets. Try using OpenClipart.org to find royalty free clipart for your wireframes. SVG images
can also be used for custom icons.
Unlike raster images, SVG images inherit the current theme used by the screen. If the screen is using sketchy style
then SVG images will be sketchy too. There is also a limited control over colors. If the original SVG image is
black & white then you’ll be able to change these colors in Properties View . To increase possible uses, SVG
images can be rotated, flipped horizontally and vertically.
To use an SVG image you can:
Drop the SVG Image widget from the palette. You’ll be prompted for an SVG image file.
• 
Drag & drop the SVG image from local file system or from the browser. The image will be copied to
“assets” folder. Later you can rename the image file in Project Explorer.
• 
Drag & drop the image file directly from the Project Explorer view into the editor. You may have to
uncheck the Link with Editor option ( ) in Project Explorer view first.
• 
Copy & Paste image files from the Project Explorer view into the editor.
• 
Advanced Uses
By default SVG images are scaled as specified in the standard. In particular this means that the stroke width is
scaled too. WireframeSketcher has a few proprietary tricks that you can use for more control. The SVG file can
include the ws-layout attribute in <svg> tag:
<svg
...
ws-layout="non-scaling-stroke">
If you are using Inkscape editor then you can add this attribute using Edit > XML Editor. Inkscape will preserve
it.
The non-scaling-stroke value ensures that the stroke width does not scale. There are some other values that you
can use for different scaling strategies. Here’s what you need to do to get 9-slice scaling, a popular scaling method
in Adobe tools:
WireframeSketcher User Guide
20
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Convert multiple pages Word to fillable and editable PDF documents.
convert fillable pdf to html form; converting a word document to a fillable pdf form
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Create fillable and editable PDF documents from Excel in Visual
convert pdf into fillable form; convert pdf to form fill
<svg
...
ws-layout="scale-9">
...
<rect
id="ws-guides"
width="33"
height="7"
x="26"
y="16"/>
...
Note the scale-9 attribute and also the extra element with id ws-guides that is used to define a 3×3 scaling grid
(this element is not rendered). 9-slice scaling strategy only resizes the middle band without distorting corners.
In Inkscape editor use Object > Object Properties to define a custom id for an element.
There are some other less important scaling strategies. scale-3-h and scale-3-v are basically scale-9, but only on
horizontal or vertical axis. The other axis gets non-scaling-stroke scaling. Then there is a more advanced
scale-25 strategy that works with ws-guides-1 and ws-guides-2 elements to define a 5×5 grid. It’s similar to
scale-9 but you get an additional middle band that does not scale.
All these scaling strategies keep the stroke constant and don’t scale it.
If this is not enough then it’s also possible to use embedded JavaScript with onresize event to control SVG
scaling programmatically. More than that, many widgets support Skin property that can be specified by editing
screen XML file and adding a skin attribute that points to SVG file. With this approach you can create you own
stencils with custom widgets that behave like any other built-in widget. See skinning widgets documentation for
more details.
You can see some concrete examples of custom widgets in Shapes and iPad  stencils.
When creating SVG images that need more precision make sure to snap coordinates and sizes to integer values.
Here’s a template SVG file  that you can use with Inkscape. It defines a 1×1px grid for automatic snapping.
Note that WireframeSketcher has a limited support for gradients and will approximate them with solid colors.
Working with Icons
WireframeSketcher comes with 200 vector, monochrome icons that you can use in your wireframes and that are
free to use in your own website or app. Icons work at any size, can be colored, rotated, and can be used
everywhere.
Here’s a list of widgets that let you use icons: Icon, Label, Button, Shape, Menu. Additionally there is a wiki
syntax that lets you embed icons in any text. Some widgets will let you also change the icon’s color.
To explore available icons just use the Icon property in Properties View  to open the Icon Chooser dialog:
WireframeSketcher User Guide
21
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Convert multiple pages PowerPoint to fillable and editable PDF documents. Easy to create searchable and scanned PDF files from PowerPoint.
pdf create fillable form; change pdf to fillable form
C# Create PDF from Excel Library to convert xlsx, xls to PDF in C#
Create fillable and editable PDF documents from Excel in both .NET WinForms and ASP.NET. Create searchable and scanned PDF files from Excel.
create fill pdf form; convert pdf to fill in form
The icon library can be extended with custom icons. Mockups Gallery provides several icon packs that can be
used to extend your icon selection. If those are not enough then explore other websites like The Noun Project that
provide free and non-free icons in SVG format.
To add your own custom icon in SVG format follow these steps:
Create a folder under assets that starts or ends with icons. For example CustomIcons. Another option is
to prefix the icon name with icon, e.g. icon-refresh.svg.
• 
WireframeSketcher User Guide
22
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Convert multiple pages Word to fillable and editable PDF documents in both .NET WinForms and ASP.NET. Convert both DOC and DOCX formats to PDF files.
create a fillable pdf form from a pdf; create fillable pdf form from word
C# Create PDF Library SDK to convert PDF from other file formats
Create fillable PDF document with fields. Load PDF from existing documents and image in SQL server. Load PDF from stream programmatically.
.net fill pdf form; convert word form to fillable pdf
Copy&paste the icon file in the icons folder. Note that the final icon list is flat so make sure that the icon
name is unique.
• 
Add a widget that has Icon property to your screen and then open the Icon Chooser dialog and find there
the new Custom category with your icon(s).
• 
Custom icons can be shared between projects using project references.
Working with Components
Components let you create reusable bits and share them across multiple screens. This is helpful for creating
common parts like navigation, headers and footers. Components can then be used by other screens without
unnecessary duplication. Changes to a component are automatically reflected in every place it is used.
Components in WireframeSketcher behave a lot like “masters” in other tools, or “master objects” to be more
precise. However components are much more flexible – hence the name.
Any regular screen can be used as a component. Use this feature to create screen variations without content
duplication. Additionally, you can place multiple components in the same screen file using named groups. This is
the recommended way to create stencils.
You can quickly extract selected widgets into a component using Convert to Component… action from the
context menu. Choose a new screen file to save the component to and click Finish.
Screens that to be used as components can also be placed in the “assets” folder in the root of your project. These
screens will be automatically loaded into the Palette. Use Mockups Gallery to add pre-built assets.
Assets can be shared between projects using project references. Project references can be configured using Project
Explorer. Right-click on a project and then select Properties > Project References. This mechanism lets you
place assets in a global project and then reference it in other projects that also need those assets.
Like images, components can be added using several methods:
Add the component from the Palette if it was placed in “assets” folder
• 
Add the Component widget from the Palette and choose the screen file to use as component
• 
Drag & Drop screen files directly from the Project Explorer view into the editor. You may have to
uncheck the Link with Editor option ( ) in Project Explorer view first.
• 
Copy & Paste screen files from the Project Explorer view into the editor.
• 
Overriding properties
Components come with an inheritance mechanism that allows component instances to be customized by
overriding their individual properties. The instance remains linked to its source and is updated, with overrides
preserved, when the source is changed. To override properties, first “enter” the component in Overriding
properties mode using double-click. Edit the component’s contents in the usual way by changing properties,
moving, resizing or deleting widgets. Hit Escape to exit component editing.
Note that Overriding properties mode has some limitations. Specifically, it’s not possible to add/nest new
components while in this mode. Pasting, duplicating or adding new components from the palette while being in
this mode will result in a warning message. The solution to this issue is to exit this mode and to overlay new
components above instead of nesting them inside.
WireframeSketcher User Guide
23
C# Create PDF from OpenOffice to convert odt, odp files to PDF in
An advanced .NET control to change ODT, ODS, ODP forms to fillable PDF formats in Visual C# .NET. Online source code for C#.NET class.
convert html form to pdf fillable form; convert pdf to form fillable
VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Turn ODT, ODS, ODP forms into fillable PDF formats.
change font size pdf fillable form; convert pdf fillable form
A component can also be detached from its original source and copied into the current screen as a group.
Detaching the component will automatically apply any overrides and make them part of the copy. To detach the
component choose “Detach Component” from the context menu.
Designing components
When designing components use anchors to control how widgets behave when the component is resized. Using
anchors it’s possible to combine simple shapes and objects into complex components that resize well and are
more reusable.
Consider using SVG images for new components. You can place helper images in “assets” directory and use them
in your stencil. Prefix image names with underscore, e.g. _ipad_popover.svg, to hide them from the Palette.
Working with Annotations
Some widgets are treated as annotations and can be hidden in exported documents and in presentation mode. By
default all widgets listed under Annotations category in palette are treated as such. You can adjust which widgets
to be treated as annotations by using the Mark as Annotation action from the context menu.
Custom Properties
Custom id and data properties can be set on any widgets. These properties then can be extracted from the screen
XML file using your own or 3rd party tools.
To set custom properties use the Custom Properties… action from the Context Menu.
WireframeSketcher User Guide
24
Working with Storyboards
A storyboard is a sequence of screens that shows how the UI changes in time as the result of user actions. For
example you can use them to show the steps of a checkout process or prototype a wizard dialog. You can also use
them for more complex things like UI animations produced by AJAX events in a web application. Storyboards are
saved in files with .story extension.
Storyboards provide a screenflow view that lets you visualize complex navigation flows between screens in a
more graphical way.
You can also use storyboards for their multi-page PDF and HTML export capability. Just create a storyboard with
desired screens and then export them .
Use F5 to launch a full-screen presentation of your storyboard.
Creating a New Storyboard
Ensure that you have at least one project in the workspace. To create one use File > New > Project. Then create a
new storyboard by selecting File > New > Storyboard:
25
Adding Screens
To add a screen to a storyboard you can use several methods:
Use the Add Screen… button in the editor. You can add multiple screens at once or choose to create a
new one.
• 
Drag & Drop screen files directly from the Project Explorer view into the editor. You may have to
uncheck the Link with Editor option ( ) in Project Explorer view first.
• 
Copy & Paste screen files from the Project Explorer view into the editor.
• 
Nesting Storyboards
Storyboards can be nested to create more modular screen flows. To add a nested storyboard use one of these
methods.
Drag & Drop storyboard files directly from the Project Explorer view into the editor. You may have to
uncheck the Link with Editor option ( ) in Project Explorer view first.
• 
Copy & Paste storyboard files from the Project Explorer view into the editor.
• 
Editing Storyboards
Use drag & drop to change the order of screens in a storyboard. Screens can also be rearranged using the Outline
view. You can also use drag & drop to arrange screens in the screenflow view.
When working with storyboards you’ll often need to create slight variations of the same screen. Components let
you easily achieve this without unnecessary content duplication. Right click on a screen in the storyboard and
choose Clone Screen…. In the opened wizard you are given the option to use a component instead of copying the
contents of the cloned screen. This option allows to quickly create derived screens that are automatically updated
when the original screen changes. You can also choose to create a simple copy.
You can easily rename screens and storyboards directly from the Storyboard Editor. Right click on the object you
wish to rename and choose Rename.
WireframeSketcher User Guide
26
Linking Screens
Screen links let you create simple interactive prototypes for your website or software application.
To link two screens select a widget and then specify the linked screen using the Links view. Widgets with
multiple items allow you to specify a link target for each of them. Certain text widgets also let you use link syntax
to highlight parts of text that you can then specify a link for. A small yellow overlay icon lets you quickly see
where your links are. You can click on it to open the link.
Linked screen can be located in any folder or even in another another project. To choose the linked screen, click
the Link to Screen… icon and search for the desired screen.
Clicking on the drop-down arrow icon besides the Link to Screen… icon will present you with more linking
options:
Link to Screen Clone… is a quick way to clone the current screen and link to it, all in one step.
• 
Link to Web Address… lets you specify an external link, like http, mailto or another type. External links
are marked using a slightly different overlay icon in the Screen Editor.
• 
Quickly choose from a list of screens located in the same folder with the edited screen.
• 
Another way to link screens is to drag & drop screen files from Project Explorer view into the Screen Editor. This
is done by dragging screen files while holding a modifier key (Alt or Ctrl+Shift on Windows, Ctrl on Mac,
Ctrl+Shift on Linux). When you do this the mouse cursor changes to indicate linking mode and widgets that can
be linked are highlighted under the cursor while you drag over them. Drop the screen file to create the link. Note
that you may have to uncheck the Link with Editor option ( ) in Project Explorer view first.
To remove a link for an item use Remove Link icon.
To test your prototype launch the full-screen presentation mode. Clickable areas are highlighted and clicking on
them takes you to the linked screen. You can disable link highlighting from the context menu. Arrow keys let you
go back to the previous screen.
You can also create clickable PDF and HTML documents. To do so put all the linked screens of your prototype
into a storyboard and then export it.
27
Documents you may be interested
Documents you may be interested