Home » Blog

Archive for the ‘WPF Elements’ category

Nightly news, 20 January 2012

Tagged as LightSpeed, NHibernate Designer, SimpleDB Management Tools, Web Workbench, WPF Diagrams, WPF Elements

Cripes! Weeks and weeks of updates to catch up on! Here’s what’s new in the nightly builds since the last update.

LightSpeed

• Fix for one-to-one association join chain in LINQ Where clauses
• Added support for negated boolean expressions in LINQ Any and All
• Fixed a memory leak with compiled FindById queries
• Validation errors now provide access to the validation rule instance
• Include schema in auto-joined tables being joined by an identifier expression
• Fixed automatic date-time range validation for Oracle
• Improved support for SQL Server 2008 TIME data type
• Fixed an issue where a query with criteria on the left and a logical combination on the right could be processed incorrectly
• Fix for DeletedOn column being incorrectly aliased in update/delete queries
• Added support for deleting by LINQ query
• Added Procedure and Scale options to ProcedureParameter class
• Fix for procedure parameters of user-defined types in designer being generated into wrapper function signatures as object instead of strongly typed
• Fix for value objects not being handled correctly in batch updates
• Fixed exception if you put DiscriminatorAttribute on a root entity class
• We now raise an exception if a SQL Server stored procedure calls RAISERROR (sic: what is this, guys, Fortran?) after performing a successful SELECT (previously only errors raised before the SELECT would cause exceptions)
• Added a property for migration code to access the connection string of the database being migrated
• When a stored procedure sets an out parameter to SQL NULL, we now translate this to CLR null instead of leaving it as DBNull.Value (this fixes casting errors in strong-typed wrapper methods)
• Fix for virtual (non-mapped) discriminators not being populated on insert
• Entity- and interface-level query filtering (in progress and subject to change)

Web Workbench

• Collapsing support for non-top-level regions
• Sass and Less Format Document command
• Fixed issue in Sass compilation if install path included non-ANSI characters
• Fixed JavaScript minifier mangling non-ANSI characters
• Upgraded CoffeeScript compiler to 1.2.0
• CoffeeScript comment highlighting fixes
• Comment/uncomment block support
• Performance improvements when making many deletes from a document
• Error checking and signature help for Sass and Less built-in functions

WPF Elements

• Continuing improvements to control themes
• Fixes for potential issues in TimeExplorer, Chart, ChartAxis and PieSeries
• Added option for rounding on lost focus in NumericTextBox
• Added ResetZoom command for charts
• MajorTickSpacing now keeps consistent tick density as user zooms
• Added PieSeries.SelectedDataPointChanged event
• Improvements to automatic bar chart width calculation
• Fixed error when changing chart highlight mode
• Fixed an issue with horizontal bar charts using categories along the Y axis
• Resolved a DataGrid issue
• Fixed foreground colours not being respected in CurrencyTextBox
• Fixed potential null reference error when changing DataGrid.ItemsSource
• Fixed some issues with chart default axes

WPF Diagrams

• Added TreeLayoutAlgorithm
• Fixed null reference error in ConnectionPointThumb
• Fixed a diagram binding issue
• Fix for a bug that was stealing mouse wheel and scroll events
• Added an option to turn off infinite scrolling

NHibernate Designer

• Added support for NHibernate sql-insert, sql-update and sql-delete overrides
• Added support for stored procedures and named SQL queries

SimpleDB Management Tools

• No longer need to click away from a row to ensure it is saved

As usual you can get the latest nightly builds from the Downloads page (free editions) or the store (full editions).

Add your comments
Posted by Ivan Towlson on 19 January 2012

Kick start 2012 with this special offer!

Tagged as LightSpeed, MegaPack, News, NHibernate Designer, Phone Elements, Products, Silverlight Elements, SimpleDB Management Tools, Web Workbench, WPF Diagrams, WPF Elements

Make building better software your New Year’s resolution by taking advantage of our 30% sale on the Mega Pack.

For a limited time, pay only $699 and you’ll receive:

• LightSpeed O/R Mapper (normally $349)
• WPF Elements (normally $699)
• WPF Diagrams (normally $699)
• Silverlight Elements (normally $699)
• Phone Elements for WP7 (normally $299)
• NHibernate Designer (normally $99)
• SimpleDB Management Tools (normally $29)
• Web Workbench (normally $29)
• Visual Tools for SharePoint (normally $349)

Plus, you also get:

• 12 months of new releases, nightly builds and new products!
• The best support in the business!

Imagine that – a full range of developer tools across WPF, Silverlight, Windows Phone, Data Access, Web Development and Domain Modeling for just $699!

So, save thousands of dollars by getting all your tools at once with our 30% off Mega Pack Special now.

