WPF Elements 5 Dashboard Sample

Not long ago we released version 5 of WPF Elements, a suite of fantastic WPF controls (if I do say so myself, as the lead developer…). This version includes a high performance data grid control, a time explorer for selecting time ranges in a convenient manner and hundreds of enhancements across the board. In the latest nightly build you will find a new sample app that demonstrates how to use various controls from WPF elements to build a sales dashboard. This app is built using the Caliburn Micro framework and is implemented using the popular MVVM design pattern.

Pipper Catering Dashboard

User interaction

First lets have a look at what this dashboard provides in the user interface. Along the top of the dashboard is the time explorer control. This allows the user to select a time range by dragging or clicking the mouse. By zooming in with the mouse wheel, the time explorer will display shorter time intervals such as weeks and days. Within the time explorer is a line chart displaying some summary data for the overall dashboard. This makes it easy for the user to select a time range around any interesting points in the data. Every time the user selects a new time range, the data displayed in the charts, gauges and data grid are updated to only include the data in the selected time range.

Time explorer interaction

Data drill down

The stacked bar chart below the time explorer is plotting a category breakdown of the data for each point displayed on the X axis. An individual bar shows the data for either a month, day, or 2 hour time slot based on the magnitude of the selected time range. Clicking on one of the bars will drill down to the next time interval.

Data drill down

Category filtering

Selecting one of the segments in the doughnut chart will filter the data grid by the selected category, and emphasise the appropriate points in the stacked bar chart and the equivalent gauge.

Category filtering

Along the bottom of the dashboard is a text block displaying the total sales value, animated linear gauges, and our WPF data grid. Users can reorder, resize and sort the columns in the data grid to display the current data however they would prefer.

MVVM architecture

The MVVM design pattern is commonly used to create robust WPF applications that are easy to maintain. The main idea behind this pattern is to cleanly separate the data model from the user interface. The only things linking these two parts together should be bindings, commands and event handlers. The data model of the dashboard application listens to changes made to the various controls based on the user interaction. These changes are analysed and the displayed data held within the model is updated to reflect the selected time ranges or filters. The controls within the user interface listen to the changes made to the data model and then updates the visuals for the user to see.

You can download the trial version of the latest nightly build from here, or go to your account page if you are already a customer. The smaller data model classes can be found in the Model folder. The main data model class is called DashboardViewModel, and the UI is built up in the DashboardView.xaml file. The SimpleLinearGauge extends our AnimatedValueDisplay, and the remaining class files are for hooking into the Caliburn Micro framework.

Have any questions about WPF Elements? We’d love to hear from you in the forum!

Working with the Data Grid – Day 2

Following on from the first post about the new WPF Data Grid control in WPF Elements 5, today I’ll be writing about some of the options for customizing it. If you haven’t already checked out the new version with it and over 50 other controls head over and grab the 60 day trial here. Getting the control up and running was pretty easy, and setting the behavior to your specifications is just as simple. So what properties can we set? The follow is a list of some of the important ones, many more tweaks can be made through the API. Adjust the following to taste:

Rows & Columns

  • ShowColumnHeaders- will hide the row of column labels if False. Defaults to True
  • ShowRowHeaders- as above
  • AllowColumnReorder – allows the user to change the order of columns by dragging and dropping
  • RowHeaderWidth – sets the width of the row header block
  • AutoGenerateColumns – will create the columns based on the properties in the bound collection

Frozen Columns

  • FrozenColumnCount – the specified number of columns will remain stationary when the Data Grid is scrolled horizontally
  • ShowFirstFrozenLine – if True if frozen column shadow line will be displayed on the left when FrozenColumnCount is set to 0

Selection & Editing

  • HighlightedCell – gets or sets the cell that has focus (black border)
  • SelectedCell & SelectedCells – gets or sets the cell, or collection of cells that have been selected (yellow highlight). Both highlighted and selected cells can be set programmatically
  • SelectionType – sets a user’s click to highlight either a Row or Cell
  • SelectionMode – Single allows one cell/row to be selected at a time; Multiple adds a single cell/row to the current selection with a click; Extended allows a block of cells/rows to be highlighted through click and drag functionality
  • AllowEditing – if set to True the user will be able to double-click a cell to edit its contents (if False the Data Grid is read-only). Once in editing mode the user can tab across the row
  • SetAllowEditing() – when called on a DataGrid, can set either a cell or a row to be read-only. Can be passed a row or a DataGridCell

Paging

  • IsPagerVisible – shows the pager control if is True (defaults to False)
  • PageSize – sets number of items on a page. Default is 0 (all items on one page)
  • PageIndex – sets the current page to be displayed
  • PagerStyle – allows you to set a custom style for the pager control
  • MaxPagerButtonCount – sets the maximum amount of page buttons to display (including the ellipsis)
  • EllipsisMode – place an ellipsis button (indicating further pages) at positions After, Before, None or Both

For example the following code:

<ms:DataGrid Name="DataGrid" ItemsSource="{Binding Data}" RowHeaderWidth="15" SelectionMode="Extended"
                 SelectionType="Cell" IsPagerVisible="True" PageSize="16" EllipsisMode="Both" MaxPagerButtonCount="5" 
                 AllowColumnReorder="False" FrozenColumnCount="1" >

produces this result:

There is also a whole set of properties for the columns themselves. Naturally you can set Widths & MinWidths, alongside setting the Header (which can be any object, just like a cell). Other properties include AllowSort, AllowResize, AllowEditing, SortDirection and most importantly the DisplayTemplate and EditorTemplate properties, for completely customizing the look and feel of a particular column.

