Tag Archives: ClientUI 2010

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

New in ClientUI 4: Intuitive Slider Bar Control

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.

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>

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.

    Blog2

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

    Blog3

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.

<Intersoft:UXSliderBar Width="400" TickPlacement="BottomRight" Minimum="500" 
                       Maximum="1000" LargeChange="100" SmallChange="10"                                                                      IsSnapToTickEnabled="True" Value="{Binding 
                       PropertyFinder.PropertySize, Mode=TwoWay, 
                       ValidatesOnDataErrors=True, 
                       ValidatesOnExceptions=True}"/>

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.

<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}"/>

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.

<Intersoft:UXSliderBar TickPlacement="BottomRight" TickFormat="P0" 
                       Maximum="1" LargeChange="0.2" 
                       AutoTooltipVisibility="Visible" 
                       AutoTooltipFormat="P0"/>

Blog4

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.

<Intersoft:UXSliderBar TickPlacement="BottomRight" TickFormat="P0" 
                       Maximum="1" LargeChange="0.2" 
                       ValueRangeVisibility="Visible" 
                       Value="0.5"/>

Blog5

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

New in ClientUI 4: Versatile Calendar Control

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.

image

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.

image

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:

  1. Drag and drop an instance of UXCalendar to the designer surface. You can use either Visual Studio 2010 or Expression Blend 4.
    image
    <Intersoft:UXCalendar Name="uXCalendar1"
    HorizontalAlignment="Center" VerticalAlignment="Center" />

  2. Show six months calendar view by setting the CalendarViewCount property to 6.
    <Intersoft:UXCalendar Name="uXCalendar1" CalendarViewCount="6"
    HorizontalAlignment="Center" VerticalAlignment="Center" />

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

    <Intersoft:UXCalendar Name="uXCalendar1" CalendarViewCount="6"
    HorizontalAlignment="Center" VerticalAlignment="Center">
        <Intersoft:UXCalendar.ItemsPanel>
            <ItemsPanelTemplate>
                <Intersoft:WrapPanel MaxWidth="600" />
            </ItemsPanelTemplate>
        </Intersoft:UXCalendar.ItemsPanel>
    </Intersoft:UXCalendar>

  4. Save and run the project in the browser. You should get the results such as shown in the following illustration.image

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

Coming in R2: MVVM Localization Manager and Multi Bindings

As 2010 R2 is just around the corner, I thought you may be interested in getting familiar with the new features and enhancements we made in the ClientUI Framework (beside the dozens list of rich controls). Two of the most significant additions to the Framework are localization manager that supports MVVM design pattern, and a powerful multi binding object that works consistently in Silverlight 3 & 4 and WPF.

MVVM-ready Localization Manager

Localization becomes a critical requirement as your business applications rapidly growing and being consumed by a wide range of users in different countries with different cultures. Fortunately, Silverlight includes a handy localization feature that works pretty good in basic scenarios. You can also easily display the localized string to a content control through data binding, such as shown below.

    <Button Content="{Binding Path=Resource.TodayText,
          Source={StaticResource LocalizedStrings }}"/>

The above approach is not wrong at all; it uses data binding so you can display the localized string in any dependency properties. The only caveat is that you cannot dynamically update the localized string when the Culture is changed in runtime, for instances, you want to display Germany language instead of English without restarting the application. I’m sure you will find this scenario quite common in typical business applications.

The limitation in the dynamic localization is due to the architecture design of the Silverlight itself. The problem is simple: there are no notifications when the application’s culture has changed. This prevents the UI elements “to know” when they should update the localized string.

The other problem with Silverlight’s localization feature is that it has not supported MVVM design pattern. In the above example, you bind the Content of the Button to a static resource. While this may not be a big deal at first, most architects would want to streamline the localization resources in the ViewModel as well, thus reducing the needs to define “extra” static resources and such.

Enter ClientUI Localization Manager, it shoots these two problems at once. The new Localization Manager will be part of the ClientUI Framework in the upcoming 2010 R2 release.

With the ClientUI Localization Manager, you can bind your localized resource to any dependency properties, this means that you are not limited to a specific control (unlike the other solutions!). It allows you to bind UI elements to the localized resource using MVVM, such as shown in the example below.

   <Grid DataContext={StaticResource MainPageViewModel}> 

          <TextBlock TextWrapping="Wrap"
             Text="{Binding Localization.Resource.TodayText}">

While it seems so simple, it already supports automatic update when the application’s culture is changed –  no extra code or workarounds needed. To proof this concept, I have put together a simple sample that we will include in the 2010 R2 installation.

The application has a simple interface that shows Today text and a formatted short date below it. The goal was to have the application built purely with MVVM approach, and have the text updated automatically when the culture changes at runtime.

The following shows the application interface using English as the default language:

Localization Manager

When the France button is clicked, it automatically updates the Today text and the today’s formatted date to the France language such as shown below.

Automatic Resource Update

In traditional applications, the dynamic localization were mostly implemented using tightly-coupled approach, where you refer to the desired elements and write code that says something like “todayText.Text = FormatString(newLocalizedString)”. With ClientUI Localization Manager, that’s a thing of the past.

The implementation using ClientUI Localization Manager is extremely straightforward, let’s see what the above buttons are doing when clicked.

      private void ExecuteChangeLanguage(object parameter)
      {
         LocalizationManager.Culture =
                    new CultureInfo(parameter.ToString());
      }

It’s done with one simple line of code, you simply set the Culture property of the LocalizationManager to the desired culture. Interestingly, it will also update the localized strings that bound to the UI elements. The magic key behind this possibility is the observable resource, a new entity implemented in the upcoming ClientUI Framework that is responsible to notify the culture changes.

You implement the observable resource as a model (the “M” in the MVVM), and consume it in your ViewModel. The observable resource can be easily defined through a generic template constructor, shown below.

    namespace ClientUILocalizationManager.Models
      {
         public class MyAppResource :
                 Framework.ObservableResource<Resources>
         {
            public MyAppResource() : base(new Resources())
            {
            }
         }
     }

The “Resources” is the class auto-generated by Visual Studio when you added a new Resource item in your Silverlight project. This means that you can continue using the Visual Studio designer to work with localized strings and resources, and then consume it directly in your UI elements through the observable resource. And better yet, the localization manager works in WPF, too!

Cross-platform Multi Bindings

In the previous R1 release, we have included a number of advanced data binding framework such as binding descriptor and property binding. This binding framework allows you to do what is impossible to be done in Silverlight, such as declaring binding in setter of a style, or template. You can learn more about them here.

The next R2 release will include a new data binding engine called “multi bindings”, another settlement on “SL – WPF compatibility continuum”. Let’s see what “multi bindings” does.

Most of the binding declaration we used to work in Silverlight are referred as single binding. Take a quick example below.

   <TextBlock Text="{Binding FirstName}">

The above syntax instructs the TextBlock to get its text from the FirstName property of the assigned data context. Whenever the FirstName changes, the Text is updated as well.

Now consider if you have a TextBlock that displays a combination of FirstName and LastName. How would you do that? Set two bindings to the Text? This should be natural as it sounds, unfortunately, Silverlight doesn’t allow you to do that.

