Introduction

DevExpress is one of the leading providers of developer components for Microsoft Windows based solutions. In fact, this year they are celebrating their 15 year anniversary as a company. In their latest suite of controls, they have a very large assortment of different controls for a variety of technology platforms, such as:

• WinForms (120+ Controls)
• ASP.NET (90+ Controls)
• ASP.NET MVC (50+ Controls)
• WPF (80+ Controls)
• Silverlight (75+ Controls)
• Windows 8 XAML
• Reporting
• Dashboard
• Document Server
• XAF Application Framework
• DevExtreme Mobile

In this review of the 2013 v13.2 release, I will highlight what is new in the respective areas. But first, let’s install the suite.

Installation of the DevExpress Universal 2013 v13.2 suite

DevExpress distribute their components in an installer that provides a very user friendly and streamlined way of setting up your environment. If you simply wants to download a 30 day evolution, just head over to the Free Universal Trial page. That downloads a small web installer, which is a very clean simple a nice looking installer that makes installation a breeze:

   

By the way, that’s a really nice looking installation wizard. If you want to do something similar for Windows Desktop, DevExpress provides that kind of look and feel in their WinForms components.

Windows Forms

---

Windows Forms still lives on and DevExpress keeps on adding new exciting controls and features to their existing line up. In the 13.2 release these are the new features:

Grid Enhancements

The Grid View is a very competent data grid component that is now getting these exiting additions:

Windows Explorer View

This view will mimic the standard Windows Explore way of displaying items.

Inline Data Editing

By double clicking a row, the inline editing capabilities are enabled:

Web Style Row Editing

This editing style can be used with check boxes, both on line level and column header level in order to easily select single, all or multiple items.

ASP.NET

---

Ribbon Control (Web Forms and MVC)

The ribbon control was introduced in Microsoft Office 2007 and has been a great productivity improvement. Its way of categorizing command is now finally possible in your web page.

Spreadsheet Control (Web Forms)

Excel in a web page? Well, this would have been something crazy a coupe of years ago, but now DevExpress has made it possible. Just look at the different formulas you can let the mathematical inclined user select from:

If that isn’t enough, let your users knock themselves out by adding charts to their spreadsheet. Just look at all of these charts they can add:

 

This is almost too crazy, your users will love you for this.

Grid Batch Editing (Web Forms and MVC)

With this new addition to the Grid control, multiple changes can be edited client side, and when the user clicks Save Changes, all of the changes will be pushed back to the server in one request. Very handy to minimize the chattiness of your web page.

Application Themes (Web Forms and MVC)

Users really likes to personalize the look and feel of their workplace, and with the Application Themes you can let them change the web page, or even the web application to something that’s more of their liking.

Token Box Control (Web Forms and MVC)

This is a very popular control for letting the user select multiple items from a list. It makes it very easy to search for items, as well as remove selected items.

When the user types in the input box, it will do an automatic search and highlight found items.

Custom Color Picker (Web Forms and MVC)

Ever wanted to able to select colors from a color palette? It couldn’t be easier than with this control. It supports custom number of columns, custom palettes and even select a complete custom color from a color picker.

 

Form Layout Extension (MVC)

If you ever have been struggling with getting the layout of your controls looking nice, this MVC control will makes it very easy to make a well-designed layout:

Grid Lookup Extension (MVC)

This is a very powerful extension to a drop down control. It essentially lets you display a grid in the drop down, complete with check-boxes for multiple selections and additional data for each item in the data list.

Rating Extension (MVC)

This is a standard rating control that enables you to let the user enter their rating for a particular item based on the familiar 5-start principle.

WPF

---

Spreadsheet Control

Much like the ASP.NET WebForms version discussed above, this is also a very comprehensive and complete spread sheet control. It has all of the charts and formulas from its ASP.NET sibling, but it also adds some more nice touches.

 

PDF Viewer

With the WPF PDF Viewer control, you can easily add PDF reading capabilities. Functions like Print, Find, Zoom in and out are available.

Themes

As with the ASP.NET themes control, this WPF version also allows the user to select a them of their choice:

Sparkline Control

To present trending information in a data grid, DevExpress has added the possibility to add a Sparkline control.

You can either add lines:

or areas:

Windows 8 Dialog and Message Box

One thing that Windows Store apps have is the new message box that covers the whole width of the screen. Now you can easily achieve this in your WPF application by using this control:

Windows 8

Please see my separate post about the DevExpress Windows 8 XAML controls.

Conclusion

I have found that the DevExpress Universal suite of controls are very professional and slick looking. All of the controls seems to enable you as a developer creating good performing application, whether it’s an ASP.NET based application, a Windows 8 Store App, or a more traditional WinForms, WPF or Silverlight application. Please take the 30 day trial for a spin and see how easy it is to make your users having a great consistent Windows Store app experience.
Disclosure of Material Connection: I received one or more of the products or services
mentioned above for free in the hope that I would mention it on my blog. Regardless, I
only recommend products or services I use personally and believe my readers will enjoy.
I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255:
“Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Introduction

This is an additional post to my DevExpress review posted here.  In this post I will focus on how you can add Windows 8 Hub Tiles to your app using DevExpress Windows 8 XAML components.

Windows 8 XAML components

Unless you have been living under a rock for the last 2 years, it will not as a surprise to you that the new uCheckser interface paradigm in the Windows Store Apps is drastically different than the way Windows Desktop application has been looking for the last 20 years or so. DevExpress is now offering a new set of Windows 8 XAML based controls that perfectly falls into the new design language. In this mini review, I will be looking at the Hub Tile Components.

