Category Archives: 2010 R2

Use UXSliderBar to Simplify Data Entry

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.

<Intersoft:UXSliderBar Minimum="0" Maximum="100" LargeChange="10"
                       SmallChange="1" TickPlacement="BottomRight"
                       HandlesVisibility="Visible"/>

UXSliderBar1

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:

<Intersoft:UXSliderBar Minimum="0" Maximum="100" LargeChange="1"
                       SmallChange="0.1" TickPlacement="BottomRight"
                       HandlesVisibility="Visible" Ticks="0 55 65 75 85"/>

UXSliderBar2

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.

<Intersoft:UXSliderBar Minimum="0" Maximum="100" LargeChange="1"
                       SmallChange="1" TickPlacement="BottomRight"
                       HandlesVisibility="Visible" Ticks="0 55 65 75 85"
                       AutoTooltipVisibility="Visible"
                       AutoTooltipFormat="F0"/>

UXSliderBar3

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.

<TextBox Text="{Binding Value, ElementName=UXSliderBar1}" />

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:

<TextBox Text="{Binding Value, ElementName=UXSliderBar1,
                Converter={StaticResource GradeConverter}}"/>

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:

<StackPanel>
   <Intersoft:FieldLabel>
      <Intersoft:FieldLabel.Header>
         <TextBlock Text="Name :"/>
      </Intersoft:FieldLabel.Header>
      <TextBox Width="200" Text="John Doe"></TextBox>
   </Intersoft:FieldLabel>
   <Intersoft:FieldLabel>
      <Intersoft:FieldLabel.Header>
         <TextBlock Text="Grade :"/>
      </Intersoft:FieldLabel.Header>
      <StackPanel Orientation="Horizontal">
         <Intersoft:UXSliderBar Name="UXSliderBar1" Width="517"
                                Minimum="0" Maximum="100" LargeChange="1"
                                SmallChange="0.1" TickPlacement="BottomRight"
                                HandlesVisibility="Visible"
                                ValueRangeVisibility="Visible" Value="55"
                                AutoTooltipVisibility="Visible"
                                AutoTooltipFormat="F0" Ticks="0 55 65 75 85"
                                IsMoveToPointEnabled="True" Height="50" />
         <TextBox Height="27" Width="33" HorizontalAlignment="Left"
                  Text="{Binding Value, ElementName=UXSliderBar1,
                         Converter={StaticResource GradeConverter}}"/>
      </StackPanel>
   </Intersoft:FieldLabel>
</StackPanel>

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

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

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”.

<Intersoft:UXCurrencyEditor EditMask="#,##0.00"
                 DisplayMask="C" UseEditMaskAsDisplayMask="False" />

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.

CurrencyNegativeValue

<Intersoft:UXCurrencyEditor EditMask="#,##0.00;(#,##0.00)" />

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
<Intersoft:UXCurrencyEditor
		EditMask="C" Culture="en-US" />
en-GB £10,000.00
<Intersoft:UXCurrencyEditor
		EditMask="C" Culture="en-GB" />
id-ID Rp10.000
<Intersoft:UXCurrencyEditor
		EditMask="C" Culture="id-ID" />

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

<Intersoft:UXCurrencyEditor 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

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.

<Intersoft:UXMaskedInput 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
<Intersoft:UXMaskedInput EditMask="(999)000-0000"
                         IsSaveLiteral="True"  IsSaveMask="True"/>

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
<Intersoft:UXMaskedInput EditMask="(999)000-0000"
		Value="5551234"
		DisplayMode="EditMask"/>
Value 5551234

Assuming IsSaveLiteral and IsSaveMask is set to False

<Intersoft:UXMaskedInput EditMask="(999)000-0000"
	  Value="5551234"
	  DisplayMode="Value"
	  IsSaveLiteral="False" IsSaveMask="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 ..

CustomMaskCharacter

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”.

<Intersoft:UXMaskedInput EditMask="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

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.

Blog1

