Intersoft Solutions Corporate Blog » 2010 R2

Use UXSliderBar to Simplify Data Entry

martinlie — Wed, 23 Mar 2011 19:17:40 +0000

One of the powerful controls introduced in ClientUI 4 is UXSliderBar, an input control that enables users to select a value or range of values by sliding the UXThumb along the slider track through drag and drop operation in the thumb.

In this post, I will share how to use UXSliderBar to create a simple application to input grade for student.

Configuring the UXSliderBar

The scenario that I want to achieve is, create a sliderbar and set the value from 0 to 100. When user selects a value in the slider (let’s say 60, 85), the grade (A, B, C, D) will be displayed in the TextBox based on the selected value.

First of all, drag a UXSliderBar control from Visual Studio Toolbox. You need to configure its basic settings, such as Maximum, Minimum, SmallChange, and LargeChange.

Minimum and Maximum property indicates the possible lowet and highest value in the slider bar. SmallChange and LargeChange indicates the value to be added or subtracted from the value of UXSliderBar.

As you can see, the value becomes crowded because I want to display the value range from 0 to 100. This is where Ticks property is very useful. It is used to represent the position of the tick bar items displayed in the tick bar.

I’m going to set the ticks to 0, 55, 65, 75, 85. Therefore, the UXSliderBar will display something like following:

In the case where the ticks are only displayed in specific positions, it is difficult to select a specific value, for example 79, in the slider bar. Using AutoTooltipVisibility property, you can display a tooltip containing the selected value when you drag the thumb. In addition, AutoTooltipFormat is used to set the format string applied to the content of the tooltip.

Initially, when you bind the value from UXSliderBar into the Textbox control, it will only display the number. In this case, I want to show the Grade instead. Means that I need to add a converter in order to achieve this scenario.

Creating Grade Converter

In order to show the grade in Textbox, we need to bind slider’s value to Textbox and use data conversion to convert the grade into string.

Here is the code on how to bind the slider’s value to Textbox.

Now, you have successfully bound slider’s value to Textbox. But, in order to convert the number into string, you need to add a converter.

For more information on how to use a converter, please refer to Data Binding Overview on Data Conversion topic.

I create a class called GradeConverter.cs. In this class, I will create a converter by creating a class that inherits from IValueConverter and put a validation to convert the grade value into a string.

The GradeConverter.cs looks like the following:

using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;

namespace ClientUIMVVMBlogApp.Converters
{
    public class GradeConverter : IValueConverter
    {
        public object Convert(object value, Type targetType,
                              object parameter,
                              System.Globalization.CultureInfo culture)
        {
            Double grade = (Double)value;
            String result = value.ToString();

            if (grade < 55)
            {
                result = "E";
            }

            else if (grade >= 55 && grade < 65)
            {
                result = "D";
            }

            else if (grade >= 65 && grade < 75)
            {
                result = "C";
            }

            else if (grade >= 75 && grade < 85)
            {
                result = "B";
            }

            else
            {
                result = "A";
            }
            return result;
        }

