Intersoft Solutions Corporate Blog » UX

WebUI Studio Designer Reimagined

Jimmy Petrus — Wed, 22 Aug 2012 19:38:48 +0000

Last week, Microsoft has finally released its long awaited Visual Studio 2012 to the MSDN subscribers. As VSIP partners, we had the RTM bits several weeks earlier and started testing our component designer features for the new Visual Studio.

Just in timely fashion, we’ve recently completed the development and testing milestones for our new component designer – rebuilt entirely from the scratch to provide the best support for Visual Studio 2012. In this blog post, I’ll share some of the design experiences while remaking our component designer. Read on.

The Visual Studio 2012 UX Guidelines

Since the invention of “Metro” design language, Microsoft has been redesigning all its software products toward the modern UI design, including the recently released Visual Studio 2012. As a result of the redesign, Microsoft has now introduced the so-called “Visual Studio 2012 UX Guidelines” which has to be adhered by its development ecosystem partners. We’re thrilled to be among the first who have adhered to the UX guidelines, and will release our new version at the same time of the official Visual Studio 2012 launch.

To adhere to the UX guidelines, our designer team have redesigned nearly 200+ toolbox icons to the Metro style. Furthermore, we decided to remake the component designer to support the new look and feel of Visual Studio 2012, and more importantly, to support the philosophy of the user experiences which essentially emphasizes on content with reduced decorators.

Meet the new Component Designer for Visual Studio 2012. It’s rebuilt entirely from the scratch to resemble the Visual Studio 2012 interface. The all-new designer is now built on the WPF 4 platform and leveraging our own ClientUI for WPF controls – thanks to the comprehensive and easily style-able controls, we managed to remake the component designer ahead of the expected schedule.

The following screenshot shows the new WebUI Studio component designer with much cleaner design and Metro’s iconography.

It’s important to note that previous version of Visual Studio will continue to be supported. The WebUI Studio component designer launches the new WPF-based designer only when it’s running inside Visual Studio 2012. This is made possible thanks to the loosely-coupled architecture in the component designer framework.

So, when you’re working with WebUI Studio components in Visual Studio 2008 or 2010, you’ll get the old, clunky component designer with sea of colors. And when you’re in Visual Studio 2012, it automatically launches the new modern-styled component designer. Keep in mind that the control assemblies are identical regardless of the Visual Studio version.

The shots below show the designer comparison between the Visual Studio 2010 and 2012.

One of the most useful benefits with the migration to WPF is that you get automatic support for the screen resolution and font scaling. This means that if your Windows is set to use 125% larger font, the component designer will automatically reflect the control and layout to fit to the desired scale. The WinForms layout didn’t have that luxury, and it’s extremely difficult to manage the auto scaling settings. This is why you’ll find many inappropriately truncated text and graphics in the old designer when using larger font scaling.

Furthermore, the WPF designer has much better performance compared to WinForms in terms of initial loading, rendering, animation and navigation. This allows us to achieve the “fast and fluid” user experiences.

Back to the main subject, we actually reimagine all aspects of the designer – whether it’s the functionality or the design. For examples, compared to the previous version, the new Layout Manager has much cleaner surface, and eventually makes it more intuitive and easier-to-use at a glance. The art of this design language is that it focuses on the content and brings the functionality back to where it supposed to be. Take a look at the screenshot below.

We also pay attention on the user experience details where message boxes should be avoided whenever possible. In this remake, we’re now displaying important messages in the accented status bar.

Meanwhile, the Structure Manager is also redesigned with the identical aesthetic and consistent layout, enabling users to understand the user interface with less learning curves.

Simplified and Smarter User Experiences

One thing that we learnt about Metro design language is that it’s not only about the user interface, i.e., the colors, themes or shapes. The true essences behind the philosophy is the simplified user experiences. But, the “simplified” here doesn’t necessary mean removing features, it’s more to making user experiences smarter which allows users to perform a task or function in less time, and more efficiently.

