Sunday, February 15, 2015

Introduction to LinsUIWPF Suite



        







Windows Presentation Foundation Solution

LinsUIWPF Suite is a toolset for building Windows 7/8 style like user interface for Windows Presentation Foundation application. It enhances the appearance of UI with gradient background and elegant layout. Users can easily move a Window/Panel/Toolbar and dock it anywhere they like. All tool items and tool containers (such as Context Menu, Menu, Ribbon Menu, Toolbar and Tasks Screen) are customizable. Composite Command gives users the ability to execute several commands only at one click. The Help (Video) button of a command tooltip links the command to its documentation. The Search (Video) function box helps users to use keyword to locate the functionality inside the application. Different user can export his favorite workspace layout and tool items’ setting as XML files. The XML files can be imported back any time. A list of themes can be chosen for different visual appearance selection.  
It supports two modes, Normal and Metro, both of them supports multiple document interface (MDI) and tabbed document interface (TDI), and both can be mixed-used. Users can switch between these two modes. All controls provide a high-performance, animation, and visually appealing interface. It is very easy to create a metro screen, ribbon menu, menu, context menu, or toolbar and assign it to the main frame, a document, or a panel.
The Tabbed Document Group (TDG) feature is useful for minimizing screen space usage while allowing an application to expose a large amount of data. Both individual form and TFG can be dragged to any place or docked to top, bottom, left, right, or center of MDI client. One individual form can be dragged onto another individual form to create a new TFG. Individual tab can be dragged between TFGs. The Minimize feature hides an individual form or TFG under the status bar. The Maximize feature zooms out an individual form or TFG to the whole MDI client area. The Group feature of TFG enables users to do page comparison among tabbed groups easily.
The Tabbed Panel Group (TPG) feature is useful for minimizing screen space usage while allowing an application to expose a large amount of data. Both individual panel and TPG can be dragged to any place or docked to top, bottom, left, or right of application frame. One individual panel can be dragged onto another individual panel to create a new TPG. Individual tab can be dragged between TPGs. The Pin button auto-hides an individual panel or TPG to top, bottom, left, or right frame of the application while the panel or the TPG is still open.
Tool items are customizable and editable. Tool item can be dragged between tool containers. The General page enable user change tool container’s appearance, such as font size, face, color, style, and icon size. The Tool Container page allows user to create a new menu or a new toolbar for any panel or main frame. The Composite Commands page let user choose multi commands in any order to create a new command, which is Composite Command (CC). CC gives user the ability to execute multi-command by only one click.
It is easy to use LinsUIWPF Suite; it barely requires code change to embed it into an existing project.
1.  Normal
In this mode, everything works as traditional windows do.

Ø  System Button
There is a system dropdown button. This button is located at the upper-left corner of the main frame in Normal mode (Video); otherwise, it is located on the bottom extended panel (Video). Its dropdown list items are shown as follows.

·       Windows – It pops up all existed documents list. The users can activate any document from the list.
·       Panels – It pops up all existed panels list. The users can show/hide any panel from the list.
·       Toolbars – It pops up all existed toolbars list. The users can show/hide any toolbar from the list.
·       Tile – When this is selected, a docked document will be stretched to fit into the view area and is non-resizable.
·       Number of Documents in View – When Tile is selected, users can select the number of the docked documents fit into the view area.
·       Save Workspace – It saves current workspace layout.
·       Import Workspace … – It lets users import a previous workspace layout setting.
·       Export Workspace … – It exports the current workspace layout setting into a XML file. 
·       Customize … – It allows users to customize all tools, which include Metro Screen, Toolbars, Ribbon Menus, Menus, Context Menus, and all buttons.
·       Application Style – The user can switch between Normal and Metro mode. 
·       Themes – The user can switch between different themes. 
Ø  Search Function
There is a “Search” box on the upper-left corner.
Users can use it to search the name, tooltip, and detail description of all commands with the given keyword, and show all the found results on the “Search” panel as follows (Video),

2.   Metro
In this mode, it has two screens, Metro Tasks Screen and View Screen. The user can toggle the “Tasks browse” button to switch between these two screens. It can also switch from Metro Tasks Screen to View Screen by clicking at a task button.
Metro mode allows the user to utilize the available screen space. When mouse moves close to a border of the frame, if there are tools attached to that border, an extended panel will slide out. Clicking at the “Show/Hide”  (Video) button on the extended panel will bring the tools into the view or move away the tools from the view. Clicking the “Go to previous window”  (Video) button on the bottom extended panel will move the previous document into the view area. The “Go to next window”  (Video) button will move the next document into the view area. The user can also use the scrollbar to move the docked documents into the view area.
Ø  Metro Tasks Screen.
The customizable task buttons will be displayed on this screen. The simple information can be put over each task button. Both the Header and the Footer are customizable too.

·       Tasks Browse  – Users can toggle this button to switch between Metro Tasks Screen and View Screen.
·       Tasks Scrollbar – Users can scroll to see the task buttons which are outside the visible area.
Ø  View Screen
The documents, panels, and tools are displayed on this screen.
·       Go to Previous Window – It will move the previous window into the view area.
·       Go to Next Window – It will move the next window into the view area.
·       Extended Pane – When mouse moves close to a border of the frame, if there are tools attached to that border, an extended panel will slide out.
·       Show/Hide Pane – Clicking at the “Show/Hide”  (Video) button on the extended panel will bring the tools into the view or move away the tools from the view.
·       Tasks Browse – Users can toggle this button to switch between Metro Tasks Screen and View Screen.
·       Windows Scrollbar – Users can scroll to see the docked windows which are outside the visible area. 
3.  Customization Mode
Click at the System Button -> Cutomize…, it will pop up the Customization sheet which allows users to customize all tools which include Metro Screen, Toolbars, Ribbon Menus, Menus, Context Menus, and all buttons.
It has following tabs,
·       General tab – It allows users to customize the general settings of tool items for Context Menu, Menu, Ribbon Menu, and Toolbar generally (Video). This tab will be invisible when it is in Metro Tasks Screen mode.
User can select a container type from the Container Type dropdown list, and enable the Customization radio button for it. Then users can select their favorite settings and Apply for it.

·       Commands tab – It allows users to customize individual tool item (Video). Users can also delete any user created tool item with this tab (Video). This tab will be invisible when it is in Metro Tasks Screen mode.
Users can select a tool item from the Commands list, and select their favorite setting, ToolTip, or even the documentation linked to the tool item and Apply for it.
Users can also drag a tool item from the Commands list and drop it anywhere they like.

·       Composite Commands tab – It allows users to create a new command which is consisted of a group existing commands (Video), or delete an existing composite command (Video). Users can also use this tab to modify any existing composite command. This tab will be invisible when it is in Metro Tasks Screen mode.
The procedures to create a composite command are listed as follows,
1).       Select the New Composite Command item from the Composite Commands list.
2).       Select at least 2 items from the Available Commands list into the Selected Commands list.
3).       Select the favorite settings.
4).       Click at the Create button at the lower-left corner.
5).       The new created composite command will be shown in the Composite Commands list. Now users can drag it and drop it anywhere they like.

·       Tool Container tab – It allows users to add/remove tool items into a tool item container like Context Menu (Video), Menu (Video), Ribbon Menu (Video), and Toolbar (Video). Users also can use this tab to modify the settings for both tool items and tool item container. Users are able to create a new toolbar (Video) or delete a user created toolbar (Video) with this tab too. This tab will be invisible when it is in Metro Tasks Screen mode.
The procedures to edit/modify a tool container are listed as follows,
1).       Select a tool container type from the Container Type list.
2).       Select the tool container which you want to edit/modify from the containers list. The selected tool container will be displayed at the editor area.
3).       Drag an item from New Sub-containers list, Composite Commands list, or Commands list and drop it into the selected tool container at the editor area.
4).       Select another tool container or close the Customization sheet.

·       Tasks tab – It allows users to modify the settings for task buttons. Users also can drag any task button from this tab and drop it into Metro Tasks Screen (Video). This tab will be visible when it is in Metro Tasks Screen mode.

·       Task Groups tab – It allows users to modify the header of a task group (Video), or create a new task group (Video). Users also can drag any task group from this tab and drop it into Metro Tasks Screen (Video). This tab will be visible when it is in Metro Tasks Screen mode.
The procedures to create a new task group are listed as follows,
1).       Select the New Task Group item from the Task Groups list.
2).       Select the favorite settings and enter a group name for it.
4).       Click at the Create button at the lower-right corner.
5).       The new created task group will be shown in the Task Groups list. Now users can drag it and drop it into the Metro Tasks Screen.

4.  Import and Export Workspace Layout and Customization Settings
·       Export
Click at the System Button -> Export Workspace…, it will pop up the following Export Workspace dialog which allows users to export the current workspace layout into a *.xml file and tool items customization settings into a *.cus file (Video).

·       Import
Click at the System Button -> Import Workspace…, it will pop up the following Import Workspace dialog which allows users to import a previous workspace layout file and a previous tool items customization settings file as the active workspace layout and tool items customization settings (Video).
                       
References: