Thinking Out Loud

WPF Theme Designer (v17.2)

2017-12-12T11:26:00Z

As you know, a typical app-wide color scheme consists of numerous palettes/colors/shades. Without the proper tools, creating your own custom theme can be incredibly tedious and time consuming process - a process that very few people willingly tackle.

In this blog post, I will demonstrate how to quickly customize an existing DevExpress WPF theme and how you and your team can leverage our WPF Theme Designer to tailor the look and feel of WPF apps you deliver to end-users.

Download and Install

The DevExpress WPF Theme Designer was designed to reduce the grunt work associated with custom app-wide theme development. It is a free standalone tool that allows you to generate custom themes by altering the base colors of existing DevExpress Themes for the WPF platform. To customize existing DevExpress themes, you'll need to download the Theme Designer and install it on your machine:

https://www.devexpress.com/products/net/controls/wpf/themes/theme-designer.xml

Once you've installed the Theme Designer, you are ready to explore its capabilities.

Modify an Existing Theme

Though you can always build a theme from scratch, it's best to start with a theme that offers you most of what you need. My objective in this blog post is to take the DevExpress Office 2016 Colorful theme and modify a couple of its colors so that it is more in line with Microsoft Excel.

To begin, I will build my project by pressing the F6 key or by clicking the Build Ribbon button.

Next, I'll select a DevExpress control on the left panel to preview its color scheme.

The panel on the right displays the theme's palette (combines colors used by different controls). The Palette tab for the Office 2016 Colorful theme includes 29 colors. The Individual Colors tab on the right panel includes thousands of colors. I can group them to see which colors are included within the palette.

Note that changing a palette color automatically sets a new value for all corresponding individual colors. This reduces the amount of work involved in customizing them and helps maintain overall consistency.

Make it Look Like Excel

The next step is to change the background color of the DevExpress Ribbon and Hamburger Menu to mimic the appearance of Microsoft Excel.

To obtain the name of the required palette color, I select the Filter Colors tool and point to the ribbon background area while holding the SHIFT key.

If you're following along, you'll notice that I must modify the Backstage.Window.Background color. To double-check, I click the Highlight Colors tool and select this palette color to highlight all affected elements.

Once I know what I need to modify, it's time to select the new color. The Theme Designer's built-in Color Picker allows me to select any on-screen color. I'll use it to pick the color (green) used within Microsoft Excel.

Note that by changing the Backstage.Window.Background palette color, I set a new value for all 81 occurrences of this color within different DevExpress controls: the Ribbon's background in the Ribbon, Diagram Designer and Spreadsheet controls, the background of the Hamburger Menu, etc.

I use the Color Editor to set the Backstage.Delimiter, Backstage.HoverBackground and Backstage.SelectionBackground palette colors by modifying the tone and saturation of the Backstage.Window.Background color value.

Apply the New Theme to the Application

To apply the new theme to an application, I'll need to build the assembly by clicking the Publish button and add a reference to this assembly within my application project...

...And add a few lines of code to the app.xaml.cs file.

var theme = new Theme("TestTheme");
theme.AssemblyName = "DevExpress.Xpf.Themes.TestTheme.v17.2";
Theme.RegisterTheme(theme);
ApplicationThemeHelper.ApplicationThemeName = "TestTheme";

If you are ready to customize an existing WPF theme and want to learn more, please refer to the following online resources:

https://documentation.devexpress.com/WpfThemeDesigner/118707/WPF-Theme-Designer
https://www.youtube.com/watch?v=q1OwsGLOQ_Q

I'd love to hear from you - please share your thoughts on our WPF Theme Designer using the comments field below.

WPF Themes – VS 2017 & Office 2016 Black (v17.2)

2017-11-30T11:46:00Z

Our most recent release (v17.2) ships with three Visual Studio-inspired themes. These themes are a great option for those who prefer a Dock-based UX versus MDI or SDI interfaces.

In addition to use within dock-based apps (apps that mirror the functionality found within Visual Studio), these themes can be used by those of you who prefer a more modern alternative to our Metropolis themes.
For those who prefer our Microsoft Office-inspired themes, v17.2 ships with a new Black option:

Both the VS 2017 and Office 2016 SE themes offer a simplified XAML file structure and support Color Palettes. All individual element colors (about 3000-4000 based upon theme complexity) within these themes are grouped into palettes of 30-40 colors - wherein every palette color describes a certain logical portion of the UI.

You can use these Color Palettes as your starting point to create your own themes using the DevExpress Theme Designer tool.

Excited about the new themes or Theme Designer? Have questions or feedback that you want to share? Let us know in the comments below or send us an email at support@devexpress.com.

WinForms Pivot Grid: Excel Inspired Filtering and Conditional Formatting (v17.2)

2017-11-30T10:20:00Z

Excel-Style Filter Popup

As you may know, our WinForms Grid, WinForms TreeList and WinForms Vertical Grid controls allow end-users to filter data using Excel-like filter popups. These filter popups were designed to display unique filter options based upon the data type associated with a column.

With our most recent release (v17.2), this feature is now available to those of you using our WinForms Pivot Grid control.

To see this new feature in action, be sure to run our Excel Style Filtering demo. If you have our Demo Center installed (v17.2), you can launch the demo using this link.

This new filtering option has the following advantages over classic filter popups and pre-filters:

Automatic Filtering Options based upon a Field's Data Type

The Pivot Grid detects the filtered field's data type and selects the appropriate UI. For instance, the filter popup displays list of values for string fields...

... a range selector for numeric values ...

... or tree-like filter for date-time values.

Extended Filtering via the Filters Tab

For maximum flexibility, end-users can select from a wide range of predefined operators (such as Begins with, Equals, Contains, etc).

Instant Search

Built-in search allows end-users to locate required values within the filter popup.

Integration with External Filters

Our WinForms Pivot Grid's filtering UI is fully synchronized with our external filter editors (generated using the Filtering UI Context component). This means that any filter operation performed using the Pivot Grid UI is reflected in external filters (and vice versa).

Predefined Filters

Predefined filters can be used to apply filters using specified values missing in an underlying data source.

Filter Editor Support

Filters applied using the Excel-style filter popup can be changed within the Filter Editor dialog, allowing end-users to apply complex filter conditions when necessary.

Instant Filtering

The Pivot Grid immediately updates its data once you change filter values within the popup - without the need to click any buttons.

Important Note: Excel-style filtering is not enabled by default for new projects because it has some limitations:

You cannot use this feature in OLAP mode.
Excel-style filters cannot be used for group filtering.

We expect to support OLAP mode and group filtering in our v18.1 release cycle.

Excel-Inspired Conditional Formatting

Conditional formatting allows you and your end-users to alter the appearance of individual data cells based on specific conditions - and highlight critical information, identify business trends and compare data points. The Pivot Grid's context menu provides a number of presets that allow users to create rules without formulas:

Below are some common usage scenarios...

Highlight values that are less than a specific threshold (4,000,000 in the example below):

Highlight best or worst values. Top 5 trademarks are highlighted in the image below:

Use Color Scales to quickly compare high and low values using their color representation.

When you use conditional formatting to show Data Bars, the Pivot Grid draws a bar in each cell whose width corresponds to the value of the cell relative to the other cells.

Finally, end-users can change rules in our Excel-inspired Rules Manager:

Please take a moment to try our newest WinForms Demos and tell us what you think about these Excel-inspired Pivot Grid features.

Using Azure to Store and Load DevExpress Reports Across All Supported Platforms

2017-05-29T08:49:00Z

In this blog post we'll describe how you can store DevExpress Reports on Azure. As you'll soon discover, you can use this approach to create a shared report repository and make it available via simple Open/Save report commands.

If you are currently using DevExpress Reports for .NET, you already know that we offer Report Viewers and Designers for ASP.NET, WinForms and WPF. The benefit of the implementation described herein is that regardless of target platform (Desktop or Web clients), end-users will have access to all the reports you store on Azure.

Those of you with no interest in storing reports on Azure might still find this example quite useful - as it's an excellent way to store your Report Gallery (predefined elements/reports) and share it with users.

Regardless of the usage scenario, our implementation is straightforward and based on the following:

The API used to manage Azure storage provided by the "WindowsAzure.Storage" NuGet package.
The storage extension engine in our Reporting platform.

I'll explain the basics in this article, but if you’re ready to get started and want to skip the explanation, download the sample published in our Knowledge Base.

Setting Up Azure Access

If you don't already have an Azure account, you'll want to get one setup using the following link:

https://docs.microsoft.com/en-us/azure/storage/storage-create-storage-account