        public object ConvertBack(object value, Type targetType,
                                  object parameter,
                                  System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Now, add the converter to the Textbox control that has been bound to the slider’s value:

There are some properties that you can optionally add to the UXSliderBar such ValueRangeVisibility and IsMoveToPointEnabled. ValueRangeVisibility is used to get/set whether the value range visual element is visible. You can see the value range visual element is in blue color.

IsMoveToPointEnabled is used to get/set a value that indicates whether the UXThumb moves immediately to the location of the mouse click that occurs while the mouse pointer pauses on the slider bar track.

Hence, the final code will look like following:

When you run the project, the final results will look like the following illustration.

When you drag the slider bar to determine the value, it will automatically convert the value into string, and place the grade into the Textbox.

Summary

In this post, you have learned how to initially create UXSliderBar and configure its basic settings. You also have been guided on how to create data conversion and bind it to a Textbox control.

For more information about the scenario, you can download the sample here. To see all available features, see UXSliderBar Overview. If you have questions or feedback about UXSliderBar or other ClientUI controls, please feel free to post them to our Community Forum.

Regards,

-Martin-

Advanced Currency Input Control for Silverlight & WPF

glayaar — Thu, 17 Feb 2011 08:06:00 +0000

One of the new controls introduced in ClientUI 4 is UXCurrencyEditor, an advanced input control specifically designed for currency and numerical input with support for .NET standard and custom numeric format.

In this post, I will share a number of useful features in the UXCurrencyEditor control, and how it can be useful in your Silverlight and WPF business applications.

Introducing UXCurrencyEditor

Often times, users are required to input numerical data such as currency, item quantity, or percentage value. Some of these scenarios also require different text between edit and display. In ClientUI 4, Intersoft has provided a versatile currency input control named UXCurrencyEditor.

Let’s take a quick example of a common business form where the currency value shows a currency sign in the display mode, but exclude the sign in the edit mode. For instance, the value of 25000 will have the following results.

EditText	25,000.00
DisplayText	$25,000.00

This could be achieved using the supported patterns in the provided EditMask and DisplayMask property. These patterns conform to the .NET standard and custom numeric format. Some patterns are only suitable for DisplayMask and have been noted in the list below.

The following table lists the supported standard and numeric pattern:

Standard Format
Valid EditMask	Format Specifier	Description
V	C, c	Currency A currency value.
V	D, d	Decimal Integer digits with optional negative sign.
X	E, e	Exponential (scientific) Exponential notation.
V	F, f	Fixed-point Integral and decimal digits with optional negative sign.
X	G, g	General The most compact of either fixed-point or scientific notation.
V	N, n	Number Integral and decimal digits, group separators, and a decimal separator with optional negative sign.
V	P, p	Percent Number multiplied by 100 and displayed with a percent symbol.
X	R, r	Round-trip A string that can round-trip to an identical number.
X	X, x	Hexadecimal A hexadecimal string.
*Currently UXCurrencyEditor standard format will not accept custom group sizes. The group sizes will always be 3.
Custom Format
Valid EditMask	Format Specifier	Description
V	0	Zero placeholder Replaces the zero with the corresponding digit if one is present; otherwise, zero appears in the result string.
V	#	Digit placeholder Replaces the pound sign with the corresponding digit if one is present; otherwise, no digit appears in the result string.
V	.	Decimal point Determines the location of the decimal separator in the result string.
V	,	Group separator and number scaling Replaces the pound sign with the corresponding digit if one is present; otherwise, no digit appears in the result string.
V	%	Percentage placeholder Multiplies a number by 100 and inserts a localized percentage symbol in the result string.
X	E0, E+0, E-0, e0, e+0, e-0	Exponential notation If followed by at least one 0 (zero), formats the result using exponential notation. The case of "E" or "e" indicates the case of the exponent symbol in the result string. The number of zeros following the "E" or "e" character determines the minimum number of digits in the exponent. A plus sign (+) indicates that a sign character always precedes the exponent. A minus sign (-) indicates that a sign character precedes only negative exponents.
V		Escape character Causes the next character to be interpreted as a literal rather than as a custom format specifier.
V	‘string’, "string"	Literal string delimiter Indicates that the enclosed characters should be copied to the result string unchanged.
V	;	Section separator Defines sections with separate format strings for positive, negative, and zero numbers.

Based on the supported pattern described above, the UXCurrencyEditor control with the currency value in the earlier scenario will have the EditMask property set to “#,##0.00” and the DisplayMask property set to “C”.

As shown in the snippet code above, you need to set the UseEditMaskAsDisplayMask property to False for the DisplayMask property to take effect.

The Value property of the UXCurrencyEditor control represents the numerical value of the EditText. We decided to use decimal data type to hold the UXCurrencyEditor value in order to accommodate large number value commonly used in financial applications.

UXCurrencyEditor also allows null value which is controlled by the AllowNull property. By default this property value is set to False, hence null value is not allowed by default. When AllowNull is enabled, users can set the value to null at runtime by selecting the whole text and press the Delete key (Ctrl + A, Del).

Negative Value

Another important feature that we think useful in financial applications is the special handling for negative value. By default, UXCurrencyEditor shows negative value in Red foreground and appends the text with – (negative sign). You can easily change the negative format by using the pattern ; (section separator). For instances, in order to show -10000 as (10,000.00), you set the negative format to (#,##0.00). See the following example.

Spin Feature

UXCurrencyEditor also supports spinning feature based on the active caret position. The Up arrow key is used to increment the value, while the down arrow key is used to decrement the value. The caret position determines the amount of value to be incremented or decremented.

5\|00.00	increment/decrement the value by 100.
\|500.00	increment/decrement value by 1000.

Localization (Culture)

One of the most difficult challenges in business forms is how the input control can be customized to adapt the currency settings of the user’s culture, such as the currency sign, group separator, and the decimal point. Luckily, UXCurrencyEditor already supports such localization feature by simply setting the Culture property to desired culture string.

The following table shows various results of the UXCurrencyEditor using different culture. The example uses a Value of 10000 and EditMask set to “C”.

Culture	EditText
CodeSnipppet
en-US	$10,000.00

en-GB	£10,000.00

id-ID	Rp10.000

Editing Behavior

Although the UXCurrencyEditor is derived from UXTextBox, the editing behavior is vastly different since UXCurrencyEditor expected numerical data entry. There are several default TextBox operations which are considered invalid and ignored in the UXCurrencyEditor such as:

Paste

Paste is only valid if all the text are numeric.
Insert

Only numerical value is valid.

Let’s take an example of UXCurrencyEditor with EditMask #,##0.00

EditText	Action	Result
Description
0\|.00	Input A	0\|.00
Input A is ignored. No change occured, the only accepted input is numerical value.
0\|.00	Input 3	3\|.00
0 is replaced by 3. Input in major number section is appended to the right and the caret position is not moved after successful insertion. If afterward user press 2 the result will be 32\|.00
0.\|00	Input 1	0.1\|0
0 is replaced by 1. Input in minor number section is appended to the right and the caret position is moved after successful insertion.
0.12\|	Input 3	0.23\|
12 become 23. The minor number format only accept 2 number, UXCurrencyEditor append the 3 to the minor number and get the 2 latest number.
1,23\|4.00	Pressing BackSpace	12\|4.00
3 is deleted, since ‘,’ is not needed in the new value ‘,’ is also omitted. Caret position stays in front of 4.
1,\|23\|4.00	Pressing BackSpace	1\|4.00
Hightligted text is deleted, ‘,’ is omitted for the same reason as above scenario. Caret positioned at the first deleted hightlight text.
\|1,234.00\|	Pressing BackSpace	[AllowNull=True] \| [AllowNull=False] 0\|.00
If AllowNull is False, reset EditText to 0.00 and positioned caret at default position. Otherwise, EditText is set to empty string.
\|1,234.00\|	Pasting text 1234567	1,234,567\|.00
The current value will be overrided with the new value. The new value is also formatted using the EditMask. It is also valid to paste value with group separator, such as 1,234,567.

Summary

In this post, you have learned the key features of UXCurrencyEditor. You can play around with the UXCurrencyEditor features through the properties, or try some readily designed samples here. To see all available features, please see UXCurrencyEditor Overview.

You will need the latest 2010 R2 bits which you can download it here. If you have questions or feedback about UXMaskedInput or other ClientUI controls, please feel free to post them to our community forum.

Regards,

Glenn Layaar

Advanced Masked Input Control for Silverlight & WPF

glayaar — Thu, 10 Feb 2011 02:53:59 +0000

One of the new advanced input controls introduced in ClientUI 4 is the UXMaskedInput control. The control allows patterned data input entry, such as phone number, social security number, and more.

In this post, I will share a number of useful features in the UXMaskedInput control, and how it can be useful in your Silverlight and WPF business applications.

Introducing UXMaskedInput

In many business scenarios, users are required to entry patterned data such as phone number, customer ID, or social security number. Such scenarios require a specialized data entry control, commonly referred as masked input, in order to validate the inputted data. In the ClientUI 4, Intersoft has provided an advanced masked input control named UXMaskedInput.

Using the common business scenarios mentioned above, for example a phone number entry requires optional country code in parentheses followed by optional area code and the required phone number separated by dash, (062)021-6601234, this could be achieved by using the supported patterns in UXMaskedInput through the EditMask property. Here is a list of the supported pattern:

Character	Description
0	Digit (0 to 9, entry required, plus [+] and minus [–] signs not allowed).
9	Digit or space (entry not required, plus and minus signs not allowed).
#	Digit or space (entry not required; spaces are displayed as blanks while in Edit mode, but blanks are removed when data is saved; plus and minus signs allowed).
L	Letter (A to Z, entry required).
?	Letter (A to Z, entry optional).
A	Letter or digit (entry required).
a	Letter or digit (entry optional).
$	Any character or a space (entry required).
C	Any character or a space (entry optional).
<	Causes all characters to be converted to lowercase.
>	Causes all characters to be converted to uppercase.
	Causes the character that follows to be displayed as the literal character (for example, A is displayed as just A).
Other characters as considered as literal. By default the EditMask* is set to aaaaa.

By using the patterned list, the phone number will have EditMask (###)999-0000000.

The Value of the UXMaskedInput is determined by the IsSaveLiteral and IsSaveMask property. These properties modify the Value by keeping the literal pattern or the mask character. For example, the UXMaskInput with EditMask set to “(999)000-0000”, the possible value with combination of these properties are shown in the next table.

IsSaveLiteral	IsSaveMask	Value
True	True	(___)555-1234
True	False	( )555-1234
False	True	___5551234
False	False	5551234

UXMaskedInput also allows null value which is controlled by the AllowNull property. By default this property value is set to False, hence null value is not allowed by default.

If the value is null, the UXMaskedInput shows an empty string during edit mode and display mode. By deleting the whole edit text (Ctrl + A, Del) in UXMaskedInput the value is automatically set to null, if permissible.

If you prefer, you can also customize how UXMaskedInput displays its text initially. There are two options available, EditMask or Value, which can be set through the DisplayMode property. The EditMask option displays the edit text, while the Value option displays the Value as detailed in the previous paragraph.

With the EditMask set to “(999)000-0000” and Value set to “5551234” the possible displayed text is illustrated in the following table.

DisplayMode	Displayed Text
Snippet Code
EditMask	(___)555-1234

Value	5551234 Assuming IsSaveLiteral and IsSaveMask is set to False

Custom Mask Character

By default the mask character in the UXMaskedInput is an underscore character “_”. However, you can customize the mask character through the provided MaskCharacter property.

UXMaskedInput with custom mask character ..

Editing Behavior

Although the UXMaskedInput is derived from UXTextBox, the editing behavior is significantly different since UXMaskedInput expected patterned data entry. The behavior differences also mean that there is default TextBox operation which is considered invalid and will be ignored in the UXMaskedInput such as the paste action. In this case, the paste action is valid only when all the text is selected.

UXMaskedInput implements sophisticated editing experiences that allow end users to input data more intuitively. In the following table, I will highlight some of the unique editing behaviors implemented in the control. Let’s take an example of the masked input control with EditMask set to “999-???-000”.

EditText	Action	Result
Description
\|___-___-___	Input an “A” character	___-A\|__-___
The “A” character is inserted in the optional letter section since the digit section is optional. If the digit section is not optional, the “A” character is rejected.
123-\|ABC-___	Pressing BackSpace	123\|-ABC-___
Caret position is moved no character is deleted since literal could not be deleted.
123-A\|BC-___	Pressing BackSpace	123-\|_BC-___
Caret position is moved, the character A deleted, and replaced by the MaskCharacter.
12\|3-AB\|C-___	Pressing BackSpace	12\|_-__C-___
Inputted character is replaced by the MaskCharacter while Literal is unchanged. Caret is set on the first highlight position.
\|123-ABC-456\|	Pressing BackSpace	[AllowNull=True] \| [AllowNull=False] \|___-___-___
Deleting all the text behavior depends on the AllowNull property. If the UXMaskedInput allow null, the result is empty UXMaskedInput, otherwise all the character is replaced by the MaskCharacter except Literal.
\|123-ABC-456\|	Pasting text 789-DEF-456	\|789-DEF-456
If the text is a valid value (literal is allowed) the pasted text is accepted. 789DEF456 or 456 is also accepted.

Conclusion

In this post, you have now learned the key features of UXMaskedInput. You can play around with the UXMaskedInput features through the properties, or try some readily designed samples here. To see all available features, please see UXMaskedInput Overview.

You will need the latest 2010 R2 bits which you can download it here. If you have questions or feedback about UXMaskedInput or other ClientUI controls, feel free to post them to our community forum.

Regards,

Glenn Layaar

New in ClientUI 4: Innovative Range Slider Bar Control

erikaa — Mon, 07 Feb 2011 06:56:31 +0000

As mentioned in this post, ClientUI 4 was included as part of WebUI Studio 2010 R2 released on December 2010. You can visit ClientUI product information here or read this article to see what’s new in ClientUI 4.

Introducing UXRangeSliderBar

UXRangeSliderBar is one of the new controls included in ClientUI 4, and can be used to select a range of values by moving two thumbs along the slider bar track area.

In previous post, I’ve described a property finder scenario where users can select property size and price range to find a list of properties. You can use UXSliderBar to easily select the property size. You can also use UXRangeSliderBar to select the price range for this property finder application. When it comes to selecting a range, usually two input boxes are needed, and you need to validate that the value of one input box shouldn’t exceed the other. Using UXRangeSliderBar, the two thumbs are carefully designed not to exceed the other, thus providing the built-in validation for a range input control.


    Property Finder

The range of values in UXRangeSliderBar is specified using SelectionStart and SelectionEnd properties. The value of SelectionStart property is marked by the first thumb, while the value of SelectionEnd property is marked by the second thumb. To select a range of value, you can move the thumb, press the registered keyboard keys, or click the track area and handle buttons. These user interactions use the value of LargeChange and SmallChange properties specified in UXRangeSliderBar.

Move the thumbs.

You can change the range of values by moving the thumbs along the track area. Additionally, you can maintain the value span by pressing the Shift key while moving the thumb. In this case, both thumbs will move together.
Use keyboard keys.

Similar to UXSliderBar, the Up, Down, Left, Right, PageUp, PageDown, Home, and End keys are already registered to UXRangeSliderBar commands. When one of these keys are pressed, UXRangeSliderBar will check the active thumb to determine whether the start or end value will be changed. For example: in the above scenario, when the first thumb is active and you press the Left key, the value of SelectionStart will be subtracted with the value of SmallChange property, which is 10. So, now the selection will start from $290 to $500.

When you press the Up, Down, Left, or Right keys, the value of SmallChange property will be used to change the range selection. When you press PageUp or PageDown keys, the value of LargeChange property will be used to change the range selection.

When you press the Home or End key, UXRangeSliderBar will not check the active thumb, but will automatically change the value of SelectionStart and SelectionEnd properties to Minimum or Maximum properties respectively. So, in the above scenario, if you press Home key, the SelectionStart will be set to $100, thus the selection will start from $100 to $500.
Click the track area.

When the track area is clicked, the area clicked will determine whether the start or end value will be affected. When you click the pink or blue area, the value of SelectionStart will be subtracted or added with the value of LargeChange property. When you click the green or purple area, the value of SelectionEnd property will be subtracted or added with the value of LargeChange property.

For example: when you click on the green area, the value of SelectionEnd will be subtracted with the value of LargeChange property, which is 100, so now the selection will start from $300 to $400.
Click the handle buttons.

By default the handle buttons are not displayed in UXRangeSliderBar. To display the handle buttons, you can set HandlesVisibility property to Visible. Two arrow-shaped buttons will be displayed at the left and right side of UXRangeSliderBar.

When the handle buttons are clicked, UXRangeSliderBar will check the active thumb to determine whether the start or end value will be added or subtracted with the value of SmallChange property.

If the second thumb is active and you press the right handle button, the value of SelectionEnd property will be added with the value of SmallChange property, which is 10, so now the selection will start from $300 to $510.

Enabling Drag Range Behavior

As described above, you can maintain the value span by pressing Shift key while moving the thumb. You can do that if you want to maintain the $200,000 value span when moving the thumb.

Another alternative is to enable the drag range behavior using IsDragRangeEnabled property. When enabled, you can drag the track area between two thumbs and both thumbs will move together.

Enabling Snap to Tick Behavior

You can enforce user to select only round value for the price range by enabling IsSnapToTickEnabled property. When enabled, the thumb will snap to the closest tickbar item when it is moved. If you move the first thumb to the left, it will snap to $300, $200, and $100.

When you press Shift key while moving one of the thumb, both thumb will move together to maintain the value span. When snap to tick behavior is enabled, both thumbs will snap to the closest tickbar item when one of them is moved.

You can still enable precision selection by pressing Ctrl key. Try to move the thumb while pressing the Ctrl key. The thumb will not snap to the closest tickbar item, but moves along with the cursor position, as if this behavior is not enabled.

Enabling Move to Point Behavior

You can use IsMoveToPointEnabled property to enable move to point behavior where you can click on any position in the slider bar track area and the thumb will move immediately to the location of the click. You can to click at $700 directly and the second thumb will move directly to the location of the click. Let me remind you again, that the area of the click determines the thumb that will be moved.

If you press Shift key while clicking at $700 directly, both thumbs will move directly together and the selection will now start from $500 to $700.

This behavior also works along with snap to tick behavior. So when both snap to tick and move to point behavior are enabled, you can click on any position in the track area and the thumb will snap to the closest tick bar item.

Enabling Auto Tooltip

While moving the thumb along the track area, you might find it difficult to determine what value you are hovering. You can display a tooltip near the thumb that contains the value of the hovered position using AutoTooltipVisibility property. You can specify AutoTooltipPosition, AutoTooltipFormat, AutoTooltipHorizontalDirection, and AutoTooltipVerticalDirection for additional configuration.

When you press Shift key while moving the thumb or when drag range behavior is enabled, a tooltip will be displayed near each thumb. You can know exactly that you are selecting $350 to $550 as the price range, as seen in the following shot.

Configuring Minimum and Maximum Range Span

When you choose a wide price range, say from $100,000 to $700,000, it could return lots of search results. In UXRangeSliderBar, you can specify a maximum range span allowed to narrow down the search result. You will be prevented from selecting a range of values exceeding the maximum range span specified.

For example: if MaximumRangeSpan property is set to 300, you can only select up to $300,000 difference in UXRangeSliderBar. If the selection starts at $300, you can only move the second thumb to $600. You can’t move the second thumb to a value larger than that.

You can specify the minimum range span allowed using MinimumRangeSpan property. By default to allow unlimited range span selection, the MinimumRangeSpan property is set to 0 and MaximumRangeSpan property is set to NaN.

Conclusion

In this post, you have learned the various ways to change the range of values in UXRangeSliderBar, the behaviors related to it, the auto tooltip, and the minimum/maximum range span.

To try it out yourself, feel free to browse through the samples here. To see all available features, see UXRangeSliderBar Overview. If you have questions or feedback about UXRangeSliderBar, feel free to post them to our community forum.

Cheers,

Erika

Enhanced ClientUI Navigation Framework for WPF

Jimmy Petrus — Thu, 27 Jan 2011 04:48:52 +0000

In my ClientUI blog series last year, I have covered the importance of navigation infrastructure which makes the application’s overall user experiences. There were many other details that I described in the blog post, including our support for nested navigation, easy role-based security configuration and more. You can read about them in my blog post here.

While the previous blog post gave impressions that the navigation framework was designed only for Silverlight, I would like to clarify that it is not. The ClientUI navigation framework supports both WPF browser and WPF desktop application very well since its initial release last year.

In this blog post, I will explain the essence of creating navigable desktop application, and tour the ClientUI navigation framework in WPF.

Navigation in Desktop Applications

When you hear about the ‘navigation’ term, what’s quickly popped up in your mind would be it’s a browser application. That’s true, navigation has always been always associated to the browser and the web. Unfortunately, many developers today disregards navigation infrastructure in desktop applications, and thought that the navigation is irrelevant in the desktop context.

As much as developers talk about desktop-style web applications, the fact is that desktop applications are revolutionizing toward web-style user interface. And one of the most prominent aspects in a web-style interface is always the navigation – it exactly means that content must be easily navigable. Surprisingly, you can easily find the kind of navigable desktop applications almost anywhere in your daily computing life, from Windows 7’s Control Panel and IIS Manager, to Windows Media Player, iTunes, and more.

Let’s take a look at Windows 7’s control panel interface for a clear picture of a navigable desktop application.

Based on the above illustration, there are at least five great benefits for building navigable desktop applications:

Journal management.
When you see Back and Forward (also known as Journal) buttons, you can quickly tell that it is a navigable application. The journal management allows users to easily navigate back and forth to the previously visited content.
Direct content access.
One of the best things about navigable interface is that it allows users to navigate a specific content directly. This is usually done through a simple breadcrumb, or a menu address bar such as introduced in latter version of Windows.
Multiple content source.
In a navigable-designed application, you can facilitate users with easy navigation from multiple sources, be it the address bar in the top, the hyperlink in the left pane, or just about anywhere else. This allows users to navigate the applications in the way they accustomed to.
Searchable content.
By designing your application to support navigation, it is easy to provide a search interface, allowing users to quickly finding the content they desire. Most traditional applications that don’t support navigation would face technical difficulties and limitations since there are no consistent interface that manages the entire navigation processes.
Reusable content.
Last but not least, a well-designed navigation application will refactor each navigable content into a reusable form, allowing the content to be easily accessible directly, to be linked from multiple sources, and to be searchable. In development terms, the reusable content means easier to extend and better maintainability.

Creating WPF Navigation Application with ClientUI

Now, I hope that I have well pointed out the main reasons why navigation is crucial for making a great user experience, regardless of whether it’s browser-based apps or desktop apps.

One of the features that set ClientUI apart is its powerful, thoughtfully-designed navigation framework. The main building block of the navigation framework such as the UXFrame and UXPage, implements unified API between Silverlight and WPF. This allows you to use the identical XAML markup between both platforms, which greatly minimizes the learning curves. Learn more about the fundamental of ClientUI navigation framework here.

You might be wondering what it means with unified API in my previous statement. The easiest way to understand it is to take a piece of Silverlight’s XAML code and paste it to the WPF. In this case, try to copy the Silverlight’s built-in Frame element and use it in WPF, then see if you can run the project without errors. Clearly, the compiler will stop you as soon as you pressed F5.

The biggest challenges we faced in the WPF counterpart of ClientUI’s navigation framework is to come up with features to match the Silverlight’s counterpart, such as the URI mapping and mapped navigation source mechanism. URI mapping is a very nice feature that allows you to navigate to a content via a short and friendly address, instead of a lengthy one, for instance, navigating to a customers page can be done with a /Customers identifier instead of /Views/Customers.xaml.

The UXFrame element, which is the core of ClentUI’s navigation building block, supports URI mapping, thus enabling you to define the XAML such as the following.

But, the URI mapping support doesn’t happen overnight. The main process of the mapping itself needs to be enhanced at the core framework level, because the navigation can be initiated through hyperlinks, buttons, toolbar buttons, or programmatically through APIs. For a quick illustration, the navigation framework should understand the mapped navigation request from a hyperlink such as shown below.

In summary, the ClientUI navigation framework for WPF does not only include an enhanced navigation Frame, but a whole new navigation framework that spans from the core architecture to navigation sources and other advanced navigation features.

To help you quickly getting started with ClientUI navigation framework, I have created a simple WPF navigation application that you can use as a template. See the following illustration.

As seen in the above illustration, ClientUI navigation framework provides all the tools you need to create rich navigation user interface, including the journal button, navigation button, direct content access through hyperlink and other navigation sources, and more.

The navigation application sample above also demonstrates a number of unique features, such as page transition and automatic navigation direction. You will notice that new navigation would apply a fading transition effect, navigating backward would apply a fly-in effect, while navigating forward would apply a fly-out effect.

The navigation sample project consisted of the start up page, and three pages that represent the content for Home, Settings and About. The ViewModels classes are also included for your convenience.

Download the sample project here, feel free to play around and enhance it, and use it to start your next WPF navigation application. Note that you will need the latest ClientUI build (4.0.5000.3), more about the hotfix in the later section below.

Silverlight Out-of-Browser, Well Supported

One of the area in Silverlight that cross the desktop boundary is its out-of-browser application support. Along with the coverage for navigation in WPF desktop application, I’m pleased to share that the ClientUI navigation framework also supports Silverlight’s out-of-browser in all its glory – the URI mapping, visual transitions, automatic navigation detection, role-based security, and more. Here’s a snapshot of the OOB support.

Best of all, download the Silverlight OOB project sample here. Have fun with it!

Get the Free Update

In case you haven’t aware, we recently posted the January ‘11 hotfix for ClientUI, which includes significant enhancements to WPF navigation and other stability fixes.

To see the complete list, please head to Intersoft Support Center – Version History.

The hotfix is free for existing customers, which can be easily downloaded and installed via Intersoft Update Manager. If you haven’t used Update Manager before, make sure you check out this article.

In the next post, I will detail more about “nested navigation” and “global navigation state” in desktop applications, which explains the design decisions why URI mapping has to existed in the first place. For now, enjoy the latest hotfix, download the project samples and happy navigating!

All the best,

Jimmy Petrus

Chief Software Architect

New in ClientUI 4: Intuitive Slider Bar Control

erikaa — Thu, 27 Jan 2011 03:35:55 +0000

ClientUI 4 is the latest version of our flagship development suite for the Silverlight and WPF platform. To learn more about ClientUI, you can read this post or visit ClientUI product information here. To see what’s new in ClientUI 4, see this article.

Introducing UXSliderBar

UXSliderBar is one of the new controls included in ClientUI 4. UXSliderBar is mainly used to select a value from a range of values by moving the thumb along the slider bar track area.

For example: in the following property finder scenario, users can select a property size starts from 500 to 1000 square feet. Surely, you can use textbox to input the property size that you want. However, there are at least two advantages for using UXSliderBar. First, users will automatically know the range of property size available and easily select a value by moving the thumb. Second, you, as developer, can prevent users from inputting the wrong value in the textbox and thus, eliminate the needs to implement input type validation, should textbox is used instead.


    Property Finder

You might note that UXRangeSliderBar is used in this scenario, but we’ll discuss about that in the next post

I’ve mentioned that you can easily select a value in UXSliderBar by moving the thumb along the slider bar track area. Besides that, you can use a variation of keyboard keys registered to UXSliderBar commands or click the slider bar track area and handle buttons. These user interactions will use the value of LargeChange and SmallChange properties specified in UXSliderBar.

Use keyboard keys.

Some key gestures are already registered to UXSliderBar commands. When you press Up, Down, Left, or Right keys, the value of UXSliderBar will be added or subtracted with the value of SmallChange property. For example: in the above scenario, the value of UXSliderBar is 700.When you press the Right key, the value of UXSliderBar will be added with the value of SmallChange property, which is 10. So, the value of UXSliderBar now is 710.

When you press PageUp or PageDown keys, the value of UXSliderBar will be added or subtracted with the value of LargeChange property. So, if the value of UXSliderBar is 710 and you press the PageDown key, the value of UXSliderBar will be subtracted with the value of LargeChange property, 100. So, the value of UXSliderBar now is 610.

When you press Home or End key, the value of UXSliderBar will be set to the Minimum or Maximum property respectively. If you press End key, the value of UXSliderBar will be set to 1000 and the thumb will move to the end of the slider bar.
Click the slider bar track area.

You can also click the track area at the left or right side of the thumb. When you click the blue area, known as DecreaseButton, the value of UXSliderBar will be subtracted with the value of LargeChange property. When you click the purple area, known as IncreaseButton, the value of UXSliderBar will be added with the value of LargeChange property.
Click the handle buttons.

By default the handle buttons are not displayed in UXSliderBar. To display the handle buttons, you can set HandlesVisibility to Visible. Two arrow-shaped buttons will be displayed at the left and right side of UXSliderBar.

When you click the handle buttons, the value of UXSliderBar will be added or subtracted with the value of SmallChange property.

Enabling Snap to Tick Behavior

When moving thumb to select a value, it is possible that you select a fractional value, such as: 700.346, which is rather uncommon for a property size. I think you would want a rounded value for that, right? In this case, you can enable IsSnapToTickEnabled property.

When this property is enabled, the thumb will move to the closest tickbar item. So, as you move the thumb to the right, it will snap to 600, 700, 800, and so on.

When snap to tick behavior is enabled, you can still enable precision selection by pressing Ctrl key. Try to move the thumb while pressing the Ctrl key. The thumb will not snap to the closest tickbar item, but moves along with the cursor position, as if this behavior is not enabled.

Enabling Move to Point Behavior

Now, what if I want to select 900 as the property size? This might be what you think; either moves the thumb, press Up key several times, or click the track area continuously. Well, let me save your time a bit by introducing IsMoveToPointEnabled property.

When this property is enabled, you can click on any position in the slider bar track area and the thumb will move immediately to the location of the click. You can click on 900 tickbar item and the thumb will move immediately there.

Well, I understand clicking right on the tickbar item will not be that easy and I probably would need a couple of try for that. That is the reason why you should enable both snap to tick and move to point behavior. When these properties are enabled, you can click near the tickbar item and the thumb will snap to it.

Enabling Auto Tooltip

While moving the thumb along the slider bar track area, you might find it difficult to determine what value you are hovering. You can display a tooltip near the thumb that contains the value of the hovered position using AutoTooltipVisibility property. You can specify AutoTooltipPosition, AutoTooltipFormat, AutoTooltipHorizontalDirection, and AutoTooltipVerticalDirection for additional configuration.

Let’s say you want to select a discount value using UXSliderBar. You can display the percentage value you’re selecting in the tooltip.

Displaying Value Range Track

In the discount slider bar, it can be useful to display the active selection track. You can see how much discount applied to a product simply by seeing the value range track. In UXSliderBar, the value range track is indicated by a blue-colored track that starts from the value of Minimum property to the selected value of UXSliderBar. You can display the value range track using ValueRangeVisibility property.

Conclusion

In this post, you have learned the various ways to change the value of UXSliderBar, the behaviors related to it, the auto tooltip, and the value range track.

To try it out yourself, feel free to browse through the samples here. To see all available features in UXSliderBar, see UXSliderBar Overview. If you have questions or feedback about UXSliderBar, feel free to post them to our community forum.

Cheers,

Erika

WebUI Studio 2010 R2 Installer Update Is Now Available

Jimmy Petrus — Wed, 12 Jan 2011 15:50:01 +0000

We’re pleased to announce that the WebUI Studio 2010 R2 “refresh” installer is now available for download. Prospect customers can download it from our trial request here, while existing customers can download it from Developer Network.

Control Updates

The new installer includes the latest ClientUI assemblies for Silverlight 3, Silverlight 4 and WPF 4. It includes significant enhancements to the UXCurrencyEditor’s editing experiences which I explained in my previous post. It also addresses a minor glitch where the licensing failed in the design-time.

The updated installer also includes a number of important enhancements particularly to the WPF counterpart of ClientUI. Many of these enhancements are based on the feedback that we received over the past months. Some key enhancements are listed below:

Improved XAML unification with the Silverlight counterpart, including command binding, key binding, and gestures definition.
Windowing and desktop controls now support all scenarios similar to the Silverlight counterpart, such as loading content from external XAML.
Enhanced navigation framework and navigation controls to support all scenarios similar to the Silverlight counterpart, including visual transitions, URI mapping, and other behaviors.
Enhanced hyperlink button control with revamped template which improve responsiveness and eliminate flickering when automatic underlining on hover feature is enabled.
Calendar and date time picker control are tweaked for best rendering performance, resulting an even faster and smoother user experience.

Documentation Updates

In addition to the product bits, all documentation topics have been further updated with more information and examples, including hundreds of classes and type members in the ClientUI assemblies.

Thanks to our developer-friendly documentation format, you can now quickly learn a particular feature by looking up the related property in the class library section of the documentation. So if you’re developing with Visual Studio, simply press F1 key in the property window to bring up the documentation for the selected property.

The online documentation has been updated as well, which you can browse here.

Support Center Updates

Along the new installer, Intersoft’s support center has also been updated with fresh content related to the new controls added in ClientUI 4 release. Each topic is neatly categorized allowing you to find related information faster.

You can browse the ClientUI support home here.

All the best,
Jimmy Petrus

ClientUI & DevForce Part 2: Contact Sandbox Editor

Jimmy Petrus — Tue, 11 Jan 2011 16:45:27 +0000

A while back, we released the first version of Contacts sample application to demonstrate the best practices in building MVVM applications that support Silverlight and WPF using one codebase. The sample application was jointly developed by Intersoft and IdeaBlade. In case you missed the story, be sure to check out the whole coverage in my blog post here.

One of the fundamental concepts in the Silverlight/WPF data binding is that every modification on the entity that bound to elements through data context would automatically propagate that changes to the bound UI elements. The MVVM pattern, actually, built upon this data binding capability. However there are certain cases where the automatic propagation is not desired, for instance, when an object is in editing context.

Not so long after we released the first Contacts application, we received feedback from customers asking if it is possible to “isolate” the editing context, so that changes won’t reflect to UI elements bound to the entity. The customers couldn’t go wrong in this case, because reflecting the changes in such editing context while it has not been saved is simply confusing to end users, or I would say, counter intuitive.

The following illustration shows the editing dialog box in the Contacts sample application.

Notice that the “Name” in the list box will reflect as you modify the Name text box in the Contact editing dialog box. As developers, we understood that it was an effect of data binding, unfortunately it’s simply unacceptable to stake holders and application users.

In this post, I will introduce our new approach, called sandboxed editing mode, to shoot the problem in the most efficient and elegant way possible.

Introducing ContactSandboxEditor

The approach of isolating the editing process of an entity is widely known as “sandboxed” editing mode. In this second series of our joint Contacts sample, we introduced ContactSandBoxEditor, an improved editor that implement isolated persistence editing.

The new ContactSandBoxEditor doesn’t reinvent the wheel, instead, it plays nicely with the existing architecture that we designed in the first place. The ContactSandBoxEditor derives from ContactEditor class, then we simply overriding three key methods that are used to add, edit and get saved contact, see the snippet code below.

public class ContactSandboxEditor : ContactEditor
{
    public ContactSandboxEditor(IContactsRepository callerRepository)
        : base(ContactsRepository.CreateRepository())
    {
        CallerRepository = callerRepository;
    }

    private IContactsRepository CallerRepository { get; set;  }

    public override void AddNewContact(Action onOk, Action onCancel)
    {
        Repository.ClearAllContacts();
        var contact = Repository.CreateContact();
        ShowContactDialogBox(contact, onOk, onCancel);
    }

    public override void EditExistingContact(
        Contact sourceContact, Action onOk, Action onCancel)
    {
        Repository.ClearAllContacts();
        var contact = Repository.ImportContact(sourceContact);
        ShowContactDialogBox(contact, onOk, onCancel);
    }

    protected override Contact GetSavedContact(
                             ContactEditViewModel viewModel)
    {
        return CallerRepository.ImportContact(viewModel.Contact);
    }
}

As seen in the code above, DevForce provides a number of built-in methods to work with and manage entities, such as FindEntities, ImportEntities and RemoveEntities, making it easy and straightforward to implement contact import and rollback functionality.

Another nice benefit with this approach is that you can easily switch between the editing mode by simply changing the default contact editor in the ContactsViewModel.cs, see below.

private void SetDefaultContactEditor()
{
    // this.ContactEditor = new ContactEditor(Repository);
    this.ContactEditor = new ContactSandboxEditor(Repository);
}

The following illustration describes the interaction between the ContactsView, ContactsViewModel, Repository and the new ContactSandBoxEditor.

As seen in the above illustration, the ContactSandBoxEditor exposes the following processes:

The user clicks “edit” in the ContactsView; the view alerts the ContactsViewModel
The ContactsViewModel calls the ContactEditor
The ContactEditor performs the following:
a. makes a copy of the Contact and imports it into its own private repository
b. creates the window,
c. creates the editing View,
d. creates the editing ViewModel using the private repository
e. puts the View and ViewModel inside the window,
f. shows the window, and waits for the user to finish editing.
When the user closes the window the ContactEditor:
a. if the user saved, it copies the saved Contact back into the main Repository
b. If the user canceled, the changes to the Contact copy are abandoned.
The ContactEditor cleans up and tells the ContactsViewModel what happened.

As the results of the sandbox editor implementation, changes on the editing dialog box will no longer reflecting the UI elements bound to the entity. Of course, the changes will be merged and reflected later when the Save button is clicked. See the following screenshot.

To learn more how to implement and use sandbox editor in depth details, please read the PDF walkthrough that we’ve prepared for you.

Download the Solution

Click here to download the Contacts project source code along with the walkthrough documents. Feel free to play around with the code and use it in your apps! Note that DevForce version 6.0.7 is required to run this sample. You can download the latest DevForce bits here.

In case you missed the news, we recently announced an official strategic partnership with IdeaBlade to focus on an integrated development solution for Silverlight and WPF. We are making available a variety of cost-effective product bundle. Click here to find out more.

While we’ll be kicking-in some nice features for the next series, we’d love to hear your feedback on the Contacts application so far. Are there any specific features you wish to see? Or, perhaps architectural challenges that you are struggling with? Drop them in the comment box, and we will get back to you with solutions.

All the best,
Jimmy Petrus

New in ClientUI 4: Versatile Calendar Control

intersoftbram — Fri, 07 Jan 2011 07:05:45 +0000

The recently released 2010 R2 features ClientUI 4, a major version of our flagship development suite for the Silverlight and WPF platforms. ClientUI 4 is strongly focused in three areas: rich content and UI controls, advanced input controls, and fundamental navigation controls. For further information about ClientUI 4, please click here.

Introducing UXCalendar

One of the controls introduced in ClientUI 4 is UXCalendar, a sophisticated calendar control featuring multiple month views, multiple date selection feature and data binding support using MVVM design pattern.

UXCalendar sports a sleek yet authentic style and user interface, complete with today link, navigational buttons, week number and adjacent days. The following illustration shows what you get when you dropped an instance of UXCalendar in your Visual Studio or Blend designer surface.

We designed the UXCalendar to be ultimately lightweight and high performance, despite of its rich user interface. For instances, when clicking the Calendar Header, you will see responsive zoom-in and zoom-out transition similar to the one in Windows 7.

What’s really powerful is the multiple month views capability in UXCalendar – with the sleek user interface and styles consistently applied. You can easily set how many calendars to display by setting the CalendarViewCount property to the desired number. See the multiple month views interface in the following illustration.

Suffice to say, UXCalendar is the ultimate, cross-platform solution for all your calendaring needs. It also features built-in commands and flexible key gestures, multiple selection (and even multiple range), MVVM data binding for events source, display range customization, culture and localization support, and many more. Click here to learn more about UXCalendar.

Customizing UXCalendar Layout

UXCalendar is uniquely built on solid architecture that leverages our ItemsControl content model. This means that each calendar that represents an item in the UXCalendar can be easily and flexibly styled according to your need. You can even completely change the way it is arranged, let’s say, showing the calendars in 2 columns and 1 row, or 3 columns and 2 rows.

By default, the layout of UXCalendar is using a horizontal StackPanel. You can override this default layout through the ItemsPanel property of the UXCalendar.

In this blog post, I will show you how to create a UXCalendar with multiple month views displayed in 3 columns and 2 rows. Please follow the steps below:

Drag and drop an instance of UXCalendar to the designer surface. You can use either Visual Studio 2010 or Expression Blend 4.
Show six months calendar view by setting the CalendarViewCount property to 6.
And now the final step, customize the ItemPanels of the UXCalendar. I’m using Intersoft’s WrapPanel and set the MaxWidth property to 600 to get the 3 x 2 display configuration.
```
    
        
            
        
    
```
Save and run the project in the browser. You should get the results such as shown in the following illustration.

Truly simple and straightforward, isn’t it?

In this short post, you have now learned the basics of UXCalendar, and how to customize its layout arrangement. You can play around with the UXCalendar features through the properties, or try some readily designed samples here. To see all available features, please see UXCalendar Overview.

You will need the latest 2010 R2 bits which you can download it here. If you have questions or feedback about UXCalendar, feel free to post them to our community forum.

Best Regards,

Budianto Muliawan

New Year Goodies: Mac & Metro-style Tab Controls, Updated Samples, and more

Jimmy Petrus — Wed, 05 Jan 2011 06:17:27 +0000

2010 was a big, important year to Intersoft. We closed the year with a total of 240 new and quality controls across all .NET development platforms: ASP.NET, Silverlight 3, Silverlight 4 and WPF 4. And best of all, our overall position in the market share has increased by nearly 300%, positioning us as one of the most preferred component vendors in the world. You can read more about our news here, and press releases here.

To kick off the new year, I’d like to share with you a number of exciting goodies that we have prepared exclusively for you. Here they are.

Mac-style Tab Control

The recent 2010 R2 release features a sleek tab control, one of the 60 new controls introduced in the release. The tab control sports a clean, Aero-style theme, shown in the following image.

While the predefined Aero-style is clearly nice, you may want to achieve a different visual style, particularly to the one ideal in Mac-style applications. The good news is that our tab control is fully customizable, allowing us to revamp the style completely without affecting the functionality.

Here’s a shot for the Mac-style tab control, with all its elegant look and feel in pixel details.

And yes, the theme source is provided! See next.

Metro-style Tab Control

One of the designs that often requested is the Metro UI style navigation control. Metro UI is introduced by Microsoft, originally in its Zune software, and recently popularized in its Windows Phone 7 software. The concept is fundamentally based on clean and minimalist design and guidelines, avoiding glossy and gradients.

We thought you’d love a Metro-style tab control, thus we designed one for you. Here’s the screen shot.

Looks modern and clean, isn’t it? I’d surely love to hear your thought about it!

Metro UI, apparently, is not only about static interface, it’s all about authentic user experiences. In addition to the clean look, Metro style emphasizes on subtle animation during navigation. The animation should also be applied differently based on the navigation direction. For instances, applying a SlideLeft transition when users switched to the previous tab, and a SlideRight transition for the next tab.

The new tab control allows you to achieve this so-called Metro user experience in just few clicks. Simply set the EnablePageTransition and AutoDetectNavigationDirection property to true, it’s that easy! Thanks to the ClientUI’s solid content transition architecture and navigation framework that made this possible. You can learn more about it here.

And finally, grab the source for the Mac and Metro style here.

Note: Each new style is nicely refactored in a single XAML file, which you can find in the /Assets/Styles folder. To use it in your project, simply copy the desired XAML file and paste it in your project, then add it as a resource in your App.xaml.

Enhanced Currency Editor

The ClientUI live sample has been recently updated with latest bits that include a number of enhancements, particularly on the currency editor released last week.

What’s really cool about the new currency editor is its intuitive editing experiences that were specifically designed for currency input. For instances, pressing minus key will turn toggle the value to positive or negative. The negative value may have its own visual presentation, such as showing the value in red. See the following illustration.

Another interesting feature is the culture-aware decimal input, particularly to enter the minor number. In the U.S. culture, users press the period key to input minor number, while users with France culture press the comma key.

The latest version further improves the currency editing experiences with a smart minor number insertion, a result of our consultation with a group of accounting experts! You can now place the keyboard cursor anywhere in the minor number areas and type a number to insert at that position, while pressing backspace naturally delete the previous number and shift the entire minor number back to the left.

You can try many of the currency editor’s capabilities in the Various Format sample, which you can access online here.

These new enhancements, along with other minor issues fix, will be accumulated into a “RTM refresh” installer due next week. Stay tuned for the next announcement.

Localization Manager Sample

In my previous post, I have touched the surface about Localization Manager, a new framework in ClientUI 4 that allows you to localize your Silverlight/WPF application using MVVM pattern and dynamic resource.

You can learn more about localization manager here, and download the sample bits here.

Offline ClientUI 4 Documentation

ClientUI 4 offline documentation in CHM format is now available. Download it here. Note that you may need to unblock the CHM if you cannot open the file after downloaded.

If you preferred an online experience, you can browse the documentation here.

Once again, happy 2011! And enjoy the exclusive goodies.

PS: Make sure you’ve installed 2010 R2 to find the new controls. You can download the free trial here.

All the best,
Jimmy Petrus