What’s New in 18.1: Ultimate UI for WPF

Brian Lagunas / Wednesday, April 25, 2018

Shhh…. do you hear that?  That’s the sound of our newest Infragistics Ultimate for WPF 18.1 being released into the wild.  Like a stampede of elephants crushing everything in sight, the Infragistics Ultimate UI for WPF 18.1 release is packed with new controls and features that will give your apps the edge you need to crush your competition.  By themselves, these new controls and features are beautiful, majestic, and admired by children and adults alike.  Together, they are an unstoppable force that will instill fear into even the most formidable adversary.

Now, let’s tame this herd of majestic beasts and learn about all the great new controls and features shipping in Infragistics Ultimate for WPF 18.1.

Financial Chart

First up is our brand new xamFinancialChart.  This bad boy is a lightweight, high-performance chart that is used to display financial data using an extremely simple and intuitive API. All you need to do is bind your data (a collection or a collection of collections), and the chart takes care of everything else.

As you can see, the xamFinancialChart has just about everything you need to visualize your financial data.  A toolbar is located above the top of the chart is used for displaying configuration options such as your choice of indicators and overlays, the date ranges, chart type, volume, and type of trendlines to use. Located on the bottom of the chart is an optional navigation view that acts as a zoom bar that allows your end-users to zoom in or out of their desired ranges.

Obviously, this is the financial industry’s dream chart.

Excel Library / XamSpreadsheet

Next up is probably the most impressive amount of work we have packed into a single component in about five years.  Well technically, there are two components being improved here. First is the Excel Library and the other the xamSpreadsheet control.  Obviously, we can’t add a feature to the xamSpreadsheet without the feature first being added to the Excel Library.  So keep in mind, every feature you see here is available in both the Excel Library AND the xamSpreadsheet.

Conditional Formatting

Conditional formatting allows you to automatically apply formatting—such as colors, icons, and data bars—to one or more cells based on the cell value. To do this, you'll need to create a conditional formatting rule. For example, a conditional formatting rule might be if the value is less than $2000, color the cell red. By applying this rule, you would be able to quickly see which cells contain values less than $2000.  Pretty basic stuff right?  Well, the best part is that the xamSpreadsheet supports rendering all conditional formatting features available in Microsoft Excel.   Microsoft Excel has several predefined styles—or presets—you can use to quickly apply conditional formatting to your data. They are grouped into three categories:

Data Bars are horizontal bars added to each cell, much like a bar graph.

Color Scales change the color of each cell based on its value. Each color scale uses a two- or three-color gradient. For example, in the Green-Yellow-Red color scale, the highest values are green, the average values are yellow, and the lowest values are red.

Icon Sets add a specific icon to each cell based on its value.

Format Cells Dialog

One of my favorite new features added to the xamSpreadsheet is the new Format Cell Dialog.  This makes it extremely easy to change how your data is displayed in a cell. For example, you can specify the number of digits to the right of a decimal point, or you can add a pattern and border to the cell. To show this dialog, just right-click the cell and select Format Cells from the context menu.  Let’s take a look at what options are available in the new Format Cell Dialog.

Number Tab

By default, all worksheet cells are formatted with the General number format. With the General format, anything you type into the cell is usually left as-is. For example, if you type 36526 into a cell and then press ENTER, the cell contents are displayed as 36526. This is because the cell remains in the General number format. However, if you first format the cell as a Currency, then the number 36526 will be displayed as $36,526.00.

Alignment Tab

You can position text and numbers, change the orientation and specify text control in cells by using the Alignment tab

Font Tab

The term font refers to a typeface (for example, Arial), along with its attributes (font style, point size, underlining, color, and effects). Use the Font tab in the Format Cells dialog box to control these settings. You can see a preview of your settings by reviewing the Preview section of the dialog box.

Border Tab

In Excel, you can put a border around a single cell or a range of cells. You can also have a line drawn from the upper-left corner of the cell to the lower-right corner, or from the lower-left corner of the cell to the upper-right corner.

You can customize these cells' borders from their default settings by changing the line style, line thickness or line color.

Fill Tab

