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.

WPF Ribbon Theme Modernization

by Avatar Bill Henning (Actipro) - 1 comment
Thursday, April 23, 2020 at 3:27pm

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 showed off a new ShadowChrome control that is a decorator for rendering modern shadow effects. In today’s post, let’s have a look at some of the major work we’ve done on modernizing the appearance of our Ribbon product for v2020.1.

Comparing Appearances

For the 2020.1 version, we’ve gone through every Ribbon-related control and made style improvements to match the latest appearance found in Office 2019. Let’s see how the 2020.1 version’s theme compares to our current 2019.1 version’s theme:

The new Ribbon 2020.1 appearance
The current Ribbon 2019.1 appearance

You can see from the screenshots that there are subtle differences throughout. Whitespace has been adjusted, glyphs are now chevrons, the title bar background accent is more restrained, etc.

The right side of the Ribbon

Looking at the right side of the Ribbon, collapsed groups now render a bit differently from before. Contextual tab groups are more subtle. Tab row buttons like the Comments one in this screenshot have a new available style. And there is a built-in minimization button on the bottom-right.

Animated Tabs

We also wanted to provide fluid animations throughout the Ribbon, similar to Office. When you move your mouse over a tab, the underline animates to fill the tab.

Tab animations in action

When you select a new tab, the tab’s content animates into place with a quick slide.

Animated Backstage

Continuing on the animation front, we harnessed the great new WindowChrome overlay features that are coming in 2020.1 to host our Ribbon’s Backstage.

Backstage animation in action

This allows the Backstage to be fully animated on display as well.

Summary

We are still continuing to iterate on our themes for Ribbon and other products, but this should give you an idea of some of the fantastic themes updates coming in the new version.

Post in the comments below if you have any feedback or questions about the new Ribbon themes.

WinForms Controls v2020.1 Build 401 Maintenance Release

by Avatar Bill Henning (Actipro)
Friday, April 17, 2020 at 6:32pm

Our v2020.1 WinForms controls have been updated with a new maintenance release that is now ready for download. 

See this announcement post for the detailed list of enhancements and updates.

Download Buy Now

Actipro Blog Q1 2020 Posting Summary

by Avatar Bill Henning (Actipro) - 1 comment
Wednesday, April 1, 2020 at 9:22pm

What We Accomplished

This quarter we issued updates to our WPF and Universal Windows control sets.  These updates contained a lot of minor enhancements and bug fixes.

On the development side, we've been hard at work on the WPF 2020.1 version.  The focus of this version is on modernizing themes across native WPF controls as well as the Actipro controls.  We've already posted a lot about WindowChrome updates and more recently ShadowChrome.  We'll continue posting more about many other v2020.1 enhancements in the weeks ahead.

What's Coming Next

Our top development priority right now is wrapping up the WPF v2020.1 feature set.  We've built a way to dynamically generate themes based on various options you set.  This is something we'll dive into in future blog posts.  Let me tell you, it's really neat and we can add more customization options in the future. 

We've already run through and have improved our themes for nearly all native WPF controls and have started doing the same to Actipro controls.  Ribbon has probably received the most visual updates so far.  The updates allow it to look just like Office 2019, complete with new animations, and Ribbon also now takes advantage of new WindowChrome features.  Keep watching our blog for more info.

Back on the WinForms side of things, we almost have another big maintenance release about ready to go for those controls.  We just have some final testing before it's ready to be released.

Blog Post List

Product Releases

Control Product Development

WPF Shadow Chrome

by Avatar Bill Henning (Actipro)
Tuesday, March 31, 2020 at 4:31pm

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 saw how a WPF Window's system context menu can be themed/customized with new WindowChrome features.  Now that we've shown off a lot of new features coming to WindowChrome, let's start looking at other areas of v2020.1.

Shadow Chrome

In modernizing all our control themes (more on this in future posts), we wanted to come up with a new simple control for providing modern drop shadows.  What we came up with is ShadowChrome. 

A ShadowChrome with medium elevation surrounding a card

ShadowChrome is a simple decorator that can wrap any content.  It has settings for the direction, opacity, and elevation.  

A ShadowChrome with high elevation surrounding the same card

The screenshots show how altering the elevation can give the shadow a drastically different appearance.

ShadowChrome used to provide subtle shadow effects for the green check

ShadowChrome isn't limited to only rectangular shapes.  It can also be applied to non-rectangular shapes.

Summary

ShadowChrome is going to be used throughout our control themes in the 2020.1 version as a small part of modernizing our themes.  It will be shipped as a public primitive control in our Shared Library, so that it's fully accessible to our customers as well.

Post in the comments below if you have any feedback or questions about ShadowChrome.