We have a number of interesting stories about making user experiences simpler yet smarter while remaking the component designer for WebGrid.

With hundreds of features, it’s quite challenging to find a particular setting or feature in the property window. So we introduced a component designer to address this challenge that looks like the following shot.

I personally think that the idea and purpose of such designer is good, although the existing design may now look cluttered. At a glance, the settings are spreading everywhere. Notice that we have numerous in the left-side navigation vertically, and also some tabs in the top arranged horizontally.

In the WebGrid designer remake, we managed to put everything back to where it should through a deep category rearrange that is based on content and function similarity. Tabs such as Advanced, Localization Manager and Pivot Charting are now removed from the top since they are now part of the Properties. Redundant navigation items are merged into a content that makes more sense. See the shots below to get a closer look.

With the designs shown above, you’re no longer served with massive user interface elements that present the same function. So the Properties tab basically means that “come here for all settings-related tasks”. This allows us to keep the design ideal with balanced functionality. Lessons learned.

Similarly, we simplify the Caching and Performance Tuning tabs such as shown below…

… into just a single Advanced tab shown below.

We designed smarter user experiences by categorizing them into expandable groups styled with lightly-shaded accent and Metro colors.

Furthermore, the new designer is not simply a remaking effort, we actually added a number of new options that makes performance tuning a breeze. Notice the red highlighted area in the shot above, you can now enable the built-in resources compression with a single click. This feature actually existed since the 2009 release, but not easily discoverable as you need to manually make changes to the web.config file.

More options are now added to the Common Settings view which includes the new features introduced in the recent releases. For instances, enabling HTML5 rendering mode across the application is simply a tick away.

All 40+ Component Designer Redesigned

In this blog post, I’ve only scratched the surface of our new component designer for Visual Studio 2012. In addition to flagship products such as WebGrid, we also update the designer of entire WebUI Studio family, including WebCombo, WebInput, WebScheduler, WebTextEditor and the rest of components resembled in WebDesktop and WebEssentials.

As far as I can say, we’re making WebUI Studio the first-class citizen of Visual Studio 2012 which enables both products to work best together for the ultimate application development experiences.

We’re expecting to deliver all these new exciting features in the upcoming WebUI Studio service pack release by next week – and hopefully faster. The service pack will also include many new enhancements for Windows 8 and Internet Explorer 10, all-new project templates for Visual Studio 2012, as well as reliability improvements to all Silverlight and WPF components. Stay tuned for the release announcement!

Best,
Jimmy

First Look: Intersoft Ribbon UI for Silverlight, WPF and ASP.NET

Jimmy Petrus — Sat, 22 Oct 2011 16:19:26 +0000

Last month, I blogged about some new windowing controls that we will ship in our upcoming release. In that post, I’ve also mentioned about the new ribbon controls which turns out to be one of the key highlights in the release. In this post, I’ll share our excitement about this particular control, its key features and benefits, and more importantly, why does it matter to you.

Ever since Microsoft enhanced its Ribbon UI in Office 2010 and expanded the use of Ribbon in its Windows 7, more and more developers have begun to adopt the Ribbon UI in their line-of-business applications today – regardless of whether it’s running on the web or on the desktop. On the web, you can find numerous business apps that are now Ribbon-friendly, including Microsoft’s latest Office web apps, SharePoint 2010 and its new Dynamics business solutions lineup.

As a leading UI component vendor, we recognized developer’s needs very well on the Ribbon control, particularly the ones that fully conform to the Office’s Fluent User Interface specification. Our goal is to create feature-rich Ribbon control that pay very detailed attention to the user experiences, yet incredibly easy-to-use. Today, I’m pleased to introduce you our latest masterpiece, Intersoft Ribbon UI for All-platform.

