Home » Blog

Archive for the ‘WPF’ category

Working with the Data Grid – Day 2

Tagged as WPF, WPF Elements

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!

Add your comments
Posted by CallumG on 14 December 2011

FREE: 5 Professional WPF Themes

Tagged as News, Products, WPF, WPF Elements

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.

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.

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.

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.

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!

Add your comments
Posted by John-Daniel Trask on 13 December 2011

Working with the Data Grid – Day 1

Tagged as Products, WPF, WPF Elements

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:

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

Add your comments
Posted by CallumG on 12 December 2011

The summer sale is here!

Tagged as General, LightSpeed, MegaPack, NHibernate Designer, Phone Elements, Products, SharePoint, Silverlight Elements, SimpleDB Management Tools, WPF, WPF Diagrams, WPF Elements, WPF Property Grid

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!

Add your comments
Posted by John-Daniel Trask on 31 May 2011

String formatting in WPF and Silverlight

Tagged as General, Silverlight, WPF

If you’re building controls or applications that display numbers and dates, you’re going to want to have a good understanding of how to format them nicely. In WPF and Silverlight, this is achieved using the static String.Format method which has a few overloads. The method overload we’ll be looking at takes in a string and an object as the parameters. The string parameter is a format string which will be used to format the given object. The object is whatever we want to convert to a string such as a double or a DateTime. In this blog post we will look at just a few of the many format strings provided by WPF and Silverlight for formating doubles and DateTimes. The general structure of a format string is: “{0:*}” where the * is replaced with the format string itself.

C# String format for double

Most format strings for double values are comprised of some numbers or symbols followed by a decimal point followed by some more numbers or symbols. The most common string format for formatting a double value is to specify the number of decimal places. As seen in the examples below, the number of following zeros define the exact number of decimal places to display. The number of “#” symbols can be used to define a maximum number of decimal places while only displaying digits if they are not zero. The last example below shows how “0.0#” can be used to specify that at least one decimal place is always shown, but only a maximum of two decimal places.

// exactly two decimal places
String.Format("{0:0.00}", 123.4567);      // "123.46"
String.Format("{0:0.00}", 123.4);         // "123.40"
String.Format("{0:0.00}", 123.0);         // "123.00"
 
// at most two decimal places
String.Format("{0:0.##}", 123.4567);      // "123.46"
String.Format("{0:0.##}", 123.4);         // "123.4"
String.Format("{0:0.##}", 123.0);         // "123"
 
// one or two decimal places
String.Format("{0:0.0#}", 123.4567);      // "123.46"
String.Format("{0:0.0#}", 123.4);         // "123.4"
String.Format("{0:0.0#}", 123.0);         // "123.0"

C# String format for DateTime

Format strings for DateTime objects are built up as a sequence of grouped letters. Each letter targets a particular part of the DateTime such as the year, day or hour. The number of letters in each group defines how that part should be formatted. Below is a list of some of the letters and the results of applying them to a DateTime.

DateTime dt = new DateTime(2008, 3, 9, 16, 5, 7, 0);
 
String.Format("{0:y yy yyy yyyy}", dt);  // "8 08 008 2008"      year
String.Format("{0:M MM MMM MMMM}", dt);  // "3 03 Mar March"     month
String.Format("{0:d dd ddd dddd}", dt);  // "9 09 Sun Sunday"    day
String.Format("{0:h hh H HH}",     dt);  // "4 04 16 16"         hour 12/24
String.Format("{0:m mm}",          dt);  // "5 05"               minute
String.Format("{0:s ss}",          dt);  // "7 07"               second
String.Format("{0:t tt}",          dt);  // "P PM"               AM or PM

By using any combination of these letter groups within a format string, you can display a DateTime in any possible way you need. Between each letter group, you may also want to include a symbol such as a comma, colon or slash. The slash and colon symbols are special characters known as the date separator and time separator respectively. One thing to keep in mind is that the date and time separator characters may be displayed differently depending on the current culture of the application. Month and day names will also be displayed in different languages based on the culture.

// DateTime format examples
 
String.Format("{0:MM/dd/yy}", dt);            // "03/09/08"
String.Format("{0:dddd, MMMM d, yyyy}", dt);  // "Sunday, March 9, 2008"
String.Format("{0:d/M/yyyy HH:mm:ss}", dt);   // "9/3/2008 16:05:07"

Format strings in XAML

If you ever come across a situation where you need to set a property of an object in XAML to be a format string, you may notice a small problem. Format strings such as the ones described in this blog post start and end with the curly bracket symbols. So the following code will fail to compile because the curly bracket is a special character which XAML will interpret in its own way rather than using it as a string.

<MyFormattingObject FormatString="{0:0.0}" />

To get around this issue, all we need to do is place an empty pair of curly brackets before the format string to tell XAML to interpret it as a string value.

<MyFormattingObject FormatString="{}{0:0.0}" />

More information

For a more extensive list of format string tips and tricks, you can follow this link to find DateTime formats, and check here to find string formats for doubles.

Add your comments
Posted by Jason on 31 August 2010