The multi bindings was first introduced in WPF, you can read more about it here. It generally allows you to set multiple bindings on a single dependency property. The multiple bindings are processed through a IMultiValueConverter, which converts the values of the bindings to a single result.

The upcoming ClientUI Framework will bring multi binding implementation to the Silverlight, including all the required interfaces to be compatible with WPF. That said, it is now possible to set two bindings, let’s say, the FirstName and LastName to the Text property of a TextBlock, such as shown in the following code:

<Intersoft:GlassLabel>
     <Intersoft:BindingFramework.MultiBinding>
           <Intersoft:MultiBinding TargetProperty="Content"
                         Converter="{StaticResource NameConverter}">
                 <Intersoft:BindingCollection>
                        <Binding Path="Text"
                                  ElementName="FirstName_Input"/>
                        <Binding Path="Text"
                                  ElementName="LastName_Input"/>
                 </Intersoft:BindingCollection>
           </Intersoft:MultiBinding>
     </Intersoft:BindingFramework.MultiBinding>
</Intersoft:GlassLabel>

The above syntax instructs the binding engine to update the Content property of the GlassLabel whenever the Text property of FirstName_Input and LastName_Input changes. The formatting is done in the NameConverter, with the results shown in the following illustration.

Cross-platform Multi Bindings

It is important to note that multi binding should be considered only in scenarios where you cannot provide the bindable property in ViewModel. IMO, the multi binding is particularly useful for cross-UI communication that doesn’t involve model or ViewModel, such as in UI controls engineering. In my next post, I will showcase the R2 controls that use the multi binding extensively to achieve sophisticated, loosely-coupled UI architecture.


In this post, I have revealed two of the most fundamental improvements in the upcoming ClientUI release, both of them geared toward line-of-business application development using the best design pattern available. I hope you liked what you see thus far and how they can be useful in your application. As always, I’m open for any comments, feedback or questions on these improvements.

Update 1/5/2011: Source code for the Localization Manager sample is now available here.

All the best,

Jimmy Petrus

Chief Software Architect

Create a Rich Silverlight Message Board using MVVM Pattern and WCF RIA Services

In the past several months, I’ve been actively blogging about our next-generation user interface library for the Silverlight and WPF development, which has just been RTM-ed three weeks ago. I hope you’ve enjoyed playing around with the new controls and exciting features that we delivered. In case you haven’t got your copy, click here to get started.

While we’ve shipped hundreds of great samples that you can learn, or experience directly online, you may have realized there wasn’t a single blog post yet that guides you through creating basic Silverlight application using the ClientUI controls from front-to-back. The reason for that is because we’re still in progress preparing a comprehensive set of learning resources for you. Eventually we will have around 40-50 new videos, walkthroughs, and how-to articles available by the next week or two at the latest. So, stay tuned for our announcement in this blog site.

Not too long after I posted my blog about Top 10 Must-See Samples last week, I received several emails from customers that asked for a quick walkthrough to use the ClientUI controls in a real-world scenario, that is, retrieving data from the server-side database via WCF RIA Services and apply MVVM pattern on the top of that!

At the same time, we were migrating the message board from an earlier version of our Silverlight demo (known as Sirius which is now discontinued and completely replaced with the new ClientUI Showcase) to the new ClientUI library. The new message board happened to use the MVVM pattern, and it connects to the database via WCF RIA Services too. Just perfect, that’s an ideal topic to be blogged about!

In this blog post, I will share the key techniques that we used to build a richer Silverlight message board using the ClientUI library. Instead of writing a lengthy walkthrough from the ground zero, this blog post will be more focused on the key challenges and common obstacles found while building rich user interface using MVVM pattern in the combination with WCF RIA Services, Entity Framework and Domain Service. So, to effectively follow this post, you’re required to have basic understanding in the MVVM pattern and WCF RIA Services at the minimum. To learn more about MVVM pattern, read my previous post MVVM Framework in Silverlight.

Setting The Goal

Before we delved deeper into the project discussion, it’s important to set the preliminary goals and objectives of the project – outlining the general features, modules, presentation pattern, data access and connectivity and the application pattern.

The message board project that we want to achieve using ClientUI was planned to have the following objectives:

  • An elegant and clean user interface that emphasizes on ease-of-use and appealing experience.
  • High performance and responsive UI. Load only initial chunk of data at first load, then allow users to load more data on demand.
  • Customizable layout and appearance that is completely data-driven. I.e, callout style corresponds to the color that user selects.
  • Data access and connectivity to server-side SQL database through WCF RIA Services.
  • Use MVVM pattern for rapid and consistent application development.
  • Use Entity Framework and Domain Service for data query and operation.

The following illustration shows the user interface and basic message board functionality that we want to achieve in this project.

Rich Silverlight Message Board Objectives

Project Overview

Our Silverlight message board project is consisted of two projects. The first is a Silverlight project that contains all the Silverlight assets, such as XAML, styles, converters, view models, and more. See the following illustration.

Silverlight Project

Some base classes such as the ModelBase, ViewModelBase and many of the ViewModels are already provided by the templates shipped in the ClientUI, thus makes it easier and faster for you to get started and work on the MVVM classes. This message board project itself is based on the Intersoft ClientUI MVVM Application Project Template.

The other project is an ASP.NET Web Application project that contains server-side business object, entity framework, and data access layer to access the SQL database. The Web project is also used to host the Silverlight application which typically delivered in the form of XAP. See the following illustration.

ASP.NET Web Project

UI (View) Challenges

One of the biggest advantages of modern client development – such as the Silverlight or WPF – is that it enables a complete separation on the application engineering process. Our team of designers and developers firstly agreed on the main layout, structure and the navigation part of the project – and then each division can work on the project in parallel, which means that designers can go on creating the styles and assets, while developers can go ahead with the codes, MVVM and other business requirements.

Many Silverlight projects that we built recently were significantly accelerated with the efficient collaboration process. Take this message board project as an example. When the designer team delivers the style assets, the overall UI can be dramatically transformed, from plain white to stunning wooden-warm look and feel, while did not affect any of the application features and behaviors being worked by the developers.

In this post, I won’t be covering the styling and beautifying process of the project. Let’s focus on the technical difficulties in the UI (View) part.

Building the Feedback Items List

In most app dev, you typically start with the data presentation part. In Silverlight, there are a number of presentation patterns that you can use to display a list of data, such as grid view, list box, items control and more. The items control is the most ideal presentation for this project as we wanted to show the list of messages in nicely arranged callouts which doesn’t require selection or other advanced features.

Using the user interface library that we have in ClientUI, we can quickly achieve our goal to display the feedback list using an UXItemsControl that contains a list of callouts. The ItemsPanel of the UXItemsControl can be flexibly changed to WrapPanel to provide automatic wrapping layout.

The implementation is quite straightforward, see the following XAML code snippet.

