Framework and MVVM

Framework and MVVM

Intersoft ClientUI® is built on the top of powerful framework and standards-compliance architecture enabling various UI challenges to be addressed in an elegant and efficient manner. Many of the frameworks that power ClientUI's controls - such as routed events, routed commands, binding library, drag-drop, MVVM framework and more - are exposed to be available for public use.

Live Demo Gallery Watch Video

Event Aggregator

Messaging Across ViewModel

Based on the observer pattern, Event Aggregator allows multiple subscribers registration and multiple publishers from different, independent objects. As a result, Event Aggregator is an ideal solution for the communication across ViewModel instances in loosely-coupled manner. Click here to learn more about Event Aggregator implementation in the ClientUI Framework.

Solid Event Architecture

ClientUI Event Aggregator is a lightweight event framework that employs highly-efficient and developer-friendly API, allowing you to subscribe and publish events in just a single line of code. Leveraging weak references by default, Event Aggregator is safe for extensive use without causing memory leaks. It features automatic event detach when the instance of which the event is defined has been disposed.

Background Thread Invocation

In addition to the default synchronous thread, Event Aggregator also supports background thread invocation which is useful to improve application’s responsiveness by executing the long-running code in the background thread.

Supports Event Filtering

Event Aggregator supports event filtering which allows you to listen only on event publications that match certain conditions. The delegate function in the event filtering gives you granular control over the filtering logic and process.

Back to top

Command Reference

CommandReference is a multi-purpose component that facilitates declarative XAML binding between KeyBinding and Command in a MVVM pattern application. Although it can be used in various MVVM scenarios, one of the most common usages is to connect InputBinding - such as MouseBinding or KeyBinding - to a Command defined in the ViewModel.

For example, a contact application with edit and delete buttons. When no contact is selected, both buttons are disabled, and vice versa. Select a contact and the two buttons will be enabled. The CommandReference lets you invoke the SaveCommand through keyboard access, such as by pressing Ctrl, Shift and E key simultaneously.

Live Demo Gallery

Back to top

Delegate Command

Built specifically to support MVVM design pattern,DelegateCommand is the main commanding component that allows you to define the Commands and its logic in a ViewModel and bind it to the View through the Command property. Furthermore, the DelegateCommand takes advantage of the routed command concept in which the IsEnabled state of the command sources will be automatically synchronized depending on whether the command can be executed.

Live Demo Gallery

Back to top

DragDrop Library

Fluid Drag-Drop Experience

Adding a smooth drag and drop experience to your existing business applications is easy with ClientUI through simple XAML declaration. Even better, the comprehensive library is extended to support Silverlight and WPF platforms – delivering superior and consistent dragdrop behavior with no additional code changes.

Customizable Drag Effects

When an object is being dragged, a shadow copy of the source object is created. You can further modify the DragEffect property. There are four, Copy, Link, Move, and Space.

Customizable Tooltip

Each DragEffect property comes with predefined tooltip image and text. You can customize these using TooltipIcon and TooltipText properties. Use TooltipOffset property to set the tooltip position and TooltipLatency to control the tooltip text show delay.

MVVM-ready Architecture

All ClientUI controls that built upon the DragDrop Framework are engineered with MVVM-ready architecture which allows you to obtain the dropped items in the ViewModel. The dropped items can be accessed through the DroppedItems property, which is populated before the dropped items are added to the designated items source.

Drag API

In addition to attaching drag behavior declaratively in XAML, you can also attach drag behavior to a UIElement using the provided API, DragDrop.DoDragDrop method.

Attach Drop Target

With DropTargetBehavior, you can easily customize the tooltip when an object is being dragged over to a target element by specifying the TooltipIcon property and the TooltipText property. You can also determine the drop action from DropBehavior property if the drop target is a Panel element.

Drop Behavior

There are three applicable drop behaviors, AppendChild, Replace, and Custom. AppendChild will remove the dragged object from the original source and append it to the drop target’s children. Replace will completely remove the dragged object and replace it on the drop target’s children. Custom is an advanced mode which allows you to implement your custom drop behavior.

DragDrop Scope

When an object is dragged, the ClientUI DragDrop Framework detects the available drop target within a certain scope determined by the DragDropScope property. The default value for this property is Global which means that the scope is set to the visual root of your application. This means you can drop it to any valid drop target within your application. Use the Parent mode to restrict the valid drop zone.

Integration with ItemsControl

ItemsControl such as ListBox (native), UXListBox, UXFlow, and many others use Panel to arrange their items. You can change the Panel used to arrange those items from ItemsPanel property. This gives you the flexibility to choose any panels in order to control the arrangement of your items. You can use UXPanel to easily add drag and drop functionality to your items control.

DragDrop Events

ClientUI’s dragdrop operations are event-driven based model. Both the drag source and the drop target use a standard set of events to handle its operations.