That said, no matter which platform your applications were built on – whether it’s on Silverlight, WPF, ASP.NET, or even HTML 5 – we’ve got you covered. With shared key features and design across different platforms, you can now build immersive Ribbon-friendly apps with your platform of choice without trading off the existing infrastructure and technology investments.

Next, I’ll highlight our Ribbon’s key features implemented in each platform. Read on.

For Silverlight

Among the three platforms, Silverlight is arguably the most appealing platform for developers to build their business apps on. The reasons are obvious – it’s a rich GUI framework that runs on all major browsers and supports both Windows & Mac (unlike the recently announced WinRT which runs only on Win8 but that’ll be another story) – and not to mention its compact runtime that weight only about 6MB. Adding the IE 64 bit support in Silverlight 5 makes it even more appealing as the LoB platform of choice.

So it’s not surprising that our Ribbon for Silverlight (further called UXRibbon) receives the most attention in terms of the design, features, and many user experience aspects. UXRibbon has many features, like in other ribbons, from fluid resizing to dozens of button variants – which I’m not interested to cover in this post. The point of interests that I will share today in this post are mostly the user experience aspects of UXRibbon which aren’t available in the other ribbons.

Let’s start with a quick question, if you have used other ribbons before, have you ever noticed that those ribbons always steal the control focus when you do something on the ribbon? This means that you have to spent an extra click to get back to what you worked on previously. Thankfully, you won’t get such issue in UXRibbon as it’s taken care automatically. This is just an example of a small yet important detail that we implemented as part of our compliance to the ISO standards user experiences.

Furthermore, we designed UXRibbon to be incredibly easy to use. For example, when you define a contextual tab group, you don’t need extra code to show which tab to be shown. It’ll intuitively show the first tab of the contextual group when it’s the first-time selected, and smartly reselect the last selected tab when applicable – just like the way it works in Office apps.

To minimize learning curves, we’ve created numerous reference samples so you can easily explore all the features in one place. While the easiest way to demonstrate Ribbon is through the Word sample, I eventually found it to be quite boring. And even worse, it’s an inspiration killer. Why? Because it leads many developers to believe that Ribbon is only ideal in a text processing application. I often asked by our clients this way “So, if you think Ribbon can be used in business apps, show me!”. Well, that motivates us to come up with several business-inspiring reference samples which we’ll ship in the upcoming release.

One of my favorite LoB samples is the Ribbon usage in a CRM application. As you can see in the following figure, Ribbon enforces a neat organization of commands where related functions are grouped together. Commands that are applicable on certain context can be grouped in contextual tabs which are naturally shown on demand. Trust me, users will praise you to make their work life so much easier.

Built from the ground up to create Office’s latest fluent user experiences, UXRibbon employs modern API and design that directly refers to the Office 2010 specifications – unlike many other ribbon solutions that simply “patch” their ribbons which were originally built with Office 2007 design. As the results, UXRibbon is more sophisticated in terms of design, yet fully customizable in terms of usage.

Take an example from the UXRibbon’s application menu and backstage feature. With the ease of property sets, you can quickly define the background of the application menu which doesn’t only apply to the menu’s header, but also consistently throughout the entire backstage interface such as the header line and the active backstage menu. See the following illustration for a closer preview.

To wrap up this section, I would like to share two more unique features that I haven’t seen in any ribbons in the market yet. It’s again the user experience aspects of the Ribbon.

The first one is the state-of-the-art text wrapping feature, which smartly detect when it should wrap the exceeding text to the second line. It also merges with the dropdown arrow in the case of dropdown and split button. This small yet important detail makes more sense to the whole Ribbon concept, otherwise the Ribbon layout will be further increased by 18 pixels.

Out of dozens of Ribbon-specific controls, the Gallery List is the most sophisticated Ribbon element which participates with the fluid resizing process. UXRibbon’s Gallery List is so meticulously designed so that it feels sleeker and slightly better compared to the original Office design.

Both features are better visualized in the following illustration.

For WPF

