The Progress Bar - DevExpress XPF Blog

WPF and Silverlight Themes – Introducing the Seven Theme

2011-08-23T22:48:37Z

As part of our continuous effort to enhance the visual experience of using our WPF and Silverlight controls, we have been working hard to complement our products with new themes. With the latest release of DXperience vol 2011 v1.7, we have introduced the new “Seven” theme, which matches (but doesn't completely imitate) the appearance of the Microsoft Windows 7 operating system. This elegant theme can be immediately applied to your WPF and Silverlight based business applications.

Here are some screenshots to demonstrate the look and feel of the theme:

WPF Data Grid Control – PLINQ Data Support

2011-08-22T20:53:54Z

Starting with the latest v2011 vol1 update (11.1.7), we have introduced PLINQ data source support for the DXGrid Control for WPF. The DevExpress Data Grid for WPF can now operate on any in-memory IEnumerable data sources using Parallel LINQ (PLINQ), improving performance for data-intensive operations (e.g. sorting, grouping, filtering, summary calculation, etc.) by making full use of all the available processors/cores on the system.

For this, DevExpress offers two new components (PLINQ data sources), each designed to address a specific data-processing mode (synchronous and asynchronous) – PLinqServerModeDataSource and PLinqInstantFeedbackDataSource, respectively.

To make it easier for you to access and use them at design-time, both data sources are presented in WPF Designer Toolbox. Note that these are non-visual components for WPF.

To get started with enabling support for Parallel LINQ, you should specify the source collection for a PLINQ data source and bind it to the grid. The source collection must implement IEnumerable<T>. The exact type of its elements should not be specified as the type is automatically evaluated at runtime.

There are three ways to specify the source collection:

Use the ItemsSource property if a source collection implements IEnumerable<T>
Use the ListSource property if a source collection implements IListSource.
If PLinqInstantFeedbackDataSource is used, you can dynamically specify the source collection within the GetEnumerable event handler.

 <dx:PLinqInstantFeedbackDataSource Name="pLinqInstantSource" ListSource="{Binding Path=DataContext.ListSource}" />
<dxg:GridControl Name="grid" ItemsSource="{Binding ElementName=pLinqInstantSource, Path=Data}">
 

When using PLinqInstantFeedbackDataSource, the source collection can be dynamically populated by the IListSource.GetList() method or within the GetEnumerable event handler. In these instances, data objects are loaded in a separate thread, allowing you to perform time-consuming operations (e.g. create large volumes of data) without UI freezing. You should however ensure that the operations remain thread safe.

One thing to be aware of when using PLinqInstantFeedbackDataSource, is that this PLINQ data source must be disposed of to terminate the processing thread and release all the resources that it owns. This can be done either by calling its Dispose() method or by executing DisposeCommand. For instance, you can execute this command in an MVVM-friendly manner using EventTrigger after a window has been closed (Example: http://www.devexpress.com/example=E3382).

 <i:Interaction.Triggers>
    <i:EventTrigger EventName="Closed">
        <i:InvokeCommandAction Command="{Binding ElementName=pLinqInstantSource, Path=DisposeCommand}" />
    </i:EventTrigger>
</i:Interaction.Triggers>
 

Our PLINQ data sources provide properties (DefaultSorting, AreSourceRowsThreadSafe), allowing you to specify default sorting and whether data objects in a source collection are thread safe.

Since PLINQ is not implemented in Silverlight, we’ve introduced a new data source for Silverlight – LinqToObjectsInstantFeedbackDataSource, which processes in-memory data in Instant Feedback^TM UI Mode. This data source is similar to PLinqInstantFeedbackDataSource for WPF. The only difference is that all data-intensive tasks (sorting, grouping, etc.) are run in a single separate thread (Example: http://www.devexpress.com/example=E3383).

PLinqServerModeDataSource and PLinqInstantFeedbackDataSource are WPF specific wrappers around PLinqServerModeSource and PLinqInstantFeedbackSource. These two data sources are not platform-dependent and can be bound to DevExpress data-aware controls (e.g. XtraGrid) in WinForms applications. PLinqServerModeSource can also be used with DevExpress ASPxGridView control in ASP.NET applications.

Benchmark Test

We’ve made an internal performance testing on Intel Core i5 4-cores processor that compares the performance of the DevExpress WPF Data Grid control bound to PLinqServerModeDataSource and plain List<T>. The source collection has included 10,000,000 records.

This superb performance has been achieved by using compiled lambda-expressions in our PLINQ data sources.

The test application for this demo is available on CodeCentral: http://www.devexpress.com/example=E3382

WPF & Silverlight Tree List Control - Tree Derivation Modes

2011-08-22T20:27:45Z

In data bound mode, the TreeListView can display information in a tree from either self-referential (flat) or hierarchical data structure. For each type of data structure, corresponding tree derivation mode(s) can be specified using the TreeDerivationMode property:

Self-Referential Data Structure

This data structure (e.g. a table or list of business objects) should contain two special (service) fields:

Key Field

This field must contain unique values used to identify nodes. Its name should be assigned to the TreeListView.KeyFieldName property.
Parent Field

This field contains values (pointers) that reference parent nodes. Its name should be assigned to the TreeListView.ParentFieldName property.

The only requirement is that service fields must contain data of the same type.

The image below illustrates how the TreeListView generates a tree based on Key-Parent pairs:

An example can be found on CodeCentral: http://www.devexpress.com/example=E3127

Hierarchical Data Structure

In this context, a hierarchical data structure is any set of nested business objects that have a structure where the children of a node are in a ‘children’ field. Parents and children can be different object types.

Assume a Project-Stage-Task business class structure:

 public class ProjectObject : BaseObject
{
    public ObservableCollection<ProjectStage> Stages { get; set; }
}
 
public class ProjectStage : BaseObject
{
    public ObservableCollection<Task> Tasks { get; set; }
}
 
public class Task : BaseObject
{
    State state;
    // ...
}
 

When working with such data structures, the tree list’s ItemsSource contains only data items that correspond to root nodes. In the example above, these are ProjectObject items.

To display the entire hierarchy, you can use one of the two approaches offered by the DevExpress TreeList Control:

1. Using Hierarchical Data Templates

With this option, you can take advantage of hierarchical data templates:

 <UserControl.Resources>
    <ResourceDictionary>
        <local:CustomHierarchicalDataTemplateSelector x:Key="selector">
            <local:CustomHierarchicalDataTemplateSelector.ProjectDataTemplate>
                <sdk:HierarchicalDataTemplate ItemsSource="{Binding Path=Stages}" />
            </local:CustomHierarchicalDataTemplateSelector.ProjectDataTemplate>
            <local:CustomHierarchicalDataTemplateSelector.ProjectStageDataTemplate>
                <sdk:HierarchicalDataTemplate ItemsSource="{Binding Path=Tasks}" />
            </local:CustomHierarchicalDataTemplateSelector.ProjectStageDataTemplate>
        </local:CustomHierarchicalDataTemplateSelector>
    </ResourceDictionary>
</UserControl.Resources>
 

Create a template selector which implements System.Windows.Controls.DataTemplateSelector and override the SelectTemplate method.

 public class CustomHierarchicalDataTemplateSelector : DataTemplateSelector
{
    public HierarchicalDataTemplate ProjectDataTemplate { get; set; }
    public HierarchicalDataTemplate ProjectStageDataTemplate { get; set; }
 
    public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
    {
        if (item is ProjectObject)
            return ProjectDataTemplate;
        if (item is ProjectStage)
            return ProjectStageDataTemplate;
        return null;
    }
}
 

Assign the template selector to the TreeListView’s DataRowTemplateSelector property and switch to HierarchicalDataTemplate tree derivation mode:

 <dxg:TreeListControl.View>
    <dxg:TreeListView DataRowTemplateSelector="{StaticResource selector}"
                        TreeDerivationMode="HierarchicalDataTemplate" />
</dxg:TreeListControl.View>
 

If all business objects have the same ‘children’ field, create a single template and assign it to the TreeListView’s DataRowTemplate property.

In WPF, you can define hierarchical data templates without a key in your resources. Instead, you specify the data type it should be applied to, like this:

 <ResourceDictionary>
    <HierarchicalDataTemplate DataType="{x:Type local:ProjectObject}" ItemsSource="{Binding Path=Stages}" />
    <HierarchicalDataTemplate DataType="{x:Type local:ProjectStage}" ItemsSource="{Binding Path=Tasks}" />
</ResourceDictionary>
 
<dxg:TreeListControl.View>
    <dxg:TreeListView TreeDerivationMode="HierarchicalDataTemplate" />
</dxg:TreeListControl.View> 
 

How does the TreeListView select a template?

First, the TreeListView verifies its DataRowTemplateSelector property. If the specified node selector returns null or the DataRowTemplateSelector property is not specified, a template specified by the DataRowTemplate property is used. If this property is not specified, an implicit hierarchical data template is used.

Once the required HierarchicalDataTemplate is defined for a node, its ItemTemplate and ItemTemplateSelector properties take priority over the corresponding properties specified by the TreeListView (DataRowTemplate and DataRowTemplateSelector).

Examples of these are available for WPF and Silverlight: http://www.devexpress.com/example=E3410 (WPF), http://www.devexpress.com/example=E3411 (Silverlight)

2. Building a Tree in ‘Code Behind’

In this case, you should manually write code to specify where a data object’s child items come from. So, create a selector class which implements DevExpress.Xpf.Grid.IChildNodeSelector and returns the list of child nodes for the specified node.

For the Project-Stage-Task business class structure, a selector class will be as follows:

 public class CustomChildrenSelector : IChildNodesSelector
{
    public IEnumerable SelectChildren(object item)
    {
        if (item is ProjectStage)
            return ((ProjectStage)item).Tasks;
        else if (item is ProjectObject)
            return ((ProjectObject)item).Stages;
        return null;
    }
}
 

Finally, you should assign the Child Nodes Selector to the TreeListView’s ChildNodesSelector property and set the TreeDerivationMode property to ChildNodeSelector.

 <dxg:TreeListControl x:Name="treeList"
                        ItemsSource="{Binding DataItems}"
                        DataContext="{StaticResource viewModel}">
    <dxg:TreeListControl.Resources>
        <local:CustomChildrenSelector x:Key="childrenSelector"/>
    </dxg:TreeListControl.Resources>
    <dxg:TreeListControl.Columns>
        <dxg:TreeListColumn FieldName="Name" />
        <dxg:TreeListColumn FieldName="Executor" />
        <dxg:TreeListColumn FieldName="State" />
    </dxg:TreeListControl.Columns>
    <dxg:TreeListControl.View>
        <dxg:TreeListView x:Name="view" TreeDerivationMode="ChildNodesSelector"
                            ChildNodesSelector="{StaticResource childrenSelector}"/>
    </dxg:TreeListControl.View>
</dxg:TreeListControl>
 

If all business objects have the same ‘children’ field, assign its name to the TreeListView’s ChildNodesPath property. Otherwise, a Child Nodes Selector should be created.

An example of this is also available CodeCentral: http://www.devexpress.com/example=E3298

MVVM Enhancements in WPF and Silverlight versions of Toolbar, Ribbon and Gallery Controls

2011-08-03T20:42:00Z

In my previous blog post, I introduced the enhanced MVVM support for our WPF & Silverlight Data Grid Control to enable binding for column and summary creation. In this post, I’ll introduce new improvements in three of our other Silverlight and WPF components - DXBars, DXRibbon and GalleryControl. These features make it easy to use the controls when building applications following the MVVM pattern.

The main scenario addressed by this new feature is the automatic generation of visual objects in DXBars, DXRibbon and GalleryControl based on data provided by underlying objects (i.e. by View Model classes).

For the BarManager, the ideal MVVM support case would be as follows: The developer provides 1) a collection of objects each of which describes a toolbar and 2) a collection describing bar commands. As a result the BarManager automatically generates bars and populates them with bar items based on the provided data.

As an example, let's see how one could write an application using the BarManager and the MVVM pattern prior to the introduction of the enhanced features. Here is the markup that creates bars from an underlying collection:

 <UserControl.Resources>
    <local:MyBarModelToBarValueConverter x:Key="barValueConverter"/>
</UserControl.Resources>
<Grid>
    <dxb:BarManager x:Name="barManager1">
        <Grid>
            <dxb:BarContainerControl ItemsSource="{Binding Path=BarsCollecton, Converter={StaticResource barValueConverter}}"/>
        </Grid>
    </dxb:BarManager>
</Grid>
 

In the code, a bar container is populated with bars from a BarsCollection, which is a View Model class. At first glance, this code looks quite simple. However, if you go deeper you will see that it requires additional code to be written:

A custom ValueConverter that will convert collection elements into bar objects
Code that initializes a bar's properties via data binding
Code that synchronizes the bar collection and underlying View Model collection

That’s not all though as the Bar’s own bar items will also need to be populated from another View Model collection. Therefore an additional ValueConverter must be implemented to convert collection elements into bar items. The code complexity increases with increasing the hierarchy level of children in a control. For instance, in DXRibbon, a four level hierarchy will need to be dealt with – requiring more complex code in your project.

So, we looked at these scenarios and made some changes to our controls to make it easier to work with them using the MVVM pattern.

Let’s start with the new properties we’ve added to our DXBars, DXRibbon and GalleryControl controls:

ItemsSource
ItemStyle
ItemTemplate
ItemTemplateSelector

All controls will follow the same naming convention for these properties.

Using these properties you can easily generate a control's items (including nested items) from collections by writing only XAML code, with one exception - code for TemplateSelectors should be written in code-behind files.

So let’s take a look at a View Model that contains a Bars collection:

 public class BarManagerViewModel : DependencyObject
{
    public static readonly DependencyProperty BarsProperty =
        DependencyProperty.Register("Bars", typeof(ObservableCollection<BarViewModel>), typeof(BarManagerViewModel), new PropertyMetadata(null));
 
    public ObservableCollection<BarViewModel> Bars
    {
        get { return (ObservableCollection<BarViewModel>)GetValue(BarsProperty); }
        set { SetValue(BarsProperty, value); }
    }
    //...
}
 

Then suppose we also have another View Model that provides items for bars:

 public class BarViewModel : BarViewModelBase
{
    public static readonly DependencyProperty CommandsProperty;
 
    static BarViewModel()
    {
        CommandsProperty = DependencyProperty.Register("Commands", typeof(ObservableCollection<BarCommand>), typeof(BarViewModel), new PropertyMetadata(null));
    }
    public ObservableCollection<BarCommand> Commands
    {
        get { return ((ObservableCollection<BarCommand>)GetValue(CommandsProperty)); }
        set { SetValue(CommandsProperty, value); }
    }
    //...
}
 

In the code, we'll set a DataContext for the main window to BarManagerViewModel. This DataContext will be propagated to window's children, including a BarManager component:

 BarManagerViewModel viewModel = new BarManagerViewModel();
this.DataContext = viewModel;
 

Once we ensure that the BarManager gets the correct DataContext, we can populate a BarManager from the BarManagerViewModel.Bars collection using data binding:

 <local:BarsDemoModule.Resources>
    <DataTemplate x:Key="barTemplate">
        <ContentControl>
            <dxb:Bar Caption="{Binding Name}"
                     ItemLinksSource="{Binding Commands}"/>
        </ContentControl>
    </DataTemplate>
</local:BarsDemoModule.Resources>
<dxdb:DemoModuleControl>
    <Grid>
        <dxb:BarManager
            BarsSource="{Binding Bars}"
            BarTemplate="{StaticResource barTemplate}"
        />
    </Grid>
</dxdb:DemoModuleControl>
 

In this example, a DataTemplate is used to generate each bar from an underlying View Model (BarViewModel). You’ll notice that BarManagerViewModel.Bars is a collection of BarViewModel objects – this collection's objects are automatically assigned to the DataTemplate's DataContext, allowing us to initialize a bar's settings with properties on BarViewModel.

When defining a DataTemplate for a Bar, the DataTemplate's root element must be ContentControl with a Bar object as the content.

It is also possible to define a style that will be automatically applied to each bar created via a template. For instance, in the markup below, a style defines an item template selector (an object that selects templates for bar items based on your logic).

 <local:BarCommandTemplateSelector x:Key="itemTemplateSelector"/>
 
<Style x:Key="barStyle" TargetType="dxb:Bar">
    <Setter Property="ItemTemplateSelector" Value="{StaticResource itemTemplateSelector}"/>
</Style>
<dxb:BarManager 
    BarsSource="{Binding Bars}" 
    BarTemplate="{StaticResource barTemplate}"
    BarStyle="{StaticResource barStyle}"
/>
 

As seen above, all bindings between View Models and View are set up in XAML, without using code-behind files. However, there is one exception: template selectors must be written in code-behind files. The BarCommandTemplateSelector below chooses between two DataTemplates (subItemTemplate or itemTemplate) based on our model:

 public class BarCommandTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item is BarSubMenuCommand) return (DataTemplate)MVVMBar.SharedResources["subItemTemplate"];
        return (DataTemplate)MVVMBar.SharedResources["itemTemplate"];
    }
}
 