Use the Fill tab in the Format Cells dialog box to set the background color of the selected cells. You can also use the Pattern list to apply two-color patterns or shading for the background of the cell.

Protection Tab

The Protection tab offers you one option for protecting your worksheet data and formulas.  However, this option does not takes effect unless you also protect your worksheet.

Worksheet Filtering

While we always had filtering available in the Excel Library, it only applied to filtering within a worksheet table.  We have extended the filtering behavior to allow you to define a single area within the worksheet outside of a table that you can filter.  As you would expect, you can filter on one or more columns of data. With filtering, you can control not only what you want to see, but what you want to exclude. You can filter based on choices you make from a list, or you can create specific filters to focus on precisely the data that you want to see.  You can filter by a numeric value, text values, or filter by color for cells that have color formatting applied to their background or text.

Not only that, but we provide some built-in filter options in our new and improved context menu:

Text Filters

Number Filters

Date Filters

Custom Filter Dialog

Worksheet Sorting

Besides adding excellent filtering support, we also improved our sorting support.  The new sort menu item will just set the sort of the associated column based on the value/state of the active cell for which the menu was shown. So choosing Sort A to Z will create an ascending value sort for that column.

AutoFilter Support

Even with all those tremendous built-in sorting and filtering features accessible from a simple context menu, we also have AutoFilter support in a worksheet table.  This means that now the headers of a worksheet table, and the header cells of the worksheet level filtering region, will display a drop-down button that displays the filter-related menu.  The buttons show the sort and filter state and the tooltip displays a friendly description of the filter for that column. The menu displays various options for sorting and filtering. The filter options displayed are dependent on the data types in the column as they are in excel. So you’ll see one of the number filters, text filters, or date filters available depending on the data in the table column.

Table Improvements

Tables are ubiquitous when using Excel.  Once you start using the 18.1 version of our xamSpreadsheet, you will see that we really beefed up our table-based features to make your end-users even more productive when working with tables inside the xamSpreadsheet control.

Copy/Paste

Tables will now be copied when the source selection encompasses the entire table. So select an entire table (e.g., click in a cell, press ctrl+a two times), copy it to the clipboard and then paste elsewhere and a new copy of that table is created.  Pasting within a worksheet table will automatically expand the table to encompass the area of the paste. 

Editing

Typing/editing immediately adjacent to the bottom/right edge of a worksheet table will expand the table (in a separate undoable operation similar to what Excel does).

Tab Navigation

Tab Navigation within a table will navigate within the table wrapping to the next/previous row. Similar to Excel the table will also be automatically expanded when tabbing from the last visible cell of the table.

Total Row Formulas

This is another one of my favorite new table features. In Excel when a cell in the total row of a table is active, a drop-down button is displayed that lets you choose a common formula for a table. It can be shown by clicking the drop-down button or pressing Alt+Down when the cell is active.

Context Menu Improvements

To really make you productive, additional context menu items were added to allow you to manipulate the table. This includes menu items for inserting and adding rows and columns to the table, selecting the table row/column, toggling the total row, converting the table to a range, etc.  The table cell context menu is similar to the cell context menu except it is displayed when the active cell is part of a  worksheet table. That menu also has many new commands that relate to affecting the table.

List Validation

In Excel, you can define a particular type of data validation called a list data validation that either contains an explicit list of values or points to a range of cells that includes the values. There is an option on that validation for whether to show a cell drop-down. The data validation class has been in our excel engine for a long time, and the spreadsheet has honored using the validation during editing for a while now too, but we never showed a list, so the end users had to know the list of valid values. Now we support showing a drop-down button that will display a drop-down list of the values. It can be shown by clicking the drop-down button or pressing Alt+Down when the cell is active.

Cell Dropdown

We have also added the ability to show a dropdown list in a cell populated with data from the values immediately above and below the active cell. One way to show this cell drop-down is via the context menu for a cell using the “Pick From Drop-down List…” item, and the other is by pressing Alt+Down.  You’re not explicitly defining the contents of the list as you do with a list data validation – it’s implicitly populated based on the cells above/below in the same manner as Excel.  As with Excel it ignores numerical values, stops at blanks and table boundaries, etc.

 