UXRibbon for WPF shares very much the same features with Silverlight, so I won’t repeat them again here. Although the functionality is identical, many of the user experience aspects have been specifically optimized for the WPF platform behind the scene. This includes the special integration with UXRibbonGlassWindow which enables the ribbon to appear in non-client area of the window. With the window entirely “glassified” and combined with the pixel-perfect contextual tab design, you can now easily create your own Office 2010 style desktop applications.

The following figure shows the UXRibbon control in the CRM scenario running on WPF. Notice that all styling details and user experience aspects are equally identical with the Silverlight version.

For ASP.NET

You might have heard that we are all for the Silverlight and WPF tools in the next release, that’s not wrong – but keep reminded that we’re fully committed to continue supporting and adding new tools for the ASP.NET platform. That said, the next release will include dozens of enhancements to the existing flagship components such as the new data transfer format for WebGrid, removed dependencies to ActiveX, and enhanced AJAX security to prevent XSS issues.

In addition, the next release will introduce a new member, WebRibbonBar, joining the WebEssentials family. Similar to the Silverlight and WPF version, the RibbonBar for ASP.NET also supports rich UI elements such as contextual tabs and application menu, as well as several button variants like dropdown, split button, and toggle button. It also implements fluent resizing with smooth user experiences that conforms to the Office Ribbon specifications.

Despite of the rich features, WebRibbonBar is designed to be extremely lightweight and strongly focused on line-of-business scenarios. As the results, WebRibbonBar delivers blazing-fast performance particularly when the fluent resizing takes place. See the following figure demonstrating the ASP.NET ribbon control used in the same CRM sample scenario.

In conclusion, the “Ribbon Initiatives” is one of the important milestones in our product roadmap. We’re particularly delighted to deliver the Ribbon control supporting all the three platforms in a single release. With the rich features and fluent user experiences concept, get ready to take your business apps to the next level. Be sure to check it out when it’s released in the coming week. Stay tuned!

Best,
Jimmy

Coming in ClientUI 6: New Window Controls for WPF

Jimmy Petrus — Sat, 24 Sep 2011 11:05:37 +0000

The upcoming volume release of WebUI Studio will include a major version of ClientUI, Intersoft’s flagship UI suite for Silverlight and WPF development. I’ve shared some details of the new controls which you can read in my previous post here. In addition to many Silverlight and data-centric controls, ClientUI 6 is also strongly focused in new user interface controls for WPF development. Among the new WPF stuff are some cool windowing controls which I’ll cover in this blog post.

With its fast user adoption and exponential growth, Windows 7 is a platform too hard to ignore for developers – despite of all the recent buzz in web and cloud platform. This is further supported by the recent announcement that Microsoft has sold 450 million copies of Windows 7, which makes it “still” the world’s most popular operating system.

So what does this all mean to you? If you’re building Windows apps, I’d say that it’s now the right time to upgrade your desktop apps and take advantage of many new user interface features in Windows 7 – which will surely welcomed by Windows’ large consumer base. The first step that you can do for a quick start, for example, is to change the classic window interface to Windows 7’s new Aero-glass.

Our upcoming tools for WPF will include a new window control that takes advantage of Windows 7’s enhanced Aero-glass user experience. With just a single markup declaration, UXGlassWindow transforms your existing classic desktop apps into beautifully-looking apps with Windows 7’s slick Aero-glass user experience. UXGlassWindow is unique in the way it handles transparency and custom drawing which enables truly impressive glass interface with borderless content area, yet delivers great performance.

In our recent lab test, we used the graphic intensive control such as UXFlow to test the performance when hosted in the UXGlassWindow. Even with the 3D perspective, reflection and all sort of cool effects enabled, the UXFlow experiences remain swift and fluid. This enables you to design rich apps with UXGlassWindow without have to worry a bit on the overall performance. See the screenshot below for a sneak preview.