The complete code of this sample can be found in the "MVVM Bars" demos for WPF and Silverlight shipped with the installation.

The described approach is extremely efficient and can also be applied when writing MVVM applications with the DXRibbon and GalleryControl. These controls provide corresponding properties (ItemsSource, ItemStyle, ItemTemplate and ItemTemplateSelector) that allow the controls to be populated with items from underlying collections.

For implementation details, you may refer to the "MVVM Ribbon" demos for WPF and Silverlight included in the installation. The online demos can be launched from our Demo Center at:

http://demos.devexpress.com/DemoCenter/

Finally, below you will find a list of DevExpress classes and properties in DXBars, DXRibbon and GalleryControl that support the MVVM pattern:

Class	Properties
BarManager	BarsSource BarTemplate BarStyle BarTemplateSelector
Bar, BarLinkContainerItem, BarSubItem, PopupMenu, PopupMenuInfo, RibbonPageGroup, ApplicationMenu	ItemLinksSource ItemTemplate ItemStyle ItemTemplateSelector
RibbonControl , RibbonStatusBarControl	CategoriesSource CategoryTemplate CategoryStyle CategoryTemplateSelector
RibbonPageCategory	PagesSource PageTemplate PageTemplateSelector PageStyle
RibbonPage	GroupsSource GroupTemplate GroupStyle GroupTemplateSelector
GalleryControl	GroupsSource GroupTemplate GroupStyle GroupTemplateSelector
GalleryItemGroup	ItemsSource ItemTemplate ItemStyle ItemTemplateSelector