<Intersoft:UXScrollViewer VerticalScrollBarVisibility="Auto">
        <Grid>
                 <Intersoft:UXItemsControl HorizontalAlignment="Center" MaxWidth="1024"
                                           ItemsSource="{Binding Path=Feedbacks}">
                          <Intersoft:UXItemsControl.ItemsPanel>
                               <ItemsPanelTemplate>
                                     <Intersoft:WrapPanel/>
                               </ItemsPanelTemplate>
                        </Intersoft:UXItemsControl.ItemsPanel>
                          <Intersoft:UXItemsControl.ItemTemplate>
                              <StackPanel HorizontalAlignment="Center">
                                     <Intersoft:CallOut>
                                             <TextBlock Text="{Binding Quote}"/>
                                     </Intersoft:CallOut>
                                     <TextBlock Name="IdentityText">
                                           <Run Text="{Binding DisplayName}"/>
                                           <LineBreak/><Run Text="{Binding Title}"/>
                                     </TextBlock>
                              </StackPanel>
                        </Intersoft:UXItemsControl.ItemTemplate>
                 </Intersoft:UXItemsControl>
        </Grid>
</Intersoft:UXScrollViewer>

Now we’ve got the feedback items listed in plain callout that arranged using wrapping layout.

Using ItemTemplateSelector to Set Template Based on Data

Our next objective is to customize the callout style based on the color that user selected when posting a message. In ASP.NET, this process is normally handled in the codes by handling the OnDataBound or InitializeRow event, then check against the data and then set the desired properties or styles accordingly.

That’s not the case in WPF or Silverlight. Our approach would be using WPF-style data binding technique where the actual templating can be entirely defined in the XAML. Thanks to all our items control lineups, we provide the ItemTemplateSelector and ItemContainerStyleSelector to address this challenges elegantly. This also complies with the MVVM pattern where separation of concern is prioritized.

As the name implies, the ItemTemplateSelector enables the items control to select which item template to use based on the condition evaluated in the DataTemplateSelector class. We can create our own class that implement DataTemplateSelector class, and then overrides the SelectTemplate method to provide our own logic to determine the item template selection process.

The following C# code snippet shows the CalloutTemplateSelector class to process the callout template selection based on the data.

[ContentProperty("CalloutTemplates")]
public class CalloutTemplateSelector : DataTemplateSelector
{
    public CalloutTemplates CalloutTemplates { get; set; }

    public CalloutTemplateSelector()
    {
        this.CalloutTemplates = new CalloutTemplates();
    }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        Feedback data = item as Feedback;
        CalloutItemTemplate template =
                               this.CalloutTemplates.SingleOrDefault(
                                     c => c.Color.ToLower() == data.FavoriteColor.ToLower());

        if (template == null)
            template = this.CalloutTemplates[0];

        return template.Template;
    }
}

The following XAML code snippet shows the ItemTemplateSelector implementation that uses the CalloutTemplateSelector class shown above to display different style of callout according to the data.

<Intersoft:UXItemsControl ItemsSource="{Binding Path=Feedbacks}">
          ...
          <Intersoft:UXItemsControl.ItemTemplateSelector>
                  <local:CalloutTemplateSelector>
                         <local:CalloutItemTemplate Color="Natural" Template="{StaticResource Callout_Natural}"/>
                         <local:CalloutItemTemplate Color="Wood" Template="{StaticResource Callout_Wood}"/>
                         <local:CalloutItemTemplate Color="DarkBrown" Template="{StaticResource Callout_DarkBrown}"/>
                         <local:CalloutItemTemplate Color="Black" Template="{StaticResource Callout_Black}"/>
                  </local:CalloutTemplateSelector>
          </Intersoft:UXItemsControl.ItemTemplateSelector>
         ...
</Intersoft:UXItemsControl>

The ItemTemplateSelector and ItemContainerStyleSelector are two of the most commonly used data binding techniques in WPF – which we bring to the Silverlight platform through ClientUI.

Setting the Callout Pointer Target

Since we’re using a nice Callout shape to represent a message in this project, we quickly realize that we wanted to show the callout pointer to target the user name element beneath it.

As you can see the “red lines” in the following illustration, each message has different pointer target location since each message has different length based on the text that users provide.

Callout Pointer

Although our UXCallout has complete customization over the pointer location – such as the PointerOffset, PointerPoint1, etc – it could be a tedious task to calculate the pointer offset manually. Furthermore, the manual calculation won’t be a perfect solution as we aren’t allowed to access the “UI element” from within the view model.

Fortunately, our UXCallout is equipped with a nice feature called TargetElement. By simply setting the TargetElement to the desired element, the pointer of the Callout will be automatically pointing to the center offset of the specified target element. And since TargetElement is a dependency property, that means you can easily specify it in your template or binding.

To achieve our UI objective such as shown in the above illustration, we can set the TargetElement of our callout to target the user name element through Binding. See the following XAML code snippet.

...
 <Intersoft:CallOut Style="{StaticResource CalloutStyle}"
                    Background="{StaticResource DarkBrownGradient}"
                    BorderBrush="{StaticResource DarkBrownBorder}"
                    TargetElement="{Binding ElementName=IdentityText}" Foreground="White">
                    ...
</Intersoft:CallOut>
<TextBlock Name="IdentityText" Style="{StaticResource IdentityStyle}">
...

So far, we’ve addressed numerous key challenges related to the UI (View). Although we haven’t covered all view issues entirely in this topic, you should get sufficient ideas on how to solve the other UI challenges using similar pattern.

MVVM Challenges

As we’re building the project to be entirely based on the MVVM pattern, it becomes obvious that most challenges and issues would arise as you designed the user experiences for your application.

In this project, two of the major MVVM challenges are: calling asynchronous data retrieval from within the view model and how to deal with the view model separation for the “New Post”.

The following illustration shows the view models required in this project.

ViewModels Overview

As seen in the above illustration, the message board project is mainly comprised of two view models, named FeedbackListViewModel and NewFeedbackViewModel.

The FeedbackListViewModel Overview

The FeedbackListViewModel encapsulates the logic for the feedback list, such as retrieving the feedback list, getting the total count of the feedback, loading more feedback and managing the busy state for the data operation.

The following illustration shows the overview of FeedbackListViewModel.

FeedbackListViewModel Overview

Binding the Feedback List to View Model

The data binding for the items control to the view model is quite straightforward. It can be achieved by defining the Binding expression to the Feedbacks property available in the view model. The FeedbackListViewModel itself is defined directly as the DataContext of the UXPage in the XAML.

The following code shows how the feedback view model and the items source is defined. When the data context is set, it will automatically become available to the children in the tree. That enables the UXItemsControl to be notified with the available data context, then take its Feedbacks collection as the items source.

<Intersoft:UXPage>
     ...
    <Intersoft:UXPage.DataContext>
        <ViewModels:FeedbackListViewModel/>
    </Intersoft:UXPage.DataContext>
     ...

     <Intersoft:UXItemsControl ItemsSource="{Binding Path=Feedbacks}" />
</Intersoft:UXPage>

Load More Command

In the main view, we loaded only a chunk of initial records for highly responsive user experience. When you scroll down to the bottom edge of the list, you’ll notice the Load More Data button. This button will remain enabled when there’s more data to be loaded. To achieve this function, we’ll define the DelegateCommand in the view model, and then bind it to the hyperlink button through Command property.

The DelegateCommand, which is available in ClientUI Framework library, exposes CanExecute and Executed delegate which can be easily defined in the view model. The CanExecute result, interestingly, will automatically reflect the user interface elements that bound to it. In this case, the CanExecute result will automatically disable or enable the Load More button. This is an ideal solution for the MVVM pattern, all we need to do is to define the condition when the command can be executed, and the actual logic that will be processed when executed.