Furthermore, the upcoming release will also include a special glass window that integrates to ribbon bar. As you may already aware, the next release will ship a feature-complete ribbon control which offers pixel-perfect rendering, blazing-fast performance and granular control definition. I will blog more about ribbon in the next post.

UXRibbonGlassWindow features true ribbon integration to the client window area, unlike other similar solutions which simply offer a generic glass window. In addition, this special window will be rendered borderless and allows the ribbon to extend perfectly to the edge of the glass window which delivers Office 2010 identical user experiences. See the illustration below.

In conclusion, we have a wide range of exciting tools coming in the next release that enable you to build rich applications faster – whether it’s for the web or for the desktop. The upcoming new Aero-glass window controls, wonderful ribbon bar, and awe-inspiring user experiences are the key components for building powerful, user-centric business apps.

I hope this post gives you some ideas about what we’re working on and what you can expect in the upcoming release. As usual, feedback and questions are warmly welcomed.

Best,
Jimmy

Coming in ClientUI 5: Smooth Content Transition and Enhanced UX

Jimmy Petrus — Mon, 04 Apr 2011 18:20:12 +0000

Our upcoming flagship toolset for the Silverlight and WPF development, ClientUI 5, will include numerous significant enhancements in addition to many new controls – thanks to all customers and partners who contributed valuable feedback through the satisfaction survey that we ran couple months ago.

The survey’s results were both surprising and incredible – 82% of participants stated they are highly satisfied with Intersoft’s products in overall, while nearly 75% of participants provide great feedback to further enhance the products’ quality. The survey yielded three winners with $50 amazon certificate each, announced here.

In this post, I’m pleased to announce that our development team has managed to implement three of the most received feedback particularly on ClientUI for the Silverlight & WPF lineups. The enhancements include a new transition strategy that uses advanced double buffering algorithm for ultra-smooth transition, significant improvements on the memory and resources management, as well as fluid user experiences in the UXDesktop lineup. These enhancements will be included in the upcoming release due later this month.

Ultra-smooth Content Transition

Silverlight, like many other graphical frameworks, used frame-based mechanism for its animation and rendering subsystem. The frame-based animation means that there are a number of simultaneous frames being rendered in a sequence of time. By default, Silverlight runs on an average of 50-70 fps depending on your computer configuration.

One of the limitations with the frame-based rendering is the significant degradation of overall user experiences when the fps rate drops. This results in transition being chopped as some of our customers might have experienced in our transition controls. This is particularly true in rich applications with heavy content, for instances, loading a page with few data grids that are bound to hundreds of records. In such situation, you can consider redesigning your page to include fewer data. Or resort to the last option, turn off the transition.

It sounds to be the end of story – until our development team found a simple, yet brilliant idea. Before we explore further, let’s see the background of the actual issue and how it occurred.

Consider that you have a ContentTransition control in your page which perform sliding transition in 5ms duration. When the content changed due to page navigation, the transition is immediately started by default. In the case that the loaded page is heavy due to data controls and a series of asynchronous calls, the transition will be most likely interrupted. As the results, you will see a chopped transition which perhaps renders only the few frames in the last milliseconds. See the following illustration to get a better picture.

In the above illustration, pay attention to the red-marked lines. Notice that the transition might get interrupted as soon as the content is being constructed. Depending on the complexity of the content being loaded, the interruption can occur within 2-3ms and leave only a few milliseconds for the transition. At the worst, you’ll simply see the results directly without the transition getting its chance to render.

The technique that I mentioned earlier, which we hope to completely address this issue, is called double-buffering rendering algorithm. The idea is to buffer the rendering results before the transition is started. This is actually the similar technique employed in many advanced graphical frameworks, such as the one used in high-end mobile devices like iPad and Galaxy Tab.

The ContentTransition control in the upcoming release will include this advanced transition strategy, which allows for an ultra-smooth transition regardless of the page load overhead. See the improved process in the following illustration, then compare the process with the default one shown above.

