WPF Appearance Customization

WPF Team Blog
18 June 2020

Our v20.1 release includes an extended list of the control appearance properties. This blog post summarizes appearance customization enhancements you can integrate in your DevExpress-powered WPF app today.

DateNavigator Control

You can now specify cell appearance for the following cell states:

  • MouseOverState
  • DisabledState
  • InactiveState
  • FocusedState
  • SelectedState
  • TodayState
  • SpecialDateState
  • HolidayState
  • NormalState.

The code sample below specifies aspecial date foreground and disables highlighting for the current date:


<dxe:DateNavigator>
	<dxe:DateNavigator.Appearance>
		<dxe:DateNavigatorCellAppearance>
			<dxe:DateNavigatorCellAppearance.SpecialDateState>
				<dxe:DateNavigatorStateAppearance Foreground="#FF7200" BorderThickness="0"/>
			</dxe:DateNavigatorCellAppearance.SpecialDateState>
			<dxe:DateNavigatorCellAppearance.TodayState>
				<dxe:DateNavigatorStateAppearance BorderBrush="White"/>
			</dxe:DateNavigatorCellAppearance.TodayState>
		</dxe:DateNavigatorCellAppearance>
	</dxe:DateNavigator.Appearance>
</dxe:DateNavigator>
DateNavigator - Appearance Customization

Standard Properties Support

We extend the list of controls that support the following standard customization properties:

  • Background / Foreground
  • BorderBrush
  • BorderThickness
  • CornerRadius
  • Margin / Padding

Our most recent themes (Office 2016 SE, Office 2019, VS 2017, VS 2019) now offer enhanced templates for the following controls:

  • Ribbon items, pages, categories, and groups
  • Toolbars and Toolbar items
  • Context menu and Context menu items
  • SimpleButton, DropDownButton, and SplitButton

Supported appearance settings allow you to quickly customize look and feel throughout your application or create individual UI elements that stand out from the rest. For example, the code snippet below creates an orange action button that your users won’t miss.


<dx:SimpleButton Content="Simple button" Background="#FF7200" Foreground="White" 
Padding="10" CornerRadius="5" BorderBrush="#505050" BorderThickness="3" …/>
Standard Properties Support - Appearance Customization

Bar Triggers

As you may know, Toolbar items used in DevExpress Ribbon and Toolbars are non-visual elements that generate visual counterparts in the UI. The same item can be displayed in multiple places at the same time. For example, the image below displays the same items on a Ribbon page and in the Quick Access Toolbar area:

Bars - Appearance Customization

Because Toolbar items are non-visual elements, it is hard to customize associated visual states with regular WPF triggers. In v20.1, we introduced custom triggers for Toolbar items. These triggers provide the same functionality as regular WPF triggers, but can be defined for Toolbar items directly.

Here's how to customize the appearance of BarCheckItems based on checked state:


<dxb:BarCheckItem Content="Private" …>
	<dxb:BarCheckItem.Triggers>
		<dxb:ItemTrigger Property="IsChecked" Value="True">
			<dxb:ItemSetter Property="Background" Value="#ffeb3b"/>
		</dxb:ItemTrigger>
	</dxb:BarCheckItem.Triggers>
</dxb:BarCheckItem>
<dxb:BarCheckItem Content="High Importance" …>
	<dxb:BarCheckItem.Triggers>
		<dxb:ItemTrigger Property="IsChecked" Value="True">
			<dxb:ItemSetter Property="Background" Value="#d20f38"/>
			<dxb:ItemSetter Property="Foreground" Value="White"/>
		</dxb:ItemTrigger>
	</dxb:BarCheckItem.Triggers>
</dxb:BarCheckItem>
Bar Triggers - Appearance Customization

Feedback

As always, we welcome your thoughts/opinions. Please post a comment below and let us know what you think about our new WPF Appearance Customization options.

What’s New in v20.1

To explore the scope, breadth and capabilities of our new products/features, please visit: https://www.devexpress.com/Subscriptions/New-2020-1.xml.
4 comment(s)
Dalibor Stys
Dalibor Stys
Perfect, thank you for that!
18 June 2020
Jim Foye
Jim Foye
Ok, but can you put into place some kind of testing to ensure we don't get these debug warnings and errors from missing theme templates and extensions and such?
18 June 2020
Alex Chuev (DevExpress)
Alex Chuev (DevExpress)

Jim, thanks so much for posting a support ticket on this issue. We are working on your request related to resource warnings. For those reading comments, I do want to clarify that warnings do not affect Spreadsheet functionality or impact performance when an application is running without an attached debugger. 

Thanks,

Alex

19 June 2020
Jim Foye
Jim Foye
Alex, I just saw that some of these are fixed in 20.1.5, thanks.
19 June 2020

Please login or register to post comments.