The following C# code shows the DelegateCommand initialization and the methods that handle its CanExecute and Executed delegate.

public FeedbackListViewModel()
{
      LoadMoreCommand = new DelegateCommand(ExecuteLoadMore, CanLoadMore);
}

private bool CanLoadMore(object parameter)
{
      return (this.LoadedPage < this.TotalPages);
}

private void ExecuteLoadMore(object parameter)
{
      LoadFeedback();
}

The following code shows how the delegate command is bound to the hyperlink button in the XAML.

<Intersoft:UXHyperlinkButton VerticalAlignment="Bottom" IsToggleButton="False"
                             Command="{Binding LoadMoreCommand}"
                             CommandCannotExecute="Collapsed">

            ...

</Intersoft:UXHyperlinkButton>

Managing Busy State

In my previous blog post, I’ve briefly discussed about the busy management support in certain ClientUI controls, specifically in the navigation frame and page.

The busy state management is particularly useful in this project as we’re retrieving data from the server asynchronously. Fortunately, ClientUI already include built-in features to manage the busy state directly in the navigation frame level. This eliminates the needs to define busy indicator in every page which could be a tedious task.

The busy state management feature in navigation frame is beyond the “classic” busy indicator. In addition to showing the “busy” indicator, it will also block the entire screen from user interaction. Furthermore, all commands-nature elements such as hyperlinks and buttons, will be automatically disabled to prevent users to inadvertently execute the command. See the following illustration to get a clearer picture.

Busy State Management

Now, let’s take a look how we can elegantly implement the feature in the view model to comply with our MVVM pattern architecture.

First, we define a property named IsBusy in the view model such as shown below:

public bool IsBusy
{
     get
     {
         return _isBusy;
     }
     set
     {
         if (_isBusy != value)
         {
             _isBusy = value;
             OnPropertyChanged("IsBusy");
         }
     }
 }

Second, we can bind this property to the IsBusy property available in the UXPage. This property automatically notifies the navigation frame that hosted it to manage the busy state according to the given value.

<Intersoft:UXPage
    Title="ClientUI Message Board"
    BlockUIOnBusy="True"
    IsBusy="{Binding IsBusy}">
   ...
</Intersoft.UXPage>

Note that the UXPage has BlockUIOnBusy property, which indicates whether the UI (User Interface) should be blocked when IsBusy is true.

Finally, we can now easily control the busy state from by simply setting the IsBusy property in the view model. The following code snippet shows an example that sets the busy state when retrieving data.

private void LoadFeedback()
{
    // Indicates that the view model is processing something
    // It will automatically reflect the state in the UI (View)
    IsBusy = true;

    _context.Load(_context.GetFeedbacksQuery(this.LoadedPage + 1),
                    (o) =>
                    {
                        if (o.IsComplete)
                        {
                            ...
                            // Sets the state back to normal
                            IsBusy = false;
                        }
                    }
                , true);
}

Pretty cool, isn’t it? Feel free to let me know if you’ve feedback or found other ways to implement the busy state management in your apps.

Showing the Status Window

When a data operation is completed, it’s nice to show a quick status that lets users aware of the request status. In this project, we’re going to use a lightweight window such as UXWindowChrome to show the status.

The challenge here is how we can efficiently control the status window (UI element) from the view model. There are a number of ways to implement this.

First, if you want to control the status window from within view model, you can dedicate a status window for each operation, then bind its IsClientVisible to your view model to control its visibility.

In our case, we would like to have only one instance of status window which is reused for multiple data operations, such as retrieving data, add new, and so on. In such scenario, the best practice is to handle this in the UI (View) level because all operations are mostly UI-related.

The good thing with this approach is that it shows the benefits of the view model that implements INotifyPropertyChanged which can be useful in a number of scenarios. Let’s take a look at the following example.

 // Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // We can easily access to the view model from view through the DataContext
    FeedbackListViewModel viewModel = this.DataContext as FeedbackListViewModel;

    // Handle the view model's PropertyChanged 
    // Remember to detach it in OnNavigatingFrom override to avoid memory leak.
    viewModel.PropertyChanged += new PropertyChangedEventHandler(ViewModel_PropertyChanged);
}

private void ViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    FeedbackListViewModel viewModel = this.DataContext as FeedbackListViewModel;

    if (e.PropertyName == "LoadedPage")
    {
          if (viewModel.LoadedPage > 1)
          {
               // Set the required status, i.e, the label text and visibility. 
               this.StatusLabel.Text = "10 more posts loaded";
               this.StatusWindow.IsClientVisible = true;
               // Hide the status after 2 seconds. 
               Utility.ExecuteTimeOut(2,
                        () =>
                        {
                            this.StatusWindow.IsClientVisible = false;
                        });
          }
    }
}

Here’s what the result looks like:

Showing Status Window

The NewFeedbackViewModel Overview

The NewFeedbackViewModel implementation is unique in a way that it is actually a children UI control that reside in the FeedbackList page. To enable the Callout and its entire children to use a different view model, we can set the DataContext of the Callout to the NewFeedbackViewModel which can be directly defined in the XAML code.

See the following illustration for the view model overview.

NewFeedbackViewModel Overview

Showing the Callout in View Model

One of the most challenging difficulties in MVVM is how a modern user interface such as callout can be efficiently managed using the MVVM pattern. In this project, we’re using the UXCallout control to display an iPad-style ‘Pop Over’, allowing users to conveniently write a new message in compelling user experience.

Since the UXCallout is built using the ClientUI’s popup architecture that complies with ISO-standards in usability, we can easily control its visibility through the IsOpen property.

The following code shows how the two-way binding is done.

<Intersoft:UXCallOut x:Name="Write_Callout" HorizontalAlignment="Right" Width="0"
                     PreferredPosition="Bottom"
                     IsOpen="{Binding IsAdding, Mode=TwoWay}">
                     ...
</Intersoft:UXCallOut>

While we’re now able to control the UXCallout’s visibility from the view model, the state is not synchronized with the “Write” button. Fortunately, all button lineups in ClientUI include toggle functionality. This way, we can make the button to use toggle behavior and bind its IsChecked to the IsOpen of the UXCallout using two-way binding.

See the code snippet below that shows the XAML definition for the toolbar button.

<Intersoft:UXToolBarButton x:Name="Button_Write" Content="Write"
                           IsToggleButton="True"
                           IsChecked="{Binding IsOpen, ElementName=Write_Callout, Mode=TwoWay}"
                           IsCheckedChanged="Button_Write_IsCheckedChanged"
                           ...
                           />

Binding the Input Controls

Next, the input controls can be bound directly to the Feedback entity which we have defined in the view model. This process is quite basic and straightforward as we’ve covered it in previous posts.

The following XAML code shows the input controls binding.