The implementation of advanced transition strategy answers one of the most received feedback in our recent survey. It elegantly addresses the limitation of Silverlight’s default frame animation, while at the same dramatically enhancing your application’s user experiences.

Enhanced Cursor Manager and Fluid Window Resizing

The next major release doesn’t only introduce brand-new controls, but also adding significant enhancements to the existing lineup. Based on the recent survey, many of you requested improvements to the windowing controls, mainly the UXDesktop and UXWindow control.

The UXWindow control is perhaps one of the most visually appealing user interface in the ClientUI suite. You can style it to any looks that you desire – a Windows 7-style translucent glass window, or perhaps a minimalistic, Apple-style window. However, in the existing release, you have to be careful to not using too much transparency effect which might cause a number of performance issues, for instances, the resize cursor and window resizing might not working as responsive as expected.

In the next release, we’ve further fine-tuning the user experiences of the entire windowing controls. The cursor manager and window resizing have been dramatically enhanced, delivering highly responsive user experiences that your users are expecting – plus all those beautiful, translucent window effects they loved. See the following illustration.

Last but not least, we’ve also done a great job on improving the memory management of the entire ClientUI lineup which I will share in my next blog post. Please stay tuned while we’re collecting interesting facts and charts.

Best,
Jimmy

Use UXSliderBar to Simplify Data Entry

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

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

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

Configuring the UXSliderBar

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

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

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

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

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

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

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

Creating Grade Converter

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

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

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

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

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

The GradeConverter.cs looks like the following:

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

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

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

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

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

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

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

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

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

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

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

Hence, the final code will look like following:

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

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

Summary

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

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

Regards,

-Martin-

Coming in ClientUI 5: Versatile Resizable Control for Silverlight & WPF

Jimmy Petrus — Fri, 11 Mar 2011 11:54:58 +0000

In addition to many new data-centric controls that we will deliver in the upcoming 2011 volume release, ClientUI 5 will also pack-in a handful of new user interface controls. One of the most important additions to the UI lineups is a versatile resizable layout control, powerful enough to cover a range of common layout scenarios.

A resizable layout control is an essential user interface in today’s modern applications, allowing users to resize a certain section of the interface, or even collapse it entirely to increase screen real estate. Whether you realized it or not, most of the applications you used everyday incorporate a resizable layout, from Windows Explorer, Outlook, to Visual Studio and iTunes. The importance of such fundamental interface motivates us to add a resizable layout control in the next major release of ClientUI, which is also used in a number of upcoming high-end controls such as scheduler, document viewer and more.

Although seems simple, a resizable layout control can be hard-to-use if not thoughtfully architected. In this blog post, I will detail some of the key features of our upcoming UXResizablePane control and its architectural design.

Plug-n-play Resizable Control

There aren’t so many resizable layout control designed for the Silverlight/WPF platform. Some that I found require a layout manager for the resizing to work. This means that you need to revamp your entire layout even if you want to apply the resizing behavior only to one section of the layout. I found this architecture design to be less-than-ideal as it requires extra learning curves and a major overhaul to the existing layout.

Our resizable control is designed to be completely manager-less, which is probably one of its key strengths. Say that you have an existing page that uses a DockPanel layout similar to the following screenshot, and you would like to make the navigation pane resizable. How easy could that be done, you might ask.

In the above scenario, making the left-side navigation resizable is as easy as wrapping it into a UXResizablePane control, no need for a complete layout revamp. See the code example and the results below.

Existing Layout:



    
         
              
                   ...
              
         
    

    ...



Resizable Layout:



    <Intersoft:UXResizablePane Background="{StaticResource NavBackground}" 
            BorderBrush="Gray" BorderThickness="1">
         
              
                   ...
              
         
    Intersoft:UXResizablePane>

    ...

As seen in the above illustration, the left-side navigation pane is now resizable through the provided thumb in the right-edge of the control. As in common desktop applications, users simply drag the resize thumb (indicated by the resize cursor) to start resizing.