The first thing you will notice when you start Windows 8 is a “sea” of tiles that let you quickly get an overview and status of your most common application and start any of them. DevExpress is offering a new exciting component that lets you very easily mimic the Windows Start Screen; it’s called the Hub Tiles control.

Windows 8 Hub Tiles

In this demo I will be walk you through how to create a simple application that will benefit from the DevExpress Hub Tile component. It’s a simple recipe app with static data, but in a real world scenario it would either connect to a web service or at least a local database.

Creating a project

When creating a Windows Store app, DevExpress installs a handful of templates in the Template Gallery that makes the process even simpler.

A nice touch is that the template automatically create a MVVM (Model View ViewModel) based project, a paradigm that is very common in XAML based development. DevExpress provides base classes that makes data binding and INotifactionPropertyChanged events easily consumed.

So let’s first create a data source for our Hub Tiles. This is very convenient to do, so you can data bind the visual elements in the tile to some data.

  public class Recipe
  {
    public string Name { get; set; }
    public string Image { get; set; }
    public string Prep { get; set; }
    public string Cook { get; set; }

    public string Ready { get; set; }

    public ImageSource ImageSource
    {
      get { return string.IsNullOrEmpty(Image) ? null : new BitmapImage(new Uri(Image, UriKind.RelativeOrAbsolute)); }
    }
  }

  public static class Recipes
  {
    private const string UriPrefix = "ms-appx:///SimpleRecipe";

    public static readonly List<Recipe> DataSource =
    new List<Recipe> {
                new Recipe {
                    Name = "New York Cheesecake",
                    Image = UriPrefix + "/Images/730824.jpg",
                    Prep="30mins",
                    Cook="1",
                    Ready = "7h 30min"
                },
                new Recipe {
                    Name = "Cream Cheese Frosting II",
                    Image = UriPrefix + "/Images/959805.jpg",
                    Prep = "10mins",
                    Ready = "10mins"
                }
            };
  }

 

Let’s see how we easily can present this data in a Hub Tile.

First, let’s get an overview of the different type of tiles that are available:

• Slide Hub Tile.
  This is a tile that has 2 sides (front and back). It will slide up the contents of the data that it’s bound to in sequence.
• Swing Hub Tile.
  This tile also has 2 sides, but it “swings” the content back and forth.
• Hub Tile.
  A tile that has 2 sides (front and back). It will switch between the 2 sides automatically in sequence.

So let’s pick the Slide Hub Tile and see how we easily can bind it to our data.

      <Layout:SlideHubTile Size="Large" Background="#FF6CBD45" Grid.RowSpan="2" ContentSource="{Binding Recipes}" 
                           ContentChangeInterval="00:00:04.00" BackContent="{Binding Recipes}" AnimationInterval="0:0:7">
        <Layout:SlideHubTile.ContentTemplate>
          <DataTemplate>
            <Grid>
              <Image Source="{Binding ImageSource}" Stretch="UniformToFill" HorizontalAlignment="Center" />
              <Grid Background="#FF6CBD45" HorizontalAlignment="Right" VerticalAlignment="Top">
                <StackPanel Margin="4">
                  <TextBlock FontSize="14" Text="{Binding Name}"/>
                </StackPanel>
              </Grid>
              <Grid Background="#FF6CBD45" HorizontalAlignment="Left" VerticalAlignment="Bottom">
                <StackPanel Margin="4">
                  <TextBlock FontSize="16" Text="{Binding Cook, Converter={StaticResource stringFormatConverter}, ConverterParameter=\{0:H0\}}" />
                </StackPanel>
              </Grid>
            </Grid>
          </DataTemplate>
        </Layout:SlideHubTile.ContentTemplate>
        <Layout:SlideHubTile.BackContentTemplate>
          <DataTemplate>
            <ListView ItemsSource="{Binding}" SelectionMode="None" BorderThickness="0" 
                      Foreground="{Binding Foreground,RelativeSource={RelativeSource TemplatedParent}}">
              <ListView.ItemTemplate>
                <DataTemplate>
                  <StackPanel>
                    <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Center" FontWeight="SemiBold" />
                    <StackPanel Orientation="Horizontal">
                      <TextBlock Text="{Binding Prep, Converter={StaticResource stringFormatConverter}, ConverterParameter=\{0\} Preparation}" 
                                    Margin="0,0,4,0" />
                      <TextBlock Text="{Binding Cook, Converter={StaticResource stringFormatConverter}, ConverterParameter=\{0\} Cook}" 
                                 Margin="0,0,4,0" />
                      <TextBlock Text="{Binding Ready, Converter={StaticResource stringFormatConverter}, ConverterParameter=\{0\} Ready}" />
                    </StackPanel>
                  </StackPanel>
                </DataTemplate>
              </ListView.ItemTemplate>
            </ListView>
          </DataTemplate>
        </Layout:SlideHubTile.BackContentTemplate>
      </Layout:SlideHubTile>

 

The result is a Hub Tile that will Slide the images of your recipe up within the tile:

Conclusion

I have found that the DevExpress Windows 8 XAML controls makes it very easy to implement the Windows Store user interface design language into your own application. It abstracts the tedious work of implementing Windows Store user controls functionality yourself.

Please take the 30 day trial a spin and see how easy it is to make your users having a great consistent Windows Store app experience.

 

Disclosure of Material Connection: I received one or more of the products or services
mentioned above for free in the hope that I would mention it on my blog. Regardless, I
only recommend products or services I use personally and believe my readers will enjoy.
I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255:
“Guides Concerning the Use of Endorsements and Testimonials in Advertising.”