Working with Data Object

It is very common that during a dragdrop operation, data and information exchange occur especially in line-of-business applications. ClientUI DragDrop architecture is thoughtfully designed to enable this requirement.

Query Data Object

Because a single data object can contain an arbitrary number of data formats, data objects facilities a retrieval mechanism to obtain a list of available data formats.

Retrieve Data

Retrieving data from a data object of a particular format involves calling one of the GetData methods and specifying the desired data format. One of the GetDataPresent methods can be used to check for the presence of a particular data format. GetData returns the data in an Object. Depending on the data format, this object can be cast to a type-specific container.

Back to top

Hybrid Command

HybridCommand is an advanced commanding component featuring CanQueryStatus and QueryStatus capability in addition to the standard CanExecute and Executed command specification. With HybridCommand, you can send specific values to the command source which translates to a predefined action based on the value.

Additionally, it provides NoExecute behavior such as Disabled and Collapsed modes supported by all ClientUI controls that implements ICommandSource, i.e. all button controls, dropdowns, menus and more.

Live Demo Gallery

Back to top

Routed Command

WPF-style Commanding

ClientUI provides a full set of class libraries that implement routed command according to the specification, mechanism, and behaviors of WPF routed command. Some major libraries include CommandManager, CommandBinding, InputBinding, InputGesture, ICommandSource and a number of types to support the routed command infrastructure.

Predefined Library

ClientUI makes use of commanding extensively throughout its frameworks and user interface controls to create rich feature-sets designed with commanding semantics. Features that use commanding semantics provide more flexible ways for developers to consume the feature. Controls built with commanding semantics use loosely-coupled engineering that separates the actual logic implementation from the feature. This allows a specific feature or functionality to be reused easily.

Advanced Routed Command

ClientUI extends the routed command model further by introducing hybrid routed command, a more advanced routed command that supports two kind of state synchronization behavior. In addition to the IsEnabled handling, HybridRoutedCommand can automatically synchronize the Visibility property of the command sources based on the value of the CanExecute in the event data.

Commanding in MVVM

Despite its full support for routed command concept, ClientUI extend it further to embrace MVVM pattern. It introduces DelegateCommand, a specialized command object that can be used to handle a delegate directly in the view model, and still can be bound to the view through binding.

Back to top

Routed Events

Routed event is a powerful event framework in modern client user interface platform which notifies any occurring event to its parent or child through visual tree walkthrough. ClientUI provides full-featured routed event framework that implements complete specification compatible with WPF, such as bubbling, tunneling and direct routing strategy. It also includes EventManager, instance-level and class-level event handling APIs. Using routed event, you can create only one handler for all instances with the same type.

Routing Strategies

ClientUI supports three routing strategies, Direct, Bubbling, and Tunneling. In Direct routing strategy, only the source element can invoke handlers in response. This is analogous to the routing concept in classic
.NET application. However, unlike a standard CLR event, direct routed events support class handling. In Bubbling routing strategy, all event handlers on the event source are invoked. The routed events are later routed to successive parent elements until reaching the element tree root. Most routed events use the bubbling routing strategy. In Tunneling routing strategy, event handlers on the element tree root are initially invoked. The routed events then travel to successive child elements along the route, towards the node element which is the routed event source.

Extended Routed Events

To ease Silverlight development and maintain cross-platform consistency with WPF, ClientUI provides additional direct, bubbling, and tunneling routed events, mainly input and focus events. There are also numerous routed events inside ClientUI Framework, such as: dragdrop framework, application framework, and more.

Add Event Handler

There are many ways to add an event handler for a routed event. You can do it declaratively on XAML by specifying the event name to an element as an attribute and define the event handler name based on the attribute value. You can also attach a routed event in C# manually. The last method is to use instance-level based AddHandler method.

Event Handling

When a routed event is raised against an element, the event will travel up or down according to the routing strategy until it reaches the visual tree’s end point. An important concept in routed event is that it allows you to handle a routed event on a specific node and stop the event from being routed to the next node in the visual tree. This concept is referred as "Marking a routed event as handled".

Back to top

Binding Framework

ClientUI provides an essential binding framework to simplify UI development through declarative XAML binding capability. The ClientUI binding framework includes PropertyBinding, BindingDescriptor and DataBinding engine.

PropertyBinding is invented to address the lacking of Silverlight's Binding support for Style, Setter and Template. This means that you can now specify the {Binding} directly in the XAML which eliminates extensive plumbing code.

BindingDescriptor enables you to elegantly perform data binding to an element in the parent visual tree using WPF-similar semantics such as using FindName or FindAncestor with configurable AncestorType and AncestorLevel; while the DataBinding engine provides an easy way to clear validation errors which can be defined directly in XAML.

Live Demo Gallery

Back to top

Close window
back back back forwardforwardforward