<Intersoft:UXItemsControl CornerRadius="4" ItemContainerStyle="{StaticResource CalloutInputStyle}">

           <Intersoft:UXTextBox x:Name="Quote_Input" Height="80" WatermarkText="What do you think about ClientUI?"
                                Text="{Binding Feedback.Quote, Mode=TwoWay}" AcceptsReturn="True"
                                VerticalScrollBarVisibility="Auto" />
           <Intersoft:UXTextBox x:Name="Name_Input" WatermarkText="Your name"
                                Text="{Binding Feedback.Name, Mode=TwoWay, ValidatesOnDataErrors=True}"
                                Intersoft:DataBinding.ClearErrorOnTextInput="True"/>
               ...
</Intersoft:UXItemsControl>

Using CommandParameter in Radio Button

One of the interesting scenarios in the UI for the new form is how we can design the user interface that allows users to select their preferred color. In our previous demo, this is done using view logic since the MVVM pattern has not existed yet at that time.

In this project, we’re migrating the color selection from the non-standard controls to button controls. The radio button is the most ideal user interface to achieve this objective.

However, since radio button is not a selection control, we can’t easily manage the selection in the same way as in UXListBox. Fortunately,we have the full-blown Commanding support in all button lineups. You got the idea, we can bind the radio button to a delegate command, then assign the CommandParameter in each radio button to be passed in the delegate command.

The following XAML snippet code shows how the binding is done in XAML.

<Intersoft:UXItemsControl Orientation="Horizontal" ItemContainerStyle="{StaticResource ColorSelectionStyle}">
           <Intersoft:UXRadioButton Background="#FFD9D9D9" ToolTipService.ToolTip="Silver"
                      Command="{Binding SelectColorCommand}" CommandParameter="Silver"/>
           <Intersoft:UXRadioButton Name="NaturalColor_Input"  Background="#FFFDE6B8" ToolTipService.ToolTip="Natural"
                      Command="{Binding SelectColorCommand}" CommandParameter="Natural"/>
          ...
</Intersoft:UXItemsControl>

And the corresponding view model code in C# here.

public NewFeedbackViewModel()
{
      this.SelectColorCommand = new DelegateCommand(ExecuteSelectColorCommand);
            ...
}

private void ExecuteSelectColorCommand(object parameter)
{
      this.Feedback.FavoriteColor = parameter.ToString();
}

As you become more familiar and fond with the MVVM pattern, you would be able to easily address numerous UI challenges in consistent manner. It also helps you to maintain the codes clean, readable and easy to extend.

Submitting Changes via Domain Context in View Model

Once we’re done with the UI, MVVM and binding, the final step is to perform the real database changes when the “Post” button is clicked. Again, this is done using the same MVVM pattern through Commanding.

Since the logic and data operation is encapsulated in the view model, we did not use the declarative DomainDataSource like in the old demo. Instead, the operation is called in the view model level through method call that automatically generated from the WCF domain service.

Consequently, the domain context is created only once at the FeedbackListViewModel level, which can be easily referenced through ParentViewModel in the NewFeedbackViewModel. This enables the new record operation to use the same domain context, which properly maintains the current state of the loaded data.

The following code snippet shows how the data operation is implemented.

