WPF Samples Application Modernization

by Avatar Bill Henning (Actipro) - 5 comments
Friday, May 22, 2020 at 1:15pm

Actipro WPF Controls v2020.1 development is in progress, and the new version’s main goals are to modernize our UI control features/themes, and make theme customization much easier.

In the previous post, we took a look at the many updates made to modernize the appearance of our Ribbon product for v2020.1.  Over the past several weeks, we've been hard at work completely redesigning the user interface of our WPF Controls samples application.  This has been quite an effort since the application contains hundreds of samples in it.  Let's dig in!

Reimagining the Samples Application Design

The new WPF Controls samples application design makes use of all our latest themes-related improvements in the 2020.1 version.  Right from the start, you'll see our new WindowChrome title bar customization features in play.  We've created a completely unique appearance for the title bar in this application, with the current location clearly listed on the left, and various other buttons (switching the app theme, quickly getting to the release history or other views, and so on) on the right side.

The sample application's home view

The home view features direct links to our most popular control demos at the very top.  Or scroll down to click buttons that delve into each product, with many samples available for each.

The buttons here make use of our new ShadowChrome control that is added in v2020.1.  ShadowChrome renders modern drop shadows and can be easily animated.  In this case, we draw the button "upward" to the mouse by altering the shadow as you mouse over a button.

Another thing to notice here is that we've built vivid new icons for each of our WPF Control products, all in the fluent design style.

Let's click the "Editors" product button...

The Editors product overview

Each product overview provides one or more screenshot buttons that link directly to enticing samples of the product, and shows a brief description of the product.  Scroll down to see the entire categorized list of links to available product samples.

We'll click on the "Brush" edit box link...

The Brush edit box QuickStart

This screenshot is representative of what you'll find with many of our QuickStart samples.  The control itself is displayed on the upper left.  Various sample options to alter its appearance and behavior appear in the right sidebar, and a general description of the control is below that.  We often show a gallery of example usage scenarios of controls as well.

How does all this look if we change the application theme?  Let's switch to a Metro dark theme:

The Brush edit box QuickStart in dark theme

Flipping back to the original theme, how can we quickly jump to another Editors sample or to another product's samples?

The Backstage for the Editors area

By clicking the button on the upper left that shows the current view location, a Backstage view is displayed.  It lists all the samples for the current product in a categorized list.  Or you can scroll down to see the list of products to easily jump to another product's samples.  This Backstage feature is supported by our new WindowChrome overlay feature.

Summary

We've put a lot of effort into making a new clean, modern design for the samples application and we hope that you'll love using it once the 2020.1 version is released.  It makes the entire presentation of the hundreds of samples in the application much more consistent and best of all, the XAML code-behind is now much easier to read.

Post in the comments below if you have any feedback or questions about the new samples application design.

Tags: developing, wpf

Actipro's WPF Controls

Over 100 UI controls for building beautiful Windows Presentation Foundation desktop apps.

Learn More

Over 100 UI controls for building beautiful Windows Presentation Foundation desktop apps.

Includes editors, docking windows, MDI, property grids, charts, tree controls, ribbons, gauges, themes, and much more.

Learn More Download Free Trial

Comments (5)

Posted 3 months ago by John Howe
Avatar

Hi Bill,

Like the look of the new sample browser.  Are you going to allow browsing the source of a sample inside the sample browser using the syntax editor, would be far more convenient than having to open the location in explorer and then load each of the files.  Would also demo the XAML, C# and VB addons for the syntax editor.

John

Posted 3 months ago by Dirk Zellerfeld
Avatar

A search button would be nice too. Othewise I like the new layout, looks very modern, intuitive and professional.

Posted 3 months ago by Bill Henning (Actipro) - Actipro Software LLC
Avatar

John, great idea... it was something we had on our TODO list as well and just completed it.  Please see the newest blog post for details.  I think you'll like it.

Dirk, we also have that idea on our TODO list.  What kind of things would you like to be able to search on?

Posted 3 months ago by Dirk Zellerfeld
Avatar

@Bill: Just keywords. Like "Caret" and get as result a link to "Multiple Selections / Carets" page. It might be better with the new demo app as it seems to be much more cleaner but as of now, I often have to spend more time on finding something I want to see how its done because I don't know on which page it was. For example recently I needed the page for multiple languages within the same document. Typing "language" and get the result would have been great. Took me quite a bit to figure out it was under "Language transistions".

For new users it can also be helpful to quickly see if you have something they specifically look for. Like a control to display currencies or flags. Whether you have / support datagrids or whether you have transition effect. Just being able to search for "currency" or "datagrid" or "effect" and get all related pages. Instead of clicking on "Shared Libraries" then on "+22" then on "Concepts". It works but it needs time to go through all of it and its difficult to know where you get what you want if you're not into this control collection.

Posted 3 months ago by Bill Henning (Actipro) - Actipro Software LLC
Avatar

Dirk, please check out our latest blog post.  The search mechanism for samples is complete!

Add Comment

Please log in to a validated account to post comments.