Once you've obtained login credentials, we recommend that you add them to app.config, as shown below. You’ll then transmit the connection string to method calls that register your custom extensions.

<appSettings>
  <add key="StorageConnectionString" 
 value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT;AccountKey=KEY" />
</appSettings>

Create a Shared Azure Storage for Reports

Let’s start with the extension that creates a common Azure storage for reports accessed through Open/Save UI commands. First, you'll need to create a ReportStorageWebExtension descendant and implement methods that cover basic actions such as display the report list, obtain a specific report, save a report to storage. Here’s your class stub with comments.

 
public class MyReportStorageWebExtension : 
      DevExpress.XtraReports.Web.Extensions.ReportStorageWebExtension { 
    // use Microsoft Azure API 
  readonly Microsoft.WindowsAzure.Storage.Blob.CloudBlobContainer container; 
  public MyReportStorageWebExtension(string storageAccountConnectionString) { 
      // initialize your storage using the connection string 
  } 
 
  public override Dictionary GetUrls() { 
      // retrieve report collection 
  } 
  
  public override byte[] GetData(string url) { 
      // obtain a report identified by its URL 
  } 
  
  public override bool CanSetData(string url) { 
      // can a report be updated? 
  } 
  
  public override void SetData(XtraReport report, string url) { 
      // update the report 
  } 
  
  public override string SetNewData(XtraReport report, string defaultUrl) { 
      // save a new report 
  } 
}

You'll then register this newly created extension so that it takes effect. In our ASP.NET sample, you see a call to a static method in the Application_Start() method in Global.asax.cs. In WinForms, put it inside the Main() method.

ReportStorageWebExtension.RegisterExtensionGlobal(
   new MyReportStorageWebExtension(
      ConfigurationManager.AppSettings["StorageConnectionString"]
   )
);

Create a Shared Azure Storage for the Report Gallery

The report Gallery is one of the Tool Windows you’ll find in the End-User Report Designer. It lists report templates, re-usable blocks with a few controls grouped together, or commonly used styles you can apply to elements.

If you want all these to be stored in the same centralized Azure storage, the procedure is mostly the same. This time, you need a ReportGalleryExtension class descendant.

class CloudReportGalleryExtension :
       ReportGalleryExtension { 
    // use Microsoft Azure API 
    readonly Microsoft.WindowsAzure.Storage.Blob.CloudBlobContainer container; 
    public CloudReportGalleryExtension(string connectionString){ 
        // initialize storage container 
    } 
    public override void SaveGallery(Gallery gallery) { 
        // save gallery 
    } 
  
    public override bool TryLoadGallery(out Gallery gallery) { 
        // check if a gallery can be loaded 
    } 
  
    CloudBlockBlob LoadBlob() { 
        // load gallery contents 
    } 
}

Use the following to register the class in the system:

ReportGalleryExtension.RegisterExtensionGlobal(
   ConfigurationManager.AppSettings["StorageConnectionString"]
);

Try Our Sample

As mentioned, we've published a complete sample demonstrating implementation details. The downloadable solution contains both an ASP.NET and WinForms application. If you have your Azure Storage account set up, update the connection string settings in the project and run it to see how it works.

Please remember, while we chose to showcase Azure storage in this sample, our extension model allows you to implement any kind of cloud or non-cloud storage provided that you have the necessary API.

Pricing Changes to the DevExpress WinForms Subscription

2017-05-15T13:50:00Z

A moment ago, I posted a message regarding changes to our ASP.NET Subscription. If you're using our WinForms product line, you can expect a similar change once we release v17.1.

Before I summarize changes to pricing, I want to state that these changes will not affect active WinForms subscribers. If you own an active WinForms Subscription, you will have the right to renew it upon expiration at $399.99.

With that said, we do expect to increase pricing for our WinForms Subscription once we launch v17.1. Pricing for new licenses will be as follows:

1st Year Subscription Cost: $999.99

Renewal Subscription Cost: $449.99

Again, if you own an active WinForms Subscription, this price increase will not impact you. As a courtesy, should your organization require additional WinForms licenses between now and May 31, 2017, you can purchase licenses at our old price point of $899.99.

Upgrade Your Subscription to DevExpress Universal

Just like our ASP.NET Subscribers, we're doing our best to make it easy for you and your team to upgrade your existing WinForms Subscription to DevExpress Universal...