WPF and Silverlight Data Grid – MVVM Enhancements

2011-07-19T17:43:48Z

For typical WPF/Silverlight business application scenarios you can quickly create and setup the DevExpress Grid in XAML:

 <dxg:GridControl ItemsSource="{Binding Source}">
    <dxg:GridControl.Columns>
        <dxg:GridColumn FieldName="FirstName"/>
        <dxg:GridColumn FieldName="LastName"/>
    </dxg:GridControl.Columns>
    <dxg:GridControl.TotalSummary>
        <dxg:GridSummaryItem FieldName="FirstName" SummaryType="Count"/>
    </dxg:GridControl.TotalSummary>
</dxg:GridControl>
 

When engineering Silverlight/WPF applications using the Model-View-ViewModel (MVVM) architectural pattern, you may be required to put the code that describes columns and summaries in Model or ViewModel.

In previous versions of the DXGrid (prior to v2011 vol 1), columns could have been described via DataAnnotations attributes. In this instance, the grid automatically generated columns for all fields in a data source. The only way to customize column settings was to handle the grid’s ColumnsPopulated event in ‘code-behind’.

With the release of DXperience v2011 vol 1, DevExpress WPF/Silverlight Grid Controls support column and summary binding capabilities. The grid can be bound to ViewModel properties that represent collections of objects with column and summary settings, thus minimizing the need for ‘code-behind’ and placing column and summary definition logic in the ViewModel.