Hurry, promotion ends 1 Feb 2012!

Add your comments
Posted by John-Daniel Trask on 12 January 2012

WPF Elements 5 Dashboard Sample

Tagged as MegaPack, WPF, WPF Elements

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.

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.

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.

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.

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!

Add your comments
Posted by Jason on 9 January 2012

Working with the Data Grid – Day 3

Tagged as WPF Elements

The Data Grid control in WPF Elements 5 has many powerful features for applying cell templates, custom editors and data validation, and they’re all really easy to use. In minutes you can have a data grid up and running that will present information to the user in a specified style, provide hints in edit mode then check that the data is correct using any validation code you desire.

Building on the example we’re created in the first two posts (part 1, part 2), let’s next add a custom cell template to display the numeric data in the Balance column in a currency format. This can be accomplished by setting the DisplayTemplate property of the appropriate DataGridColumn. WPF Elements 5 includes many useful controls for data display and editing, and the CurrencyTextBox is perfect for our purposes. It will format the value with currency information appropriate to the current culture automatically, as well as taking care of the decimal point and cents entered (if any). The CurrencyTextBox control Add this as a Resource:

<!-- style information to make it look how we want -->
<Style x:Key="NegativeBalanceStyle" TargetType="TextBox">
  <Setter Property="Background" Value="Transparent" />
  <Setter Property="Foreground" Value="DarkRed" />
  <Setter Property="BorderThickness" Value="0" />
</Style>
 
<!-- add the currency text box to our data template -->
<DataTemplate x:Key="BalanceCellTemplate">
  <ms:CurrencyTextBox Value="{Binding Balance}" NegativeStyle="{StaticResource NegativeBalanceStyle}"
                      Background="Transparent" Foreground="White" />
</DataTemplate>

and assigning it to the property:

<ms:DataGridColumn PropertyName="Balance" Width="140"
  DisplayTemplate="{StaticResource BalanceCellTemplate}"/>

will format the Balance column nicely.

Next up is custom cell editors. You can be as creative as you like here – if you have a particular type of data that would be especially intuitive to select in a visual manner, or if a custom converter would assist your users, the WPF Data Grid will support it. There are some great examples in the Sample Explorer demos, such as a metric to imperial (feet + inches) converter, and of course the built-in color pickers. You could even allow users to select a timezone graphically like in the DropDownEditBox demo, right in the middle of a Data Grid cell. All these demos are available in the 60 day trial of WPF Elements 5 which you can grab here.

For the phone number column it would be nice to provide the user with a masked textbox to help them enter the required digits. Again WPF Elements 5 comes with a control with this functionality built-in – the Masked Textbox. To apply this control to our Phone column create these resource:

<DataTemplate x:Key="PhoneEditor">
  <ms:MaskedTextBox Mask="00-000-0000" AutoSkipLiterals="True" Text="{Binding Phone}"
                    LiteralStyle="{StaticResource Literal}" PromptStyle="{StaticResource Prompt}" Background="Transparent"
                    PromptCharDisplaySelector="{StaticResource PromptCharDisplaySelector}" />
</DataTemplate>
<Style x:Key="Literal" TargetType="Inline">
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="Foreground" Value="DarkGoldenrod" />
</Style>
<Style x:Key="Prompt" TargetType="Run">
  <Setter Property="Foreground" Value="LightGray" />
  <Setter Property="FontFamily" Value="Wingdings" />
</Style>      
<local:FancyPromptCharDisplaySelector x:Key="PromptCharDisplaySelector" />

and then set the property:

<ms:DataGridColumn PropertyName="Phone" Width="120" EditorTemplate="{StaticResource PhoneEditor}" />

This highlights the rather ugly case where the user only partially completes the phone number field, or deletes it altogether. The obvious next step is validation! Fortunately this is also easy to apply to the Data Grid. It provides an event, ValidateCell, which will be raised upon data being altered. Generate the method and inside it place something like this:

object value = e.Cell.Value;
switch (e.Cell.Column.PropertyName)
{
  case "Phone":
    string number = value as string;
    if (number.Length != 11)
    {
      e.IsValid = false;
      e.ValidationMessage = "Number must contain 9 numerals";
    }
    break;
  case "Address":
    string address = value as string;
    if (address.Length == 0)
    {
      e.IsValid = false;
      e.ValidationMessage = "Address cannot be null";
    }
    break;
}

This will produce the behavior illustrated in the screenshot below. The user is prompted for the expected input when editing a cell in the Phone column, and if any invalid input is received the cell will be highlighted with a red border. Much better!

If you haven’t already, download the 60 day trial of WPF Elements 5 to check out the Data Grid and more than 50 other controls.

Add your comments
Posted by CallumG on 18 December 2011

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