Since the UXResizablePane manages the layout by its own, it doesn’t require a specific external controller to know its existence. One of the benefits of such design is that the UXResizablePane can work flawlessly with any built-in Silverlight/WPF panels, whether it’s a StackPanel, WrapPanel, or a Grid.

Another benefit of “manager-less” layout architecture is that developers can use the control without extra learning curves. You can use the same layout properties that you’ve accustomed to, such as applying MinWidth and MaxWidth to the control. When MaxWidth is set, users cannot resize the control larger than the specified MaxWidth value.

Expandable/Collapsible Layout

In addition to the resizing feature, UXResizablePane also sports a built-in expand/collapse user interface located in the header section of the control. Derived from the headered content model, you can completely customize the header element of the control through style or template.

When collapsed, only the Expand button element of the control is visible, which can be customized through the MinWidth property. The appearance of both the header and button element are fully customizable.

Flexible 4-Edge Resize Docking

Another great feature of the UXResizablePane is its flexibility to support resize docking in either vertical or horizontal direction. You can actually place the resize thumb in any of the four-edge of the layout: Left, Top, Bottom or Right. For example, if you wish to make the details content vertically resizable, then you set the ResizeDock property to Top.

In the following illustration, the UXResizablePane is applied to the details content of the Products page. Notice that the expand and collapse button will automatically adjust itself to the appropriate direction based on the ResizeDock property.

Bi-directional Resizing Mode

When we say versatile, we really meant it. Not only it can be used with any inline panels like DockPanel, StackPanel, or Grid; UXResizablePane can also be used to resize non-inline panels such as floating popup, or the dropdown list of a combo box.

The following code example shows how to customize the dropdown list of UXComboBox, which turns a static popup into a resizable popup. Thanks to the loosely-coupled UI design in all ClientUI controls, customization has never been this easy!



    <Intersoft:UXResizablePane AllowExpandCollapse="False" HeaderVisibility="Collapsed" 
          ResizeThumbVisibility="Collapsed" CornerThumbVisibility="Visible" 
          CornerThumbResizeMode="VerticalAndHorizontal">

            
                        
            

       Intersoft:UXResizablePane>

The results look like the following.

With the CornerThumbResizeMode property set to VerticalAndHorizontal, users can drag the corner thumb to resize the popup in both vertical and horizontal direction.

There are still a lot possibilities that you can do with UXResizablePane, hopefully this blog post gives you some cool ideas and insight. The next blog posts would be focused on new exciting tools that we’ll ship in 2011 R1. Stay tuned!

Best,

Jimmy

UXGridView CTP3: Feature-complete Grid for Silverlight & WPF

Jimmy Petrus — Thu, 03 Mar 2011 18:03:35 +0000

I hope you’ve enjoyed the second CTP of our upcoming data controls released a couple weeks ago, which includes MVVM-ready data validation and data editing capabilities, as well as customizable editing control architecture. Make sure you also check out Andry’s blog posts covering the editing features in-depth here and here.

Today, I’m excited to announce the third CTP release of our forthcoming UXGridView control. The release includes the expected feature sets according to the CTP milestone described in my earlier post here, plus a handful of nice additions such as enhanced row details, new expander column, and a sophisticated Gmail-style column checker.

Some of the key highlights in this new CTP are discussed in the following.

QueryDescriptor Enhancement

The QueryDescriptor now includes RaiseQueryChanged() method, thanks to Werner Grift for the nice feedback in the LinkedIn group discussion. With the new method, you can programmatically raise the QueryChanged event in your ViewModel, such as when a related view has changed, or when the view needs to be refreshed due to user interaction like button click (called through the delegate command).

Improved Row Details and Hierarchical Grid

The row details feature receives major update in this new CTP release, which now works with the new expander column. The expander column contains a toggle button which is convenient for users to expand or collapse the row details at runtime, see the illustration below.