Three steps to populate columns and create summary items from the ViewModel:

Describe columns and/or summaries in the ViewModel.
Create columns and summary items based on ViewModel settings.
Setup Grid Control bindings.

View Model Implementation

Let’s consider an Employee business object that contains employee information.

 public class Employee
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string JobTitle { get; set; }
    public string City { get; set; }
    public DateTime BirthDate { get; set; }
}
 

In a Grid Control, data fields (public properties) are represented as columns. To describe a grid column in the ViewModel, create a class whose properties correspond to column settings. Let’s create two classes:

Column - describes a grid column used by default. This class provides properties that correspond to settings common to all grid columns types.
ComboBoxColumn - corresponds to a grid column with a ComboBoxEdit in-place editor. This class provides the Source property that contains a list of combo box items. We’ll use this class to represent an employee’s City.

 public class Column
{
    public string FieldName { get; set; }
    public SettingsType Settings { get; set; }
}
 
public class ComboColumn : Column
{
    public IList Source { get; set; }
}
 
// Enumerates possible types of in-place editors used to edit cell values.
public enum SettingsType { Default, Combo }
 

Next, we’ll create a collection of Column objects in the ViewModel:

 public class ViewModel {
    ...
    public List<string> Cities { get; private set; }
        
    public ObservableCollection<Column> Columns { get; private set; }
 
    public ViewModel() {
        ...
        List<string> _cities = new List<string>();
        foreach (Employee employee in Source) {
            if (!_cities.Contains(employee.City))
                _cities.Add(employee.City);
        }
        Cities = _cities;
        Columns = new ObservableCollection<Column>() {
            new Column() { FieldName = "FirstName", Settings = SettingsType.Default },
            new Column() { FieldName = "LastName", Settings = SettingsType.Default },
            new Column() { FieldName = "BirthDate", Settings = SettingsType.Default },
            new ComboColumn() { FieldName = "City", Settings = SettingsType.Combo, Source = Cities }
        };
    }
}
 

