Tag Archives: UX

WebUI Studio Designer Reimagined

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.

Introducing WebUI Studio Designer for Visual Studio 2012

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.

Designer support in older version of Visual Studio

Intersoft Component Designer for Visual Studio 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.

Layout Manager

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.

Component Designer with 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.

Structure Manager

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.

Pre VS 2012 designer for WebGrid

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.

WebGrid Designer for Visual Studio 2012

WebGrid Designer for Visual Studio 2012

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…

Pre VS 2012 WebGrid designer

… into just a single Advanced tab shown below.

WebGrid designer with smarter user experiences

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.

WebGrid designer with smarter user experiences

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

Advertisements

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

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.

UXRibbon for Silverlight

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.

Backstage Menu in Intersoft UXRibbon

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.

UXRibbon - Superior User Experiences

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.

UXRibbon for WPF

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.

WebRibbon for ASP.NET/HTML5

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

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.

Transparent glass window with cover flow

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.

Ribbon integrated to glass window

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

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.

ContentTransition with default strategy

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.

ContentTransition with advanced transition strategy

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.

Smooth window resizing

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

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

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

Configuring the UXSliderBar

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

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

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

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

UXSliderBar1

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

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

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

UXSliderBar2

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

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

UXSliderBar3

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

Creating Grade Converter

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

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

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

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

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

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

The GradeConverter.cs looks like the following:

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

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

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

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

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

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

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

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

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

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

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

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

Hence, the final code will look like following:

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

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

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

Summary

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

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

Regards,

-Martin-

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

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.

Standard Layout

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:

<Intersoft:DockPanel>

    <Border Background="{StaticResource NavBackground}" 
            BorderBrush="Gray" BorderThickness="1">
         <Grid>
              <Intersoft:UXItemsControl x:Name="NavigationItemsContainer" 
                ItemContainerStyle="{StaticResource NavigationButtonStyle}">
                   ...
              </Intersoft:UXItemsControl>
         </Grid>
    </Border>

    ...

</Intersoft:DockPanel>

Resizable Layout:

<Intersoft:DockPanel>

    <Intersoft:UXResizablePane Background="{StaticResource NavBackground}" 
            BorderBrush="Gray" BorderThickness="1">
         <Grid>
              <Intersoft:UXItemsControl x:Name="NavigationItemsContainer" 
                ItemContainerStyle="{StaticResource NavigationButtonStyle}">
                   ...
              </Intersoft:UXItemsControl>
         </Grid>
    </Intersoft:UXResizablePane>

    ...

</Intersoft:DockPanel>

Resizable layout using 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.

Collapsible panel

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.

image

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.

Vertical resizable layout

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:UXPopup x:Name="PopupElement" 
           BoundaryOffset="{TemplateBinding BoundaryOffset}" ...>

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

            <Intersoft:UXScrollViewer x:Name="ScrollElement" Padding="2">
                        <ItemsPresenter x:Name="ItemsPresenter"/>
            </Intersoft:UXScrollViewer>

       </Intersoft:UXResizablePane>
</Intersoft:UXPopup>

The results look like the following.

Resizable combo box

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

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.

Row details with expand button

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.

Nested UXGridView

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.

Select column with row checker

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.

Deferred scrolling with customizable visual hint

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.

ISO-standards UX

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