With the new expander column, it’s now possible to use the row details for more advanced business scenarios, for instances, implementing a hierarchical/nested grid such as in Customer-Orders scenario.

Another interesting scenario is the support to load the child data “on demand” based on the expanded item. UXGridView now includes a new property called ExpandedItem, making it possible for you to bind the child data on demand in the ViewModel. Both WCF RIA and DevForce samples are provided to demonstrate how to achieve such scenario.

Notice that the paging and other settings can be applied individually in the child grid for best performance and results.

New Select Column

When I got the CTP build fresh from the lab, this particular new feature looks to be the most impressive. It’s one of my favorite features, and certainly deserves to be one of yours. Take a look at the screenshot below.

Although seems common, the select column feature is not available in any other Silverlight/WPF grids in the market – not the one with correct implementation.

The interesting point about this feature is its automatic checked items persistence capability. This means that if you check all the rows in page 1, then go to page 2, the previously checked items will remain persisted. This behavior also applies consistently in all the grid operations such as sorting and grouping. In the above example, we verified the persistence concept by binding the CheckedItems property to a list box which shows all the checked items regardless of the paged view scope.

With the feature correctly implemented along with the MVVM support, it will be useful in many scenarios in business applications – think of web-based mail applications such as Gmail or Hotmail for examples.

Deferred Scrolling Mode

Another nice feature that we managed to include in this CTP release is the deferred scrolling mode. When enabled, dragging the thumb of the vertical scrollbar will not update the view immediately. Instead, an intuitive visual hint will appear near the scrollbar indicating the target row of the scroll position. See the screenshot below for details.

This scrolling mode is particularly useful when you have relatively large amount of rows, and also allowing users to quickly scan the information as they scroll through the viewport.

Standards-Compliant User Experiences

As in our good tradition of development, all Intersoft’s UI controls are designed with the best user experiences that conform to the ISO Standards 9241, including the focus and unfocused behavior, keyboard navigation using arrow keys, and many more.

In this new CTP release, the UXGridView now shows a dimmed focus visual style when the control doesn’t have focus. This enables users to intuitively responding to the user interface based on the visual state presented in the application. The following illustration shows the unfocused visual state of the UXGridView.

Download the CTP3 Bits

In summary, the CTP3 release includes nearly-complete feature sets of UXGridView planned for final release later this month. So far, the latest CTP includes full MVVM support for server data access, server paging and filtering, data validation, editing, customizable edit controls, row details, multiple selection, checker column, deferred scroll mode, flexible appearance and layout settings, and much more. The final release will include more advanced features such as data exporting, data virtualization, and an advanced column filter interface.

Click here to download the CTP3 bits and test-drive the new UXGridView features today. The download package includes latest ClientUI assemblies as well as updated and new samples for both Silverlight and WPF platforms.

Enjoy the new CTP bits! We’d love to hear what you think about the new features available in CTP3, please post your feedback, questions or issues to our community forum.

All the best,
Jimmy

Enhanced ClientUI Navigation Framework for WPF

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

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

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

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

Navigation in Desktop Applications

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

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

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

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

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

Creating WPF Navigation Application with ClientUI

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

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

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

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

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

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

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

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

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

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

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

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

Silverlight Out-of-Browser, Well Supported

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

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

Get the Free Update

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

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

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

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

All the best,

Jimmy Petrus

Chief Software Architect

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

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

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

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

Mac-style Tab Control

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

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

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

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

Metro-style Tab Control

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

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

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

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

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

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

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

Enhanced Currency Editor

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

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

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

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

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

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

Localization Manager Sample

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

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

Offline ClientUI 4 Documentation

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

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

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

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

All the best,
Jimmy Petrus

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

Jimmy Petrus — Sat, 11 Sep 2010 03:40:02 +0000

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.

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.

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.

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.

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.

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.

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.

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:

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.

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.

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