To describe data summaries, we’ll create a corresponding class with summary settings:

 public class Summary
{
    public SummaryItemType Type { get; set; }
    public string FieldName { get; set; }
}
 

In the ViewModel, we’ll create GroupSumary and TotalSummary collections:

 public ObservableCollection<Summary> TotalSummary { get; private set; }
public ObservableCollection<Summary> GroupSummary { get; private set; }
 

Note that we use ObservableCollection to represent the Columns, GroupSummary and TotalSummary collections. These collections should implement INotifyCollectionChanged so that changes made within the ViewModel are automatically reflected by the Grid Control.

Column Templates and Template Selector

WPF and Silverlight data templating model is a perfect solution for representing grid columns based on settings specified in the ViewModel.

Because of this flexibility, we’ll create multiple column templates - one template for each column type. By using a single template, we can create an unlimited number of columns in an unlimited number of grids.

 <Window.Resources>
    <view:ColumnTemplateSelector x:Key="ColumnTemplateSelector"/>
    <DataTemplate x:Key="DefaultColumnTemplate">
        <ContentControl>
            <dxg:GridColumn FieldName="{Binding FieldName}"/>
        </ContentControl>
    </DataTemplate>
    <DataTemplate x:Key="ComboColumnTemplate">
        <ContentControl>
            <dxg:GridColumn FieldName="{Binding FieldName}">
                <dxg:GridColumn.EditSettings>
                    <dxe:ComboBoxEditSettings ItemsSource="{Binding Source}"/>
                </dxg:GridColumn.EditSettings>
            </dxg:GridColumn>
        </ContentControl>
    </DataTemplate>