private void ExecuteSaveCommand(object parameter)
{
        if (ValidateInput())
        {
                // set busy to block user interaction
                this.ParentViewModel.IsBusy = true;
                this.ParentViewModel.DomainContext.Feedbacks.Add(this.Feedback);

                // process changes to server-side through WCF RIA Services
                this.ParentViewModel.DomainContext.SubmitChanges(
                    (o) =>
                    {
                          ...
                    }
      }
}

Inserting the New Post to the Parent View Model

Finally, after the data is saved to the server-side, we’re going to reflect the changes to the UI (View). There are a couple of options to do this. You can either refresh the entire list again to show the latest data, or insert only the new record to the current list (delta approach).

We’re going to use the latter approach because it delivers more responsive user interface by eliminating the client-server round trip. Since we have the reference to the parent view model, we can easily access the Feedbacks collection and perform insertion to the collection. As the Feedbacks collection is using ObservableCollection type and bound to the ItemsSource (see the earlier point above), any changes to the Feedbacks collection will automatically reflect the user interface elements that bound to it. Pretty nice, don’t you agree?

The following code shows the complete process in ExecuteSaveCommand which demonstrates how the new Feedback insertion is implemented.

private void ExecuteSaveCommand(object parameter)
{
      if (ValidateInput())
      {
            // set busy to block user interaction
            this.ParentViewModel.IsBusy = true;
            this.ParentViewModel.DomainContext.Feedbacks.Add(this.Feedback);

            // process changes to server-side through WCF RIA Services
            this.ParentViewModel.DomainContext.SubmitChanges(
                    (o) =>
                    {
                        this.ParentViewModel.IsBusy = false;

                        if (!o.HasError)
                        {
                            // reflect the newly added post to the View
                            this.ParentViewModel.Feedbacks.Insert(0, this.Feedback);

                            // tell the View that we're done with the saving process
                            this.IsSaved = true;
                            this.IsAdding = false;
                        }
                        else
                        {
                            MessageBoxServiceProvider.ShowError(…);
                            o.MarkErrorAsHandled();
                        }
                    }
                    , null);
      }
      else
      {
           FocusErrorField();
      }
}

Download the Solution

Want to create your own rich Silverlight message board? Go ahead, click here to download the C# project solution and modify it as you like. You can use this message board project as the base to quickly jump start your MVVM project.

The C# project solution includes all the codes mentioned in this blog such as the model, view models and converts, the XAML files, and a stripped-down SQL database to minimize download size. You can also find several nice design stuff in the solution such as the minimalist scroll viewer style, iPad callout style, glass button, a vector refresh symbol and much more.

Note that you will need SQL Server Express 2008 installed to run the sample. The latest version of ClientUI is required as well. If you’re still using build 8 (initial RTM build), I highly suggest you to upgrade to the latest version (build 9) for the best stability and performance. Click here to download the latest version, and here to read the installer change log.

Conclusion

So far, you already have some ideas and insights of the key challenges in building Silverlight application using MVVM pattern and WCF RIA Services. Often times, you will deal with the user interface requirements demanded by your users and how you apply the MVVM pattern to address the user interface challenges. Hopefully this message board case study can be useful for you to learn and jump start on using the ClientUI controls with MVVM.

Click here to try the message board online. The following screenshot shows the message board sample that we studied in this post.

ClientUI Live Message Board

Although it may look prettier when integrated into our live showcase (done through SAF and on-demand loading), it’s actually the same project that made available for download.

In the next blog post, I’ll do a quick blog discussing how a ClientUI application can be easily loaded and reused in another ClientUI application domain. For instance, I could load this message board application in a navigation frame of a more complex application, or load it as the content of a window.

For now, I hope you enjoyed the Silverlight message board sample! Let me know if you have any questions or feedback.

All the best,
Jimmy
Chief Software & UX Architect

Top 10 Must-See ClientUI Samples

Last week, we officially released the gold version of ClientUI, the most anticipated user interface library for the Silverlight and WPF development. Click here to download the RTM bits and here to read the release announcement which includes several important news and links, as well as the new exciting stuff introduced along.

In this first release, ClientUI shipped with fundamental frameworks and comprehensive user interface controls which are aimed to provide an end-to-end solution for development challenges covering MVVM, binding, styling, data access and connectivity, and how they can be wired up elegantly to rich UIs such as callout, dialog box, window and more. The ultimate goal is to simplify the line-of-business application development process in both Silverlight and WPF platform, while at the same time resulting great experiences that users demanded. If you’re new to ClientUI, please learn the basics here and more advanced topics here.

In my previous post, I’ve touched the surface about the ClientUI Showcase and its brand-new Control Explorer. You can find nearly 140 samples in the Showcase page, which we created to effectively demonstrate many of the frameworks, controls and features available in the ClientUI. In case you haven’t got time to check out all of them, no worries, I’ve got the compilation of most interesting samples that you should check out for yourself.

In this post, I’ll discuss on top 10 most interesting samples that I’ve chosen out from hundreds, which can be used as your main reference to learn Silverlight, MVVM and how to elegantly deal with modern user interface metaphors such as call out and dialog box along with MVVM. It really didn’t seem to be as easy as few-minutes task that I initially thought, since most of the samples turned out to be compelling, and beautifully designed. Anyway, here is the list in descending order.

10. iPhone-style Application Launcher with Fluid Drag-drop

iPhone-style Application Launcher with Fluid Drag-drop

Tags: UXGridPanel, Uniform Grid Layout, Fluid Drag-drop, Application Launcher
Online Demo: http://live.clientui.com/#/Controls/EllipsisText/iPhoneIcons
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples.Controls\
Views\EllipsisText\iPhoneIcons.xaml

Drag-drop is perhaps one of the many exciting features in ClientUI that I haven’t manage to cover in my ClientUI blog series, which I hope to gradually cover them on sample basis. This sample demonstrates several key features of UXGridPanel, an advanced panel that allows you to arrange items in uniform grid such as seen in the above screenshot.

In addition to its uniform layout capability, UXGridPanel features fluid drag-drop capability that enables you to create application user interface that doesn’t only look good, but also feel great. With only some property sets, you can easily make the items drag and drop-able. To see how ‘smooth’ the movement is, you have to experience the sample yourself.

There are many cases where you can apply this modern user interface pattern, imagine a CRM dashboard or healthcare app that shows a list of application shortcuts. Users would then be able to re-order the shortcuts based on their preferences, save it to the database and have the settings loaded on the next visit.

9. Customer Details with Rich Editing Form

Customer details with rich editing controls

Tags: MVVM, Commanding, Window, Tool Bar, Combo Box, Text Box, Expandable Group, Content Reflector, Business Application, Rich Editing Form
Online Demo: http://live.clientui.com/#/WindowControls/UXDesktop
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples.WindowControls\
Views\UXDesktop\Default.xaml

This sample represents one of the most common user interface patterns in a business application, consisting of a visually-compelling editing form with comprehensive range of input controls styled in professional Aero theme with perfect combination of ISO-standards dialog box and a rich tool bar.

This sample should be your first reference when you need to build a rich, MVVM-pattern business form. It shows how to bind the text input using two ways data binding to the view model, and especially how to bind the Combo Box to view model through ItemsSource and SelectedItem. Interestingly, the Save and Cancel command can be bound to view model as well through DelegateCommand.

8. iPad-style Book Navigation with Elegant 3D Flipping Transition

iPad-style book navigation with elegant 3D flipping transition

Tags: UXFrame, MVVM, Commanding, Fluid Drag-drop, 3D Flipping Transition, Journal Button, Routed Command, Navigation Frame and Modular Page
Online Demo: http://live.clientui.com/#/NavigationControls/UXFrame
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples.NavigationControls\
Views\UXFrame\Default.xaml

This sample uses the navigation frame (UXFrame) and modular page (UXPage) to achieve master-details scenario in a typical business application. For instance, when a book is clicked, the application navigates to the book details. The interesting part is how the navigation process can be elegantly built using MVVM, routed command and transition to deliver stunning yet consistent experience.

Although it may seem complex at first, this sample is fairly simple and can be done easily. It’s basically consisted of two pages, the first lists all the books and the other lists the details of selected book. Using MVVM, the NavigateUri of the book can be bound to the book details page, passing the book’s ID to the query string. The other visual goodies such as transition can be easily enabled with just some property sets – EnablePageTransition and Back/ForwardTransitionEffect.

7. Rich Text Editor with Consistent Commanding Interface

Rich text editor sample demonstrating routed command

Tags: Routed Command, Hybrid Command, Menu Bar, Tool Bar, Context Menu, KeyBinding, ISO-Standards Usability, Window, Text Editor, Productivity Application
Online Demo: http://live.clientui.com/#/ClientUIFramework/RoutedCommand
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples.ClientUIFramework\
Views\RoutedCommand\Default.xaml

This is one of my favorite samples as it shows the best practice and guidelines in using our commanding framework – specifically the routed command and our flagship hybrid command – to create a typical productivity application with consistent command interface.

This sample also demonstrates a wide variety of our user interface controls such as menu bar with nested menus, tool bar with built-in split button and dropdowns and an elegant context menu – all styled in professional and beautiful Aero theme. For business developers, that means you can simply drop the controls to your page without have to deal with the tedious tasks such as template editing or styling.

I highly recommend you to take a look at the sample codes to learn more about commanding as we bring the WPF’s commanding power to the Silverlight.

6. Hotel Selector with Dazzling Flowing Interface

Hotel reservation with dazzling cover flow experience

Tags: UXFlow, MVVM, Binding, Floating Details, Glass Label, 3D Cover Flow, Business Application
Online Demo: http://live.clientui.com/#/UXFlow/Binding
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples.UXFlow\
Views\Binding\Default.xaml

Fancy user interface controls such as cover flow, has been traditionally known as type of controls that don’t comply to development standards since the 3D perspective and flowing algorithm requires special handling. But that isn’t the case for UXFlow, our flagship flow user interface with state-of-the-art movement and fluid experiences that in certain extent, performs better than the Apple’s own cover flow.

This sample is inspired from a hotel selection interface that American Express featured sometime ago in their site which unfortunately delivers very poor experience as they used Adobe’s sluggish Flash. The interesting part of this sample is how we built UXFlow to comply with all development standards – such as MVVM and commanding – in addition to its beautiful 3D flowing. For instance, the SelectedItem of the UXFlow is bound to the view model which is reflected in the Description Box located in the left side.

If you would like to build something amazing for your users, you can now use UXFlow along with your favorite MVVM implementation to easily provide the items source and capture the selection.

5. Stepped Wizard-style Setup Form

Wizard-style navigation window using full MVVM pattern

Tags: UXNavigationWindow, Back and Forward (Journal) Button, MVVM, Binding, Commanding, Command Bar, Default Focus, Navigation Window, Business Application
Online Demo: http://live.clientui.com/#/NavigationControls/UXNavigationWindow
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples.NavigationControls\
Views\UXNavigationWindow\Default.xaml

This sample is one of my best favorites which was created to answer developer’s needs on how to deal with multiple pages in navigation frame using MVVM. Instead of using a standard navigation frame (UXFrame), this sample used a specialized window called navigation window (UXNavigationWindow) to provide built-in journal button for the local navigation frame.

This sample should be your first reference when it comes to navigation with multiple pages and sophisticated validation that bound to a single view model. Notice the command buttons in the command bar, i.e, the Next and the Finish button, also properly reflected the current page, which is also bound to the view model through commanding.

4. To Do List with Dragable Items and iPad-style Popover

Elegant to do list with iPad-style pop over interface

Tags: UXToolGroup, MVVM, Commanding, Data Binding, iPad-style Callout Interface, Customized Check Box, List Box, Fluid Drag-drop, Productivity Application
Online Demo: http://live.clientui.com/#/BarMenuControls/UXToolGroup
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples.BarMenuControls\
Views\UXToolGroup\Default.xaml

With the advent of Apple-centric user interface, the experiences such as those in iPhone and iPad have quickly becomes the interface standards that today’s users expected to see in an application. But, to come up with a superior result that Apple demanded, the user interface library requires a very unique and extremely detailed engineering process. Take a quick example, the round corner, glass, gradient and bevel effect of a button should be designed in a way that enables it to look good in whatever theme used.

We put many of those design guidelines into our controls engineering and make it ‘feature sets’, so that you can build such interface in rapid manner – without have to deal with large amount of codes or styling. It took us nearly 3 years to master the design guidelines to this level, so I bet you won’t want to do it yourself 🙂

So what’s interesting in this sample apart of its sleek interface? I’d say three things. First, the way we deal with the popover (call out) using MVVM pattern, while at the same time conforming to the ISO-standards in usability. Secondly, the list box is using MVVM to control the visibility of some parts of its elements, i.e., the tags such as “Web, Sales” will appear if the data existed. And finally, the item can be re-ordered with drag-drop. It can also be removed as simple as dragging them out from the view.

This sample definitely opens up a whole new possibility of rich user experiences that you can explore further. Use this sample as your main reference for building compelling applications with popover and Apple-centric user interface.

3. Flickr Photo Browser

Flickr photo browser with searching and predefined category

Tags: Search Box, Stack Button, iPad-style Pop Over, MVVM, Binding, Converter, Commanding, Command Parameter, 3D Cover Flow, Flickr Service, Asynchronous Data Connectivity, Busy Management, Photo Mashup Application
Online Demo: http://live.clientui.com/#/WindowControls/UXDesktopDock
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples.WindowControls\
Views\UXDesktopDock\Photos.xaml

While the seven samples above greatly demonstrate the wide variety of commercial-class user interface that you can build with ClientUI, this sample quickly appears into our 3rd best and most interesting samples as we reviewed it. A key difference is that it performs real-world data connection to server, and how it can be effectively handled using MVVM and our user interface controls such as the search box, dropdowns and the flow interface.

One of the interesting scenarios that you can learn is how to deal with the busy state while performing asynchronous callback to a data service, which in this case retrieving a list of photos from Flickr server. While retrieving the data, you can notice that the cursor will be changed into hourglass to indicate a ‘wait’ operation, which is exactly the same experience you can find in Windows, or Leopard.

Another interesting part is the item selection indicator in dropdown which should automatically reflect the state of the current view. For instance, if I bring up this window with ‘Sky’ selected from the dock, the dropdown menu should have the selected indicator on the Sky menu item. This is also done elegantly with MVVM through CheckedState, Command, CommandParameter and Converter.

So, if you want to build a great looking interface with dynamic data and MVVM selection, you should bookmark this sample for your main reference.

2. Rich Application with Window, Drag-drop and Dock Integration

A prototype of next-generation RIA using rich window concept, dock and drag-drop integration

Tags: UXDesktopDock, Window, Desktop Integration, Dock Button, Grid Stack Menu, Fluid Drag-drop, MVVM, Commanding, Command Parameter, Query Drop State, Custom Drag Tooltip, Next-generation Business RIA Application
Online Demo: http://live.clientui.com/#/WindowControls/UXDesktopDock
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples.WindowControls\
Views\UXDesktopDock\Default.xaml

Many of the frameworks and user interface controls that we built from scratch are geared toward an ultimate purpose. This sample resembles the ultimate model of a next-generation application that we want to make possible with ClientUI and Silverlight, this includes a very sophisticated integration between the desktop, windows and the task bar interface.

Among the rich experiences that you may have seen before in the previous samples, such as the grid stack menu with minimalist scrollbar and the transparent window, the dock-style taskbar is our new power tool that allows user to interact with visual objects in a natural way, something we called ‘natural user experiences’.

In addition to full-fledged capability for application launching, the desktop dock (UXDesktopDock) also includes QueryDropState, a specialized drag-drop feature that allows you to detect what kind of object is currently dragged over, and then provides a visual feedback and additional processing when that object is dropped on the button.

Imagine dragging a contact and drop it to a recycle bin to delete it, or drop it to a “Mail” application to quickly compose an email for that contact. I’ve been long expecting such user experiences to come on the web, and today, I’m excited that we’ve made it possible. You can try it live from either locally installed samples or from the live demo. Find the links provided above.

So you might be wondering, what kind of applications that you can built with such natural user experience concept? There are a lot, to give you some insights, think of a kiosk application that runs full screen, a modern CRM application, or a back-office application for management executives. Or what about the next Facebook spin-off? I’ve heard a lot of users complaining on the poor Facebook user interface that makes basic tasks so difficult – try it yourself, how many steps you need to send a message for a friend, or upload photos on a specific album?

1. The ClientUI Control Explorer

The ClientUI Control Explorer featuring deep navigation, search box and amazing user experiences

Tags: Scalable Composite Application, Modular On-demand Loading, Deep-link Navigation Architecture, ISO-Standards User Experiences, Search Box, Tool Bar, Tool Group, Navigation Bar, Callout, MVVM, Binding, Commanding, Template Selector, Container Style Selector, Elegant Styles
Online Demo: http://live.clientui.com
Installed In: [Sample Folder]\Intersoft.ClientUI.Samples\MainPage.xaml

Out of hundreds of compelling and inspiring samples, the ClientUI Control Explorer deserves the #1 position for the best and most interesting sample that describes the ClientUI as a whole.

Not only does it take advantage of the Silverlight and ClientUI power to the max, the control explorer sports a very unique and elegant design that took us nearly 7 times of continuous revamp before it stands as it is today. Apart of that 7 times revamp, the user experience aspects have been enhanced several dozens times and the final version you seen today was the one selected out of many proposed designs. This took the most of our resources – from graphic designers, user experience architects, development team, to system architects and end-users, gathering together to build the explorer to perfection.

If you take a closer look, our samples was shipped with a total of nearly 30 megabytes worth of assets, yet the control explorer launches in only 2-3 seconds. This is exactly the model of rich internet application that we want to bring in this release, which ultimately delivers the real-world apps that users will really love to use.

The remaining question would be, how is that possible to create rich user experiences that load in just few seconds? The answer is fundamentally the same technique that Windows or Leopard used to power their operating system. Think of loading only several required drivers and very small “shell” for quick startup, and then load the applications when users demanded it. ClientUI is architected with similar “shell” concept to enable truly scalable composite Silverlight application. Hopefully in the next few weeks, a basic sample can be published to demonstrate how it works, so you can use it as the reference and starting point for your next Silverlight projects.

The other factor that makes the control explorer the best sample is how it pushes the Silverlight capabilities beyond the limit. From the search box, journal-aware multiple level navigation, cover flow selection, the tool bar with commanding, window, dialog box, callout and popover, to the sample manager and property options – everything is strictly built upon MVVM pattern. This is something impossible to be done before due to the lack of technology and user interface library in the Silverlight itself.

ClientUI Control Explorer

The image above illustrates the navigation architecture that “just works”. You can perform navigation in many different ways such as those indicated in the red hotspot above – either by clicking the launch button, double clicking on the cover flow item, choosing an item from the Top Category panel, selecting a product from the Controls Map, or pressing Enter from a search box result, the navigation will just work – consistently and reliably. Without thoughtfully-architected MVVM, a powerful navigation framework and the entire UI lineups to support it, I don’t have any ideas how that can be possibly done.

Now, you too can build such engaging navigation experience. Go ahead, download the ClientUI evaluation copy for yourself. We left the Sample Launcher and the Assets project open-source, so you can explore and learn how to deal with many UI challenges with MVVM.

Summary

If you feel like in the mood of browsing and aren’t in rush in the next couple hours, I suggest you to enjoy every sample and explore the options available in each sample. Jump straight to the Showcase to start your own ClientUI journey.

The complete frameworks and user interface library available in ClientUI enable you to create literally any kind of application interfaces and user experiences you dream of – using the development pattern you preferred, either the classic View-Model pattern or the modern Model-View-ViewModel pattern. If you’re serious about building great user interface applications for the Silverlight and WPF, you should consider investing on our subscription licenses, rest assured that we’re maximizing every dollar that you invested through rapid growth and constant innovation.

Tell us what you think about ClientUI. Which samples do you like the most? Are there any specific user interface scenarios or application samples that you would like to see? Let us know and we’ll try our best to cover them in the next blog post, or in the next sample updates.

All the best,
Jimmy.

ClientUI RTM Is Released

After the busiest two months since the RC release, we’re delighted to announce the gold release of ClientUI today. This RTM release ships with a vast array of business-inspiring samples and UI pattern, product documentation, countless of enhancements and even more new controls.

Here are some useful links for you to quickly getting started.

ClientUI.com Is Live

Along with the birth of ClientUI, today we officially launched ClientUI.com, a new micro-site dedicated to provide the latest updates, information, resources and showcases of ClientUI.

ClientUI.com home page

Fashioned in a visually-compelling and modern design, the ClientUI.com represents the branding experiences of the product itself which emphasize on great user experiences.

You can explore many content and resources that we brought in this initial release, such as the overview and get started page. And due to large requests, we’ve got the complete controls listed in a nicely arranged groups based on the control’s functionality.

ClientUI controls list

Click here to start your ClientUI.com experience.

New ClientUI Showcase

While you’re at ClientUI.com, make sure you check out many exciting stuff in the Showcase page. Featuring hundreds of business-inspiring samples and compelling UI patterns built entirely with ClientUI, the showcase lets you find fresh ideas and attractive UI samples to be instantly put on your project.

Click here to visit ClientUI Showcase.

At the heart of the showcase is the intuitive Control Explorer that hosts these hundreds of samples, loads the required external packages on demand, and displays the content in an elegant transparent-window style interface. The control explorer is built entirely with MVVM pattern and fully takes advantage of several ClientUI’s key technologies, including journal-aware navigation with deep link and external package mapping, events routing and commanding, and binding library for easy data binding in templates and setters. This is definitely something interesting to be discussed further, but for now, let’s just enjoy the new stuff we delivered today.

As soon as the Control Explorer loads in few seconds, you’ll be served with a collection of mouth-watering samples presented in an intuitive 3D cover flow interface, ranging from simple sign-up form, airmail-style contact form, to elegant iPad-style task list and much more.

ClientUI Control Explorer

To get started, flip through the collection of samples (try using mouse wheel), and double click on the item or click on the Launch Sample button to see the sample. As we designed the interface to be really simple and easy-to-use, you can quickly interact with user interface to achieve several common tasks, including typing in the search box to search specific samples, or click Browse All to see all available samples grouped by functionality.

Needless to say more, click here to start exploring ClientUI Live Samples.

Even More Controls in RTM

Ever since we released the Release Candidate early last month, our development team continuously shaping up the entire ClientUI lineups with enhancements and fundamental controls that are paramount to build rich, real-world business applications.

I thought this list might be useful for developers who have worked on RC and would like to know the enhancements and addition in the RTM. Some of the notable new controls and enhancements are as follow.

UXScrollViewer (New Control)

If you take a closer look at many of our labs or individual samples in RC, you’ll probably noticed on one general missing component, a scroll viewer with intuitive, standards-compliance scroll bar.

The problem with Silverlight’s built-in scroll viewer or scrollbar is that they don’t behave like the one that we expected in a professional business application. Compare the previous UXListBox using standard scrollbar and the new UXListBox with our new UXScrollViewer.

image

All ClientUI selection controls have also been updated with the new UXScrollViewer in the RTM release, including UXListBox, UXComboBox, UXAccordion, and many other content controls.

UXComboBox (New Features)

UXComboBox receives major enhancements and new features to enable various data input scenarios. In the RC, the UXComboBox supports only read-only mode where you generally perform input selection through the dropdown list. The RTM release includes support for both read-only and editable mode.

We even include several bonus features such as as-you-type auto-completion.

image

And a nice usability standard implementation for text search that supports case sensitive and insensitive mode which is consistently applied to UXListBox as well as other selection controls. For instance, with a non-editable combo box or list box focused, it’s intuitive to press a character to quickly jump to the item starting with that character. See the illustration below.

image

UXSearchBox (New Control)

One of the most significant additions in the RTM release is a rich-featured, MVVM-ready search box that can be easily styled to your liking. Similar to combo box, the search box has built-in drop down to show the search results which supports navigation through NavigateUri or NavigateUriMemberPath (for MVVM).

Our goal for the search box in this release is to support two most common search scenarios. The first is to support searching with auto dropdown mode. See below.

image

And the other is to support searching where the search results is bound to other visual element instead of the search box itself. This has become a very common search UX pattern adopted in various popular applications today, such as in iTunes, Windows Explorer, and more.

The sample below is a fully-functional Flickr Photo Browser that uses UXSearchBox to get photo results from Flickr service and bind them to an UXFlow.

image

To try the new UXSearchBox, head to UXSearchBox Samples.

To find out more enhancements, please refer to the Products Documentation that shipped in the ClientUI RTM installer, or explore the controls online from the ClientUI Live Samples.

Get Started with Your Next Rich User Experiences

With the ClientUI officially released, now it is your turn to build something amazing for your users. To help you get started with ClientUI, we’ve listed down everything you need to know in a nicely arranged Getting Started page.

PS: All lab samples that I showcased in my series of blog posts have also been updated to use the RTM build. The lab samples can be accessed below:

If you have installed the ClientUI RTM, you can find the source code of the lab samples in the sub group of WebUI Studio 2010 group. For any questions or feedback, please post them to ClientUI Community Forum.

Last but not least, enjoy the ClientUI experiences. We hope you love the ClientUI as much as we do.

Update 8/23/2010: The new product licenses has been sent to all customers with active subscriptions via email. Please login to Developer Network to get the keys for product activation. For prospects, go to www.clientui.com/download to download the 30-day free evaluation version.

All the best,
Jimmy.