If you’ve considered upgrading your WinForms Subscription to DevExpress Universal in the past, but have hesitated due to pricing concerns, I have some good news for you. Based on your organization’s purchase and licensing history, I've instructed our Client Services Team to offer preferential pricing to those wishing to acquire our Universal Subscription by May 31, 2017. If this option is of interest, please do contact us so we can put together the best possible offer for your company.

We are here and ready to help - please contact us with any questions. DevExpress Client Services can be reached via email at clientservices@devexpress.com or by phone at +1 (818) 844 3383.

Upcoming Changes to the DevExpress ASP.NET Subscription

2017-05-15T13:24:00Z

We are days away from the official release of v17.1. As part of this update, we've made a series of changes to our product SKUs...one involves our Universal Subscription and the following describes changes we'll make to our ASP.NET Subscription.

Before I start, let me emphatically state the following: If you are an active ASP.NET Subscriber, you will not experience a price increase. Your renewal costs will remain the same. If you are happy with our ASP.NET Subscription, you can continue to renew it at the price point you've come to expect from DevExpress - $399.99.

You may be asking yourself what will change if renewal pricing will not....Well, here is a summary of what you can expect once we ship v17.1.

New ASP.NET Bootstrap Controls and MVC Wrappers

If you own an active ASP.NET Subscription at the time of official launch (v17.1), you’ll automatically receive our new ASP.NET Bootstrap Controls and HTML5 MVC Wrappers (wrappers around our DevExtreme UI widgets), free of charge. Whether you choose to use these new product lines is entirely up to you of course...but as long as you maintain/renew your ASP.NET subscription, we'll make them available to you. And once again, ASP.NET Subscription renewal costs will remain the same for existing (active) subscribers.

The New DevExpress ASP.NET Subscription will include DevExtreme

For those of you considering a move to client-side web development, you’ll be happy to know that with v17.1, we’ll update our ASP.NET Subscription’s product mix to include DevExtreme – our HTML5-JavaScript UI widget library.

Since this is a new addition to the subscription and since it adds substantial value to the product, we’ll increase the price of our "new" ASP.NET Subscription to $999.99. Needless to say, existing customers will not be left out in the cold...

If you’d like to get your hands on DevExtreme (HTML5-JavaScript widgets), you can upgrade your existing ASP.NET Subscription to our "new" ASP.NET Subscription for only $100.00. When you upgrade, your subscription’s renewal date will not be modified but the renewal price will be increased from $399.99 to $449.99.