<StackPanel>
    <TextBlock FontSize="26">Property Finder</TextBlock>
    <Intersoft:FieldLabel>
        <Intersoft:FieldLabel.Header>
            <TextBlock Width="100" TextWrapping="Wrap"
                       Text="Select Size (in sq ft.)"></TextBlock>
        </Intersoft:FieldLabel.Header>
            <Intersoft:UXSliderBar Width="400" TickPlacement="BottomRight"
                                   Minimum="500" Maximum="1000"
                                   LargeChange="100" SmallChange="10"
                                   IsMoveToPointEnabled="True"
                                   Value="{Binding
                                   PropertyFinder.PropertySize,
                                   Mode=TwoWay, ValidatesOnDataErrors=True,
                                   ValidatesOnExceptions=True}"/>
    </Intersoft:FieldLabel>
    <Intersoft:FieldLabel>
        <Intersoft:FieldLabel.Header>
            <TextBlock Width="100" TextWrapping="Wrap"
                       Text="Select Price (in 1000 USD)"></TextBlock>
        </Intersoft:FieldLabel.Header>
        <Intersoft:UXRangeSliderBar Width="400" TickPlacement="BottomRight"
                                    TickFormat="C0" Minimum="100"
                                    Maximum="700" LargeChange="100"
                                    SmallChange="10"
                                    SelectionStart="{Binding
                                    PropertyFinder.StartPrice,
                                    Mode=TwoWay, ValidatesOnDataErrors=True,
                                    ValidatesOnExceptions=True}"
                                    SelectionEnd="{Binding
                                    PropertyFinder.EndPrice,
                                    Mode=TwoWay, ValidatesOnDataErrors=True,
                                    ValidatesOnExceptions=True}"/>
    </Intersoft:FieldLabel>
    <Button Content="Search" Width="100" Margin="0, 20, 0, 0"></Button>
</StackPanel>

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.

    Blog_Range1 
    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.

    Blog_Range2

    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.

Blog_Range3

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
			    Minimum="100" Maximum="700" LargeChange="100" 
			    SmallChange="10" SelectionStart="{Binding 
			    PropertyFinder.StartPrice, Mode=TwoWay, 
			    ValidatesOnDataErrors=True, 
			    ValidatesOnExceptions=True}" 
			    SelectionEnd="{Binding 
			    PropertyFinder.EndPrice, Mode=TwoWay, 
			    ValidatesOnDataErrors=True, 
			    ValidatesOnExceptions=True}" 
			    IsDragRangeEnabled="True" />

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.

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
                            Minimum="100" Maximum="700" LargeChange="100" 
                            SmallChange="10" SelectionStart="{Binding 
                            PropertyFinder.StartPrice, Mode=TwoWay, 
                            ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            SelectionEnd="{Binding PropertyFinder.EndPrice, 
                            Mode=TwoWay, ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            IsSnapToTickEnabled="True" />

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.

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
                            Minimum="100" Maximum="700" LargeChange="100" 
                            SmallChange="10" SelectionStart="{Binding 
                            PropertyFinder.StartPrice, Mode=TwoWay, 
                            ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            SelectionEnd="{Binding 
                            PropertyFinder.EndPrice, 
                            Mode=TwoWay, ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            IsMoveToPointEnabled="True" />

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.

Blog_Range4

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
                            Minimum="100" Maximum="700" LargeChange="100" 
                            SmallChange="10" SelectionStart="{Binding 
                            PropertyFinder.StartPrice, Mode=TwoWay, 
                            ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            SelectionEnd="{Binding PropertyFinder.EndPrice, 
                            Mode=TwoWay, ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            AutoTooltipVisibility="Visible" 
                            AutoTooltipFormat="C0"/>

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.

<Intersoft:UXRangeSliderBar TickPlacement="BottomRight" TickFormat="C0" 
                            Minimum="100" Maximum="700" LargeChange="100" 
                            SmallChange="10"  SelectionStart="{Binding 
                            PropertyFinder.StartPrice, Mode=TwoWay, 
                            ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            SelectionEnd="{Binding PropertyFinder.EndPrice, 
                            Mode=TwoWay, ValidatesOnDataErrors=True, 
                            ValidatesOnExceptions=True}"
                            MaximumRangeSpan="300"/>

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

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.

Windows 7 Control Panel

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

  1. 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.
     
  2. 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.
     
  3. 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.
     
  4. 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.
     
  5. 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.

<Intersoft:UXFrame Name="ContentFrame">
       <Intersoft:UXFrame.UriMapper>
             <Intersoft:UriMapper>
                  <Intersoft:UriMapping Uri="" 
                             MappedUri="/Views/Home.xaml"/>

                  <Intersoft:UriMapping Uri="/{page}"
                             MappedUri="/Views/{page}.xaml"/>
              </Intersoft:UriMapper>
       </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>

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.

<Intersoft:UXHyperlinkButton NavigateUri="/Customers" />

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.

ClientUI navigation application for WPF

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.

ClientUI navigation project

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.

image

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.

image

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