I know that’s a ton of excellent Excel and xamSpreadsheet features to soak up, but we’re not done yet.  We still have to cover the rest of the features we are shipping in Infragistics Ultimate UI for WPF 18.1.

XamDataGrid

If you’ve been a customer of Infragistics for more than a day, you know that the xamDataGrid is our flagship grid for WPF.  So it should be no surprise that we continue to add significant new features to it in every release.  Check out the latest features to join the xamDataGrid family.

Cell Merging

You may have seen my last post titled “XamDataGrid vs. XamGrid: Which WPF Grid Should I Choose?” in which I told you to use the xamDataGrid, and stop using the xamGrid. In this post, I acknowledged that the xamDataGrid is missing three key features; cell merging, conditional formatting, and Paging.  Well, I am happy to announce that we are one feature closer to closing the feature parity gap between the xamGrid and the xamDataGrid with the addition of cell merging.

Cell merging is a common feature in Microsoft Excel that allows you to deliver data clarity and avoid duplication by merging neighboring data cells across different rows whenever they display matching values.  While Excel made this feature famous, it is now a very common request in the context of showing data in a data grid.  With the release of Infragistics Ultimate UI for WPF, the xamDataGrid has full support for cell merging.

Enabling cell merging is as simple as setting the FieldSettings.MergedCellMode property.  This property will control how and when cell merging is enabled.  If the MergedCellMode property is set to “Always,” any set of cells in a column that have matching values will be merged regardless of their position in the column.  When set to “OnlyWhenSorted,” cells will only be merged when a column has been sorted, and all cells with the same value are in a contiguous order due to the sort operation.  Of course, you can always turn off cell merging by setting the MergedCellMode property to “Never,” and this is, in fact, the default value.

When you enable cell merging, by default, the cells are merged if the adjacent sibling data records display text is the same (the DisplayText value).  You can change this by setting the FieldSettings.MergedCellEvaluationCriteria property.  This property allows you to change the logic that is used to merge cells based on the raw value of the cells, the converted values of the cells, or even the result of the value being converted based on the EditAsType value.

Image Field

Before Ultimate UI for WPF 18.1, if you wanted to use an image in the xamDataGrid, you would have to create a TemplateField and handle all the logic for rendering your image to fit your specific application needs.  While this works, it required a lot of code that had to be manually written to handle every image-loading scenario such as loading from an ImageSource, a Uri, a string, a local resource, or even a byte array.  Honestly, it was a pain in the butt! 

With the release of Ultimate UI for WPF 18.1, you can now use the new ImageField to render your images by just using a property in the underlying bound object and remove all that custom code from your applications.  It does not matter what the source of the image is; the ImageField can handle it.

In the following code snippet, the ImageField.Name is set to a property in the underlying model that represents how the image is loaded.

<igDP:ImageField Name="ImageSource" />                         
<igDP:ImageField Name="ImageUri" />                         
<igDP:ImageField Name="ImageUriString" /> 
<igDP:ImageField Name="ImageRelativeUri" BaseUri="https://static.infragistics.com/marketing/Website/home/"/> 
<igDP:ImageField Name="ImageByteArray" /> 

With the addition of the ImageField, we made using images in the xamaDataGrid stupid simple!

XamDataGrid Control Configurator

As you know, the xamDataGrid is a feature-rich, high performing data grid that meets the needs of demanding enterprise line-of-business applications.  For new users or even seasoned veterans, the API and vast feature set can be overwhelming.  With the xamDataGrid control configurator, we make it dead simple to bind your data, add your fields and field layouts, and turn the most essential features on and off with the click of a button.  When you're done adding the features you want, you simply hit the "Apply & Close" button and all the code will be generated for you.

Your next question is probably, "How do I get it?"

If you have already installed the Infragistics Control Configurators, then you don't have to do anything.  The Visual Studio extension will be updated automatically via the Visual Studio Marketplace.  If you haven't installed the control configurators yet, you can download and install them directly from within Visual Studio or by visiting the Visual Studio marketplace.

XamRichTextEditor New Properties

Not every control needs a large number of massive features to add value, and the newest xamRichTextEditor features prove this.

AcceptsTab

The AcceptsTab property will control the behavior of the xamRichTextEditor when the Tab key is pressed on the keyboard. By default, if you are within the xamRichTextEditor and press the Tab key, the text will be indented for each press of the Tab key.  If you set the AcceptsTab property to False, the text will no longer be indented, but rather the next control with a higher TabIndex will receive focus.

AcceptsReturn

The AcceptsReturn property controls what effect the Enter key will have on the content of the xamRichTextEditor when pressed.  By default, if you are within the xamRichTextEditor and press the Enter key, a new line is entered which moves the cursor to a new position, and you can continue typing content into the xamRichTextEditor.  If the AcceptsEnter property is set to false, if you press the Enter key, no new line will be created, and the cursor will not change.  It does nothing and will have no effect on the content of the xamRichTextEditor.

XamRibbon Improvements

The xamRibbon MenuTool has received a small, but extremely useful, feature that allows you to control whether or not the menu will close when a menu tool is clicked.  Imagine you have a MenuTool with a collection of CheckboxTools that represent a multi-select scenario such as turning on supported clipboard operations as represented by the following code snippet.

<igRibbon:MenuTool Caption="Clipboard Operations" > 
    <igRibbon:CheckBoxTool Content="Cut" /> 
    <igRibbon:CheckBoxTool Content="Copy" /> 
    <igRibbon:CheckBoxTool Content="Paste" /> 
    <igRibbon:CheckBoxTool Content="ClearContents" /> 
</igRibbon:MenuTool> 

The expected experience is when the MenuTool is opened, and an option is selected, the MenuTool should stay open as you choose more options.  However, with this code snippet, once you check a CheckBoxTool, the MenuTool will close, and you will have to reopen the MenuTool to make another selection, and then continue this process until all desired options have been checked/unchecked.

With the new MenuToolBase.StaysOpenOnClick attached property; you now have full control over when to close the MenuTool when an option is selected.  Simply add this attached property to the tool that will keep the MenuTool open when clicked. We can modify the original code snippet with the new MenuToolBase.StaysOpenOnClick attached property to achieve our desired results.

<igRibbon:MenuTool Caption="Clipboard Operations"> 
    <igRibbon:CheckBoxTool Content="Cut" igRibbon:MenuToolBase.StaysOpenOnClick="True"/> 
    <igRibbon:CheckBoxTool Content="Copy" igRibbon:MenuToolBase.StaysOpenOnClick="True"/> 
    <igRibbon:CheckBoxTool Content="Paste" igRibbon:MenuToolBase.StaysOpenOnClick="True"/> 
    <igRibbon:CheckBoxTool Content="ClearContents" igRibbon:MenuToolBase.StaysOpenOnClick="True"/> 
</igRibbon:MenuTool> 

Now, no matter how many times these CheckBoxTools are checked/unchecked, the MenuTool will not close until you click on another element in your app.  You can also mix-and-match the attached property in the same MenuTool.  Only the tools that have the attached property will not close the MenuTool, any tool without the attached property will close it.

Ahhhhh... now that's a much better experience!

WPF NuGet Package Improvements

We have historically shipped WPF NuGet packages with our Infragistics Platform Installer.  The installer would merely place a zip folder on your C drive that you could unzip and put in a folder of your choice that you could then use to create a custom NuGet package source in Visual Studio.

While this worked, the experience could be better.  So we made it better!  With the release of Infragistics Ultimate 18.1, we now place the NuGet packages in a local folder, copy all the WPF NuGet packages into it, and create the NuGet Package Source in Visual Studio for you automatically.  You don’t have to lift a finger.  It’s all done for you.  Better yet, we also placed our Infragistics Ultimate UI for WPF 18.1 NuGet Packages on our public NuGet feed that you can use instead of your local feed.  This is useful for getting updated NuGet packages more quickly.

Let’s Wrap this Baby Up!

As I always like to point out, if you have ideas about new features we should bring to our controls, important issues we need to fix, or even brand new controls you’d like us to introduce, please let us know by posting them on our Product Ideas website.  Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas.  Also, make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.  

If you are not using our WPF controls yet, remember that a free evaluation download is only a click away.

Lastly, when you do build something cool with our controls, please make sure to let me know.