This last point is important - the $100 upgrade will give you immediate access to DevExtreme. If you renewal date is X, it will remain X and once your subscription expires, you will be prompted to renew at the new price point of $449.99 (as all of you know, renewals are entirely voluntary and do not affect product use rights to tools you've licensed in the past).

Upgrade Your Subscription to DevExpress Universal

If you’ve considered upgrading your ASP.NET Subscription to DevExpress Universal in the past, but have hesitated due to pricing concerns, I have some good news for you. Based on your organization’s purchase and licensing history, I've instructed our Client Services Team to offer preferential pricing to those wishing to acquire our Universal Subscription by May 31, 2017. If this option is of interest, please do contact us so we can put together the best possible offer for your company.

We are here and ready to help - please do call us should you have any questions about our ASP.NET Subscription in the post v17.1 world. DevExpress Client Services can be reached via email at clientservices@devexpress.com or by phone at +1 (818) 844 3383.

WinForms and WPF Diagram Control - Pan Tool and More (Coming soon in v17.1)

2017-05-09T13:20:00Z

Our upcoming release will include two new features for both our WinForms Diagram and WPF Diagram Controls.

Pan Tool

As you can see in the animation below, the Diagram's new Pan Tool allows you and your end-users to move or "pan" a diagram in any direction.

Display or Hide Subordinate Shapes

Whether constructing workflows, organization charts or anything in between, this new feature should help improve app usability and overall presentation/organization of complex diagrams.

This short animation helps demonstrate some of the options available to you, including the ability to control the collapse button's alignment and its position.

ASP.NET Spreadsheet - Cell Comments, Max Row and Column Count and More (Coming soon in v17.1)

2017-05-08T10:17:00Z

We've got a few exciting new features to announce in the upcoming release of our ASP.NET Web Forms and MVC Spreadsheet controls - these include support for cell comments, max row/max column count and the ability to customize the Spreadsheet's context menu.

Worksheet Comments - Annotations

As you would expect, this new feature allows you and your users to annotate ASP.NET and MVC Worksheets. Comments are displayed within a floating box that is anchored to a cell. You can add new comments, edit, hide or delete existing comments, move and resize the comment box as necessary.

New comments can be inserted or existing comments modified via the following methods:

Ribbon UI - by using the commands located within the Comments group of the Review tab.
Context (Popup) Menu

Additionally, users can resize a comment box or move it to a new location by using the comment's sizing handles.

Max Row - Max Column Count

With this release, you can specify the maximum number of rows and columns displayed within our ASP.NET & MVC Spreadsheet Control.

To control row/column visibility, simply use our new WorksheetDisplayArea.SetSize method.

Context (Popup) Menu Customization

With this release, you can handle a new client-side event and customize our ASP.NET Spreadsheet's context menu (insert new menu items, remove or disable existing items). Event parameters allow you to identify the worksheet element (a cell, row or column header, chart or picture) for which the context menu is invoked and prevent the menu from being displayed.

Should you have any questions on any of these features, please comment below - we'll be happy to follow up.

ASP.NET Rich Text Editor - Floating Objects (Coming soon in v17.1)

2017-05-04T14:31:00Z

The upcoming release of our ASP.NET Rich Text Editor will include support for Floating Objects. With this feature, your end-users can insert pictures and text boxes within their documents with ease.

As you might expect, our ASP.NET WebForms and ASP.NET MVC Rich Text Editor allows end-users to freely position, scale and rotate floating objects. Whether used for images or as a text box, users can modify the object's characteristics via an integrated context (popup) menu or a Ribbon context tab. A built-in Floating Object dialog window is also available for customization.

And yes, our ASP.NET Rich Text Editor ships with a comprehensive client API so you can manage floating objects programmatically.

We'd love to hear your thoughts on this new feature and learn more about how you're using our Rich Text Editor within your ASP.NET or MVC web app.

WinForms TreeList - Improved Performance and API (Coming soon in v17.1)

2017-05-04T10:17:00Z

I wanted to share some of the performance and API improvements we've made to the DevExpress WinForms TreeList Control in our v17.1 development cycle. If you're not familiar with this product, you can think of it as a treeview and listview hybrid...The component is designed to display self-referenced hierarchies and render it as a traditional tree or a grid.

Before I begin, let me offer the following...If you're evaluating this product and would like to test it against competing products, we'd be more than happy to provide the sample project used to generate these test results. I think you'll be pleasantly surprised as to how fast our WinForms TreeList executes the functions listed below.

Though we are not finished with all the optimizations we hope to introduce this year, I want to assure you that our goal is to improve the TreeList to such a degree that it's on par with our WinForms Grid from a performance perspective.

Performance

The following table describes the performance improvements shipping inside v17.1.

Time (ms)	DevExpress TreeList v16.2	DevExpress TreeList v17.1	DevExpress WinForms Grid
Sorting by one or more columns
Flat list	116	47	14
Self-referenced hierarchy	58	30	n/a
Filtering by simple or complex criteria
Flat list	46	31	12
Self-referenced hierarchy	52	36	n/a
Searching (against a single column/against all columns)
Flat list	116/444	98/321	92/173
Self-referenced hierarchy	119/457	100/332	n/a
Loading from data source (10k/100k records)
Flat list	36/650	34/466	5/10
Bound hierarchy	81/2005	79/1703	n/a
Unbound hierarchy	854/minutes	103/4182	n/a

API

In this release, we've updated the Tree List's API so that it is more consistent and in-line with our WinForms Grid. These changes address common data operations such as obtaining and setting cell values, selection, sorting and filtering, formatting and hit testing. Our new API also includes a number of tree-specific features including a LINQ-friendly node iterator:

treeList.NodesIterator.Do(node =>
{
    if((State)node["State"] == State.Inactive))
        node.Expanded = false;
});
int count = treeList1.NodesIterator.Visible
   .Where(node => (decimal)node["Discount"] > 0).Count();

By extending the Tree List's API, we've been able to improve the product's core functionality and expect to evolve it further in coming release cycles. For instance, the filter related API changes introduced in v17.1 allowed us to incorporate Excel-inspired Filtering and the Auto-Filter Row....and helped improve core capabilities such as the availability of predefined filters when using Excel-inspired filter dropdowns.

As always, we welcome your comments and feedback. Tell us how you're currently using our WinForms TreeList Control.