Next time we’ll look at styling the DataGrid, then adding in a custom editor. Download the 60 day trial of WPF Elements now to explore this control plus dozens more. Until next time!

Tagged as WPF, WPF Elements

FREE: 5 Professional WPF Themes

Everyone loves free things! With the recent release of WPF Elements 5 we decided to beef up the free WPF control pack even more. Now in addition to the already free WPF controls you will find 5 professionally built themes to bring your applications to life.

5 superbly crafted themes
We have poured months of effort into creating pixel perfect themes both for the standard WPF controls and the WPF Elements controls. There’s Office Blue, Office Black, Office Silver, Expression (Alloy) and Expression Light (Alloy Light). You’ll be impressed by how easy these themes are to add to your project and your users will be really impressed at how great the application looks.

Three of five themes

Autocomplete Text Box for WPF

Autocomplete text boxes are great. We’ve made some great additions to this control recently and it will really help bring your applications up a level. Check out the new multi-value autocomplete box support that was included recently.

Autocomplete text box

Coverflow for WPF

Popularised in iTunes, Coverflow is a unique way of presenting data to your users. Beyond just static images and thanks to the power of WPF you will find you can set any arbitrary content as your covers — images, videos, other WPF controls, whatever you want! We’ve seen some imaginative uses of the Coverflow control over the years. You will be pleased to find everything you need in the box to configure the display exactly as you want it to be.

Coverflow

Prompt Decorator for WPF

This control adds a polish to your applications. Want to have hint text on your text box and drop down lists? Say “Search” appearing in your search box but disappearing when the user clicks in it? It couldn’t be easier with the Prompt Decorator control.

Prompt Decorator

Get the free controls with the WPF Elements 5 installer. You’re welcome to use the controls and themes listed here at no charge, with no royalties.

Happy coding!

Working with the Data Grid – Day 1

As we’ve previously mentioned, WPF Elements 5 comes with a powerful new control for displaying data in a tabular format, the Data Grid. While I could write about its super fast performance under heavy loads, or its many options, the first thing to mention is how to get a Data Grid up on the screen. Fortunately that’s a simple matter, and in this introductory post I’ll be showing you how to do just that. From there the Data Grid is easily sculpted to fit the needs of your application, and over this series I’ll continue the process by showing you how to build a fully functional data grid customized to specifications.

You might like to check out the demos of the Data Grid in the Sample Explorer that comes bundled with the 60 day trial of WPF Elements. Alongside being able to see the Data Grid in action XAML and code samples are included, ready to inspire your own applications.

But for now we shall build one from scratch! Where to begin?

Setting up the references

The easiest way is to add a reference to WpfElements.dll and then drag a Data Grid control from the toolbox onto your Window or Page. This will add the licenses.licx file to your properties folder and also add the following namespace to your XAML:

xmlns:ms="http://namespaces.mindscape.co.nz/wpf"

Our Data Grid is going to be fairly uninteresting without binding it to a model. To save time I’ve made the following simple example to populate the grid; you can download the source code here and put it in the code-behind (the archive also includes the finished XAML).

We’re ready to go! Here’s the code:

<Grid>
  <ms:DataGrid ItemsSource="{Binding Data}" />
</Grid>

The Data Grid was designed following WPF best practices therefore setting its model is like any other WPF control – just bind the ItemsSource property to a collection of data. Run it, edit cell data, rearrange column order by dragging and dropping, click on a column header to sort – all behave as expected. All with one line of XAML!

You’ll notice that some of the column widths are a little small for many of the records. Also, while the Generic theme is perfectly serviceable, we’ve got five other theme options so we could apply one of those too. Column widths are set inside the DataGrid control as follows:

<ms:DataGrid ItemsSource="{Binding Data}">
  <ms:DataGrid.Columns>
    <ms:DataGridColumn PropertyName="Name" Width="120" />
    <ms:DataGridColumn PropertyName="Address" Width="140" />
    <ms:DataGridColumn PropertyName="Balance" Width="60" />
  </ms:DataGrid.Columns>      
</ms:DataGrid>

As for the theme, I’ll be setting the entire window theme, but if you just want to set the Data Grid control that’s available by setting the ResourceDictionary inside ms:DataGrid.Resources.

<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ms:OfficeBlue />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Window.Resources>

Feel free to check out how OfficeSilver, OfficeBlack, Alloy and AlloyLight look too. The finished result:

Data Grid with Office Blue

As you can see it’s fairly easy to get the Data Grid up and running! In future posts we’ll look at some of the properties we can set on the Data Grid, to control sorting, column reordering, selection modes and of course the editors, both built-in and custom. Finally we’ll apply a custom colored template to the Balance column!

Head on over and grab the 60 day trial of WPF Elements to try out the Data Grid and over 50 other controls here:
Download WPF Elements

The summer sale is here!

Mindscape Summer Sale 2011

Note: This sale has now ended.

For our friends in the northern hemisphere it’s that time of the year – it’s warming up and there’s a holiday approaching. We thought it would be a great time to offer a special for the summer so that you have a great toolbox at your disposal for when you’re coding away on the beach.

Here’s the deal:

For the price of our WPF or Silverlight suites you can get a full Mindscape Mega Pack upgrade at no extra charge! And to save you money in the long run we’ll also add an additional six months of updates! Now that will afford you a few extra Mojitos!

So that’s every Mindscape product — WPF, Silverlight, Windows Phone, LightSpeed, SimpleDB, you name it — and 18 whole months of nightly builds, upgrades and entirely new products! All at a fraction of the price of other competing suites.

Throw on your skate shoes and roll over to the Summer Sale Page!

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top