</Window.Resources>
 

If all grid columns can be described using a single template, assign this template to the grid’s ColumnGeneratorTemplate property; Otherwise, create a Data Template Selector.

Note: No need to worry that Silverlight does not ship with a DataTemplateSeletor. This class is included in our DevExpress.Xpf.Core library and is widely used in our cross-platform controls.

 using System.Windows;
using System.Windows.Controls;
using Model;
 
namespace View {
    public class ColumnTemplateSelector : DataTemplateSelector {
        public override DataTemplate SelectTemplate(object item, DependencyObject container) {
            Column column = (Column)item;
            return (DataTemplate)((Control)container).FindResource(column.Settings + "ColumnTemplate");
        }
    }
}
 

You can create a style to specify settings common to all columns generated using different templates. In WPF and Silverlight 5, you can specify bindings to ViewModel properties within a style (see FieldName below):

This style should be assigned to the grid’s ColumnGeneratorStyle property.

 <Style x:Key="ColumnStyle" TargetType="dxg:GridColumn">
    <Setter Property="FilterPopupMode" Value="CheckedList"/>
    <Setter Property="FieldName" Value="{Binding FieldName}"/>
</Style>
 

Summary Template

Summary items are also generated from templates. A template that describes total summaries should be assigned to the grid’s TotalSummaryGeneratorTemplate property. A group summary template should be assigned to the GroupSummaryGeneratorTemplate property.

For purposes of this blog, it will be a single template for group and total summaries.

 <DataTemplate x:Key="SummaryTemplate">
    <ContentControl>
        <dxg:GridSummaryItem FieldName="{Binding Path=(dx:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                    SummaryType="{Binding Path=(dx:DependencyObjectExtensions.DataContext).Type, RelativeSource={RelativeSource Self}}"/>
    </ContentControl>
</DataTemplate>
 

Bindings Setup

For the final step, we’ll bind the grid to the Columns, TotalSummary and GroupSummary properties in the ViewModel, specify the column template selector, total and group summary templates.

 <dxg:GridControl Name="grid"
            ItemsSource="{Binding Source}"
            ColumnsSource="{Binding Columns}"
            ColumnGeneratorTemplateSelector="{StaticResource ColumnTemplateSelector}"
            TotalSummarySource="{Binding TotalSummary}"
            TotalSummaryGeneratorTemplate="{StaticResource SummaryTemplate}"
            GroupSummarySource="{Binding GroupSummary}"
            GroupSummaryGeneratorTemplate="{StaticResource SummaryTemplate}">
    <dxg:GridControl.View>
        <dxg:TableView Name="tableView1"
                AutoWidth="True"
                NavigationStyle="Cell"
                ShowTotalSummary="True"
                IsTotalSummaryMenuEnabled="False"/>
    </dxg:GridControl.View>
</dxg:GridControl>
 

To see the full source code for this post, download the following example: http://www.devexpress.com/Support/Center/e/E3358.aspx.

Keep tuned to this blog for all the MVVM enhancements shipping with DevExpress Grid Controls for WPF and Silverlight.

Silverlight and WPF Video Training Roundup

2011-07-05T22:38:25Z

During the last month, we’ve put together a number of videos demonstrating the use of several products and features that became available with the latest 2011.1 release of DXperience. Here is a roundup of the tutorial videos to help you get started with our most recent improvements and additions:

WPF Data Grid

Silverlight Data Grid

Implementing the Instant Feedback UI Mode

WPF TreeView Control

Getting Started and Binding to Data

Silverlight TreeView Control

Data Binding Using RIA Services

WPF Ribbon Control

Working with the Powerful Design-time Features

WPF & Silverlight Splash Screen

Product Demo and Introduction

Performance Improvements of DevExpress Silverlight Controls in 2011.1

2011-05-13T22:38:00Z

In my yesterday’s post, I discussed the compatibility of our upcoming 2011.1 controls with the Silverlight 5 platform as well as the memory consumption improvements that developers and end-users will benefit from. That is however not the only improvements you are bound to see... thanks to a multitude of optimizations applied to our core products, you will notice dramatic performance improvements as well as decreased memory utilization across the board.

What are the performance improvements?

Loading themes on demand
_
Themes for dependency features will no longer be loaded automatically unless they corresponding control is invoked within the application. As an example, if you have an application with a DXGrid control and have also included the ability to print/export the grid, only theme resources for the DXGrid control are loaded. The themes for the dependency features – in this case the printing library – will only be loaded when the end-user actually attempts to preview and print the grid control. While I used our Silverlight Grid control as an example, note that this is implemented across the board for all of our Silverlight products.
_
Refactoring
_
We have thoroughly refactored our XAML markup to improve the loading performance of our controls.
_
Unlinked themes
_
The code for theme libraries has been greatly improved so that theme modules can be unlinked, delivering outstanding performance and end-user experience.
_

Test bed Configuration

To compare the memory consumption of our Silverlight controls between each version, we used a machine with the following specifications:

CPU: Intel Core 2 Duo 3.00 GHz
Memory: 4GB
OS: Windows 7 Enterprise, SP1, 32-Bit
Browser: Internet Explorer 9
Silverlight Runtime Version: 4.0.60310.0
DevExpress Silverlight Controls: 2010.2 and 2011.1

For the scenarios, we created two sample applications that were put through rigorous tests, gradually increasing memory allocation. The standard memory consumption was measured at launch and then repeated every time another theme was applied to the application.

Results

The first test was a simple application with a DevExpress Silverlight Grid control bound to a data source. You can see the double-digit memory utilization decrease when themes are applied at runtime:

The second test application was designed to mimic the look and feel of Microsoft Outlook, combining the use of the DevExpress Silverlight Grid, Silverlight Ribbon, and the Silverlight NavBar controls. As you’ll see in the chart below, memory consumption was still noticeably lower than the 10.2 version of the controls:

DevExpress Silverlight Controls and Silverlight 5

2011-05-12T23:35:00Z

What do we do when a new Silverlight version is announced and made publicly available as a beta? We make sure that our controls not only work in the new release, but also provide outstanding performance! That’s exactly what we have done with our upcoming 2011.1 Silverlight controls and the Silverlight 5 Public Beta.

Following several compatibility testing runs and performance comparisons, we are proud to announce that our 2011.1 release of Silverlight products will be compatible with the Silverlight 5 platform! While there remain a few minor issues – reproducible only in very specific scenarios - that are introduced as part of the currently available build of Silverlight 5, we’ll continue to work with Microsoft to ensure those are resolved and have no affect on our products’ overall functionality and stability.

But, we wouldn’t rest with just compatibility. Using our controls with Silverlight 5 also produced some amazing results in terms of memory consumption. Let’s take a look at some numbers...

Here we have a sample application using our Silverlight Grid Control bound to a sample data source:

You can see the dramatic improvement in memory consumption compared to Silverlight 4 when the application is loaded as well as when any of our themes are applied to our application.

We then took this a step further and created another sample application – one mimicking the look and feel of an Outlook-style application. This application was using our Silverlight Grid, Silverlight Ribbon, and Silverlight NavBar controls:

Using the same measurement criteria, we see similar results in terms of improved memory consumption.

So, how do you – the developer – benefit from this? You get an existing suite of advanced Silverlight controls that are not only compatible with the new Silverlight 5 platform, but also use up to 21% less memory in typical application scenarios.

Silverlight and WPF Splash Screen

2011-05-12T23:10:00Z

Splash screens... with the powerful computers and devices on the market, one may argue that they are no longer needed. While certainly a valid argument with regards to native application performance, the need for some sort of an automated loading/splash screen is increasingly becoming relevant again thanks to ever-expanding rich internet applications. As developers, we all know that not all of our customers are bound to have high-end machines or top-of-the line internet connectivity, as such providing a good user experience during application startup is a crucial component.

Splash Screens are easy to implement, but we at DevExpress decided to make it even easier for implementation within your Silverlight and WPF applications. Thus we are introducing the DXSplashScreen for Silverlight and WPF in the upcoming 2011.1 release of DXperience.

How does it work in Silverlight?

The DXSplashScreen can be added to your Silverlight application’s web project using a new item template:

Click image for a larger version.

Once selected, the required XAML and JavaScript content are generated and also added to your project. This will make sure that the splash screen is automatically run during application startup. When loaded, the default splash screen will look as follows:

How does it work in WPF?

The WPF version of DXSplashScreen can be added to the project in the same manner:

Click image for a larger version.

Following selection, the splash screen XAML file is generated and added to the project. You can then use a single line of code to invoke the splash screen at application startup and then use another line of code to close it once resource loading has been completed.

The default splash screen features a marquee progress bar, but of course, this can be easily changed through code. Furthermore, since the splash screen is rendered using standard XAML markup, you can completely customize it to match your application’s look and feel.

This is what the standard splash screen design looks like:

Silverlight Grid – Design Time Enhancements

2011-05-11T23:59:00Z

The upcoming 2011.1 release of DXperience introduces powerful design-time support for our Silverlight Grid control within Visual Studio 2010 and Expression Blend. The enhancements include the intuitive Quick Customization Panel that enables lightning-fast access to required objects, changing the view type as well as modifying its settings, populating a view with columns and finally, assigning column data editors.

The screenshot above shows that column headers can now be clicked to select the column and set its properties. The following short clip shows how the design-time functionality can be used to add new columns, set their editors, and finally delete them.

Keep in mind that when a column or view within the grid is selected, its lists of properties and events are exposed through the Properties panel within Visual Studio.

Silverlight and WPF Grid – Group Intervals for DateTime Columns in Server Mode

2011-05-10T17:02:32Z

Following my last announcement about enhanced server mode functionality, there is another feature coming up in the 2011.1 release of DXperience that I wanted to briefly mention.

In the next major release of the DevExpress Silverlight and WPF grid controls, Group Intervals for DateTime columns can be calculated on the server-side when Server Mode is enabled in the grid. This means that you won’t notice a difference nor need to take any precautions when implementing group intervals in a grid bound using Server Mode.

Here is a screenshot of data grouped by a DateTime column and its group intervals displayed within the group header rows:

Click image for a larger version.

Silverlight and WPF Grid – Custom Expressions for Unbound Columns in Server Mode

2011-05-10T16:44:00Z

The upcoming 2011.1 release of DXperience will include support for populating unbound grid columns in server mode using custom expressions. These expressions can be specified through code, at design-time, or at runtime using the DevExpress Expression Editor built into the DXGrid for Silverlight and WPF.

The Expression Editor can be used by you or your end-users at runtime to create an expression using any of the available functions and operators. These expressions can reference other columns and then calculate a new value on the server-side before displaying them within your unbound column.

Here is a screenshot of the Expression Editor launched for an unbound “Total” column in DXGrid for WPF:

Click image for a larger version.

Thanks to our common-codebase initiative – XPF – this feature has also been simultaneously developed for our Silverlight Grid. Here is a screenshot of the same demo in Silverlight:

Click image for larger version

WPF Grid Control – Video on implementing the Instant Feedback UI Mode

2011-05-05T21:34:36Z

In this earlier post I announced the availability of the Instant Feedback UI Mode in the upcoming 2011.1 release of DXperience. Check out the following video on the DevExpress Channel that demonstrates how to implement the Instant Feedback UI Mode in the DXGrid control for WPF.

Click on the image to watch the video:

Silverlight Grid Control – Instant Feedback UI Mode

2011-05-04T21:55:17Z

In this post, I announced the new, smooth scrolling features that will ship in the Silverlight Grid Control as part of the 2011.1 release of DXperience. While that is a great addition to our Silverlight Grid Control, I wanted to put together this post to highlight another exciting and anticipated feature coming up in the 2011.1 version of the DXGrid for Silverlight.

The Instant Feedback UI Mode is an advanced data binding mode that is very similar in concept to the DevExpress Server Mode, in that data is retrieved only in portions that are required to populate the view and data-aware operations are performed on the server. Instant Feedback Mode is, however, an asynchronous server mode. The difference lies in how the grid behaves when data is being retrieved and populated. When a user scrolls through the records in Server Mode, the grid first waits for the partial data to be fetched before populating the rows. Depending on the data source performance, the volume of data being retrieved, and the network connectivity, the user may notice a considerable control freeze. Instant Feedback Mode addresses this issue by continuing to respond to the user’s actions while the data is being retrieved. The user can continue to scroll through records, and even re-sort, re-group and re-filter the control’s data. If required, the control will cancel the previous request and initiate a new request to the data source. To provide visual feedback, the Instant Feedback binding mode also includes options to display an animation indicating the status of operations within the grid.

The following short animation demonstrates the Instant Feedback mode in action. There are over 100,000 records being retrieved from a SQL Server database and as would be expected, it requires a short amount of time to process the Grid’s requests and retrieve data. In this quick demo, you can see that data management features such as grouping are also performed on the server and take advantage of the Instant Feedback UI functionality.

Stay tuned for a video demonstrating how to implement the Instant Feedback UI Mode for the DevExpress Silverlight Grid Control.

WPF Grid TreeList View and WPF Project Wizard

2011-05-04T19:00:26Z

Last week, I announced the new TreeList Control and TreeList View for WPF and Silverlight. This is just a quick not to let you know that the TreeList View will be available as a view option for the WPF Grid control in the DevExpress WPF Project Wizard.

So if you need to quickly create a WPF application and use a TreeList View, you can do so directly from the Project Wizard without having to write a single line of code: