Dock panels can be in one of the following different modes, which can be set programatically or by the end user:
Docked Mode: The most common option is to make the child dock to a side of the container. It can be docked Left, Right, Top, or Bottom.Floating Mode: Child panels can also be dragged around by the end user to float at any location on the desktop. Floating can also be set up programmatically.
Docked Tabbed Mode: Two or more child panels can be docked at the same location, one over the other. Users can switch between these panels using the tabs that appear automatically in this tabbed mode. Again, this can be set up programatically too.
AutoHide Mode: In AutoHide mode, the panels that are not being used automatically collapse into the frame of the container (like the Toolbox in VS.NET) and expand when the mouse hovers on the tabs representing these collapsed panels. These are also known as pinnable tool windows.
VS.NET-Style Docking
A dock panel can be dragged to any part of the parent window and can be docked/floated at any suitable position. While dragging, the drag cue can be provided in 3 different ways: Border, Shadow, or Normal.
Drag Cue Modes
While dragging, the "Drag Provider" will provide drop cues to help you visualize how a child panel will be docked when you release the drag.
While dragging you can also optionally force a panel to dock only to specific sides (e.g. left or right) and prevent docking to other sides (e.g. top and bottom).
Restricted Docking
You can even support drag-and-drop of child panels from one Docking Manager to another if they are "linked".
Linked Docking Managers to Aid Drag-and-Drop between Them
Within a Docking Manager, optionally, you can choose to maximize/minimize/restore one of the child panels using the optional, faimiliar MDI-style icons in the panel's frame.
Child Dock Panel in Normal and Default Maximized States
Child Dock Panel in Normal and Full Screen Maximized States
There is also the ability to set a fixed width and/or height for a dock panel when in docked state.
10 different built-in themes provide you great flexibility in customizing the look and feel of your application.
Built-in Docking Manager Themes
You can also fully customize the look and feel to any corporate theme or style.
Custom Docking Manager Theme
The Essential Tools Ribbon framework includes all the controls and components that are required to build Office 2007- and Office 2010-style ribbon layout and functionality in your applications. Design the UI in either the VS.NET designer or Expression Blend.
In spite of all the richness, the Ribbon control is fully compatible to use in XBAP mode.
Office 2007 UI Created Using Ribbon Controls
Office 2010 UI Created Using Ribbon Controls
Ribbon tabs let you categorize the commands that you want to display to end users. They can contain ribbon bars and ribbon buttons.
Ribbon Tabs
Within a ribbon tab, bars are used to group ribbon buttons. This allows you to create another level of categorization for commands and makes it easy for end users to locate needed commands.
Ribbon Bars
Ribbon buttons can be fully integrated within the WPF command framework. They expose a Command property that lets you simply specify the command to invoke (application or custom commands). You can also optionally use the CommandParameter and CommandTarget settings.
These buttons can be displayed in large and small button modes.
Large Button Mode
Small Button Mode
There is also a special split button that can be placed in a ribbon that users can use in two different ways. It can be used as a normal button that users click to invoke a default command, or as a drop-down menu to select a command from a list.
Split Button—Drop-down Expanded
A ribbon bar also has the ability to display a scroll-bar button that can be used to navigate through contents horizontally when the width of a control is less than the width of its contents.
Horizontal Scroll Bar for Ribbon Bars
The PinnableListBox control allows you to display a list of items just like a list box, but also providing the end user an option to "pin" certain items to the list. You could then interpret the "pinning" as
whatever is appropriate to your application logic. A good use case for this functionality in the Recent Documents list in the Microsoft Word application menu. The items in that list are pinnable, if you want to prevent those items from disappearing from the list.
The PinnableListBox control can be used on its own or as part of another control such as the Ribbon control. The list of items in the control can be sorted by any criteria, including name,
date of last modification, and more.
Stand alone PinnableListBox
PinnableListBox used inside Ribbon
The Ribbon control provides you the ability to embed a Gallery control within the ribbon.
The gallery can be embedded in two modes, in-ribbon and drop-down.
Gallery Control in Ribbon without Expansion Support
Gallery Control in Ribbon with Expansion Support
The Ribbon control extends its gallery support to gallery filters, which is a practical tool used to categorize and filter gallery elements.
Ribbon Control with Gallery Filter
A quick access toolbar (QAT) is used to render a set of ribbon buttons that are commonly used in most applications. It is rendered right next to the Application Menu button to make it more accessible to end users.
It can also be easily customized by end users utlilizing the built-in QAT context menu. End users can also choose to place it above or below the ribbon, remove certain commands from the QAT, and add other commands to it.
The QAT is also designed to prevent the user from adding multiple instances of the same command to the toolbar.
Quick Access Toolbar with Context Menu Expanded
There is also a Customize Quick Access Toolbar dialog box that can be invoked by end users. As the name suggests, it can fully customize a set of commands to be displayed in the QAT; the full set of commands available in the application can be exposed to the end user.
Customize QAT Dialog Box
The QAT has support for hosting custom menu items in a drop-down menu in a ribbon, creating menus similar to Outlook 2007.
Custom Menu Items in QAT Drop-Down Menu
The Ribbon control ships with a number of built-in themes such as Office 2007 Silver, Blue, Black, Blend, Office 2003, Shiny Red, and Shiny Blue. You can also use Expression Blend to customize the look and feel to suit your needs.
Ribbon Control—Built-in Themes
Ribbon Control—More Built-in Themes
The DocumentContainer control comes with support for VS.NET-style tabbed document interface (TDI) and traditional multiple document interface (MDI) modes.
In TDI mode, tab groups can even be created in code.
The state of child windows can be peristed for use across application sessions. The containers also come with several built-in, common themes.
Document Container—MDI Mode
Document Container—TDI Mode
In TDI mode, parent windows can optionally be displayed in full screen mode. The tab header is then visible only when the pointer is moved to the top of the window.
Toolbar in a Document Container
You can place a toolbar along with headers in the header panel of TDI items in a document container. The TDIToolBarTray property is used to do this. Toolbars can be stacked in the toolbar tray.
Toolbar Support for Document Container
The DocumentContainer control comes with different modes of window switching for intuitive navigation. The functionality of the window switchers is illustrated in the following images.
Document Container—Vista Flip
Document Container—Visual Studio 2005
Document Container—Quick Tabs
The TreeView provides you all the basic features you would expect from a enterprise grade tree control:
Multiple Node Selection
In Line Editing
Checked Noded
Nodes with Images
Templatized Nodes
... and much more!
Multiple Nodes Selection in TreeView
Checked Node with Images in TreeView
There is very good built-in support for dragging nodes within or across tree controls in the TreeView. You can also select one or more nodes and drag them all. You can choose to even use our "fake drag indicator"
which will indicate what is being dragged and where exactly the drop will happen.
Appropriate events raised while dragging and dropping will also allow you to control / prevent drop on certain locations.
Default dragging shows where the drop will occur with a drop-cursor
Dragging with Fake Drag Indicator shows where exactly the drop will occur
The Editors Package includes a whole list of controls that allow you to build rich form-filling user interfaces using culture-aware, localizable, and skinnable editor controls.
All the common editors you would need to create form-filling applications with WPF styling and data binding patterns are available, including:
DateTimeEdit TimeSpanEditor MaskedTextBox PercentTextBox CurrencyTextBox DoubleTextBox IntegerTextBox UpDownTextBox
Common Editors
The DateTimeEdit, CalendarEdit, and Clock controls provide a very rich set of controls to edit date-time values.
The CalendarEdit and Clock can be used separately or as part of the DateTimeEdit in the dropdown as shown below. There is also support for the following features in the DateTimeEdit:
Support for empty date with ability to specify any "Null Date String".Min and Max DatesDate Display FormatAbility to disable date selection—allowing only month or year selection.
Date Editors
The TimeSpanEditor is also a very unique control that allows you to edit time spans as opposed to a specific time.
Time Span Editor
The AutoComplete control adds the common auto-complete paradigm to the textboxes. The control is loaded with features to help you customize the behavior and look and feel in many different ways.
Data Sources: The source for the list can be from any custom list or from a file path or registry. History: Include end-user edited values in a History collection that is persisted in the client machine for future sessions. Auto Append: Besides Auto Suggest the control can also Auto Append the top item in the list to the textbox. Custom Filtering: Dynamically filter the items that will make it to the drop down as the end-user types in text. Selection Mode: Single or Multiple items can be selected.
AutoComplete in a Text Box
The RangeSlider is an advanced slider implementation that allows the end user to pick a single value or a value range from the slider.
Range Selection in the Slider
Single Value Selection in the Slider
The slider also supports the following features:
Vertical or Horizontal Orientation Show or Hide Handles Ticks on both sides or just a single side, or not at all. Minimum and Maximum values. Tick Frequency, Large Change and Small Change. Custom labels for ticks.
The PropertyGrid control is a great way to browse the properties of an object at the top level as well as inside nested levels of complex properties. Besides some powerful built-in editors for properties,
you can plug in any kind of custom editors. It also has support for showing a description panel at the bottom, and also the ability to sort, group, and search by property names. This provides an interface and behavior that is similar to
that of the Windows Forms PropertyGrid.
PropertyGrid editing a ButtonAdv object
PropertyGrid Color Picker for editing Foreground property
Our MenuAdv control provides you with all the basic menu functionality and more. It supports several orientations, check box- and radio button-type items, scrollable menus, keyboard navigation, and more, along with WPF-compatible features like command binding, template creation, animations, blendability, etc.
Vertical Menu with Check Boxes
Horizontal Menu with Radio Buttons
Scrollable Drop-down Menus
Menus with Icons and Keyboard Shortcuts
The GroupBar control lets you add Outlook-style navigation UI to your applications. The navigation pane supports several orientations, modes, and alignments. The control also has very good designer support, is blendable, and comes with several built-in themes.
Vertically and Horizontally Oriented Group Bars
Right to Left Alignment
Group Bar Modes
The Wizard control provides you an advanced template for creating a wizard-style UI in your applications. You simply add the content for each page and then control the state of the built-in Back, Next, Finish, and Cancel buttons.
There is also support for validating data entries before switching pages. The control also lets you provide custom images for the front page and banners to match your branding requirements.
Wizard Control with Data Validation Enabled
The TaskBar control lets you add Windows-style collapsible, grouped command item lists to your applications. The control can be rendered in many orientations, the look and feel can be templated, is blendable, and comes with several built-in themes.
Horizontally Laid out Taskbar Items
Vertically Laid out Taskbars
Text formattingParagraph alignment and indentation featuresInsert an image or any UIElementTables supportPage layoutImport and export to .doc, .docx, HTML, XAML, .txtPrinting and zoomingKeyboard shortcutsUndo and redo supportCommand supportClipboard supportRead only mode
There is built-in support for editing in a page layout or flow layout. The built in Zoom Bar in the footer also allows you to visualize all the pages in the document in a single view.
All common text formatting features like font settings, background, foreground, strike through, underline, baseline, etc. are supported.
Sample Formatted Content in RichTextBoxAdv
You can even select a text (or even an image) and make it a hyperlink.
Inserting a Hyperlink on the Selected Text in the RichTextBoxAdv
There is full-fledged support for inserting a table into the content with support for inserting rows/columns before/after, etc. There is even support for merging multiple cells into one. End users can easily perform all these operations using our built-in ribbon.
Sample Table Content Created in RichTextBoxAdv
Easily insert images into the content and align them wherever you want it.
Sample Rich Text Box Content with Image
And since this is Silverlight, you can even insert any UIElement in the XML content that represents the document.
The rich Ribbon control on top provides a rich and familiar Word 2010 like interface for your end-users.
Ribbon in RichTextBoxAdv Control
There is also a context menu and a context toolbar, that helps you insert and perform some common operations at a selected position in the content.
A Context Menu and Context Toolbar at a Selected Location
You can import and export to popular document formats:
Word,HTML,XAML, andplain text.
You can also cut, copy, and paste content from one place to another within a RichTextBoxAdv.
No professional editor can be without undo/redo support, so we have added support for that as well.
Another important feature of any professional editor is built-in printing support. The RichTextBoxAdv includes support for that as well, with the ability to invoke the Print command from within the Ribbon command bar.
Printing Command from inside the RichTextBoxAdv Control's Command Bar
The skin manager framework provides a convenient way to apply a consistent appearance to all the controls in your applications for both Syncfusion and WPF Framework Controls.
Office 2007 Theme Applied to WPF Controls Using the Skin Manager
Metro Theme Applied to WPF Controls Using the Skin Manager
The different brushes used by the individual themes are also exposed to be used by any custom rendering you might be doing in your applications.
Brushed used within each Theme
The vector image library includes more than 700 images suitable for various domains such as banking, charting, computers, construction, e-commerce, education, finance, flags, food, medicine, multimedia, and weather forecasting.
Since the images are vector-based, they scale very well when resized or animated, and are perfect for any WPF application. All these icons are individually handcrafted with pixel-perfect detail.
Vector Icon (top) and a Raster Icon (bottom)
Along with our vector image library, a vector image utility feature is available. This utility allows you to export a selected image in XAML format as well as the most common image formats such as .bmp, .jpg, .gif, .tiff, .wdp. This utility can be used to save the image in desired width and height such as 32*32, 16*16, etc., in any available image format. So that these images are not restricted only to the WPF platform, images created using this utility can be used in any application wherever an image is required.
Resized Vector Image
A vector image uses paths to define the shape of an image as opposed to raster images where the shape is defined using individual pixels. Being defined by paths, vector images are ideal for WPF applications in which images are typically resized, zoomed, animated, etc., because the image resolution is retained.
The following image shows a vector graphic.
Vector Graphic
When raster images are scaled up, they completely lose their quality and
become blurred. The larger the scale, the more jagged they become due to aliasing effects in raster graphics.
Vector images remain smooth under any scales.
Raster Images with Aliasing Problem
Vector Images without Aliasing Problems
Vector images zoom smoothly because their shapes are defined by paths rather than pixels.
Image Showing Raster Tracing
The NotifyIcon control allows you to add an icon in the notification tray of the desktop with support for different animations and shapes.
Notify Icon in System Tray
The NotifyIcon control has the option to set various balloon tip icons such as warning, info, error, and none.
Warning Balloon Tip Icon
The NotifyIcon control has options to control the display of the balloon tip header. The balloon tip header can be displayed or hidden using the BalloonTipHeaderVisibility property.
Hidden Balloon Tip Header
The NotifyIcon control has options to set various ballon tip shapes such as balloon, rectangle, and rounded rectangle.
Rectangle Balloon Tip Shape
Custom colors can be applied to the header and the information area of the NotifyIcon control.
Customized Balloon Tip
The Range Slider is a control with two thumbs showing a selected range. It lets users input two values: typically an upper and a lower bound for the two thumbs. With handle buttons, ticks, and label support, the Range Slider provides enhanced feature support for a standard slider control.
Range Slider
The Range Slider control supports both horizontal and vertical orientations.
Range Slider-Horizontal Orientation
Range Slider—Vertical Orientation
In addition to dragging thumbs, the Range Slider control supports handle buttons, which when pressed, cause the thumbs to be displaced over a specified distance. Handle buttons can be visible or collapsed, and they can be customized.
Range Slider with Handle Buttons
Range Slider without Handle Buttons
The Range Slider control supports ticks that can be placed at a specified frequency.
Range Slider Tick Frequency Set to 10
In addition to numeric labels, the Range Slider control also supports custom labels.
Range Slider-Custom Label Support
Nine basic themes have been added for the RangeSlider control—Office 2007 Blue, Black, and Silver, Office 2003, Office 2010 Blue, Black, Silver, Blend, and Visual Studio 2010.
The following images illustrate the various skins applied to the RangeSlider Control .
Office2007Blue Theme
Office2007Blue Theme
Office2007Black Theme
Office2007Silver Theme
Office2010Blue Theme
Office2010Black Theme
Office2010Silver Theme
Blend Theme
ShinyRed Theme
ShinyBlue Theme
VS2010 Theme
The tab-item flow direction can be positioned to either the left or the right. Thus, the user can set a tab splitter to his or her culture, as required.
Flow Direction - Left to Right
Flow Direction - Right to Left
NewButton Feature in TabControlExt is used to Display NewTabButton similar to IE7. User can handle the click action of that NewButton to add new tabitems to TabControlExt.
NewButton Displaying at last
This NewButton can also displayed at first end shown below.
NewButton Displaying at First
Template and style for NewButton can be overridden by using NewButtonTemplate and NewButtonStyle Properties. NewButtonBorderThickness and NewButtonBackground can be used to specify . BorderThickness and background for NewButton.
Minimized items can be positioned in different places such as the left, top, bottom, and right. This can be done by using the Minimized Items Orientation feature. Once a particular item is maximized, the other items will be minimized and shifted to the left, top, right, or bottom of the maximized item based on the orientation that was set.
Minimized Items Orientation - Left
Minimized Items Orientation - Top
Minimized Items Orientation - Bottom
Minimized Items Orientation - Right
A tile-view item has three states: Maximized, Minimized, and Normal. If a particular item is set to be maximized, that item will display in its maximized state, and other items will be minimized when the control is loaded. Users can then rearrange the items according to their need.
First Item Set to Maximized
Items Set to Normal
Styles and skins can be applied to the tile view to enhance the appearance of an application. The Tile View control has built-in skin support, which includes skins such as Office 2007 Blue, Black, Silver, Office 2003, Blend, Shiny Red, and Shiny Blue.
Tile View with Office 2007 Blue Skin
Tile View with Office 2007 Black Skin
Tile View with Office 2007 Blue Skin
Tile View with Blend Skin
Tile View with Default Skin
