DevExpress WPF Controls. Design Time Features. Advanced Smart Tag Capabilities.

WPF Team Blog
24 February 2015

In this post, we’ll review some of the more advanced capabilities of DevExpress Smart Tags: including the ability to quickly set an Application Theme or DataContext, easy toggling between Window styles, and more.

Application Theme and Data Context

DevExpress Smart Tags provide special editors for root controls (Window/UserControl) to quickly assign a ViewModel to a data context or set an application-wide theme.

SmartTag_Arrow_DCandAT

DataContext

If you set the DataContext property, the DevExpress Smart Tag will analyze the modified object. If that object’s type happens to be public, non-nested, unsealed, and also…

  • Has a POCOViewModel attribute or implements the IPOCOViewModel interface
  • Doesn’t implement the INotifyPropertyChanged interface and there are no properties of the ICommand type

... then the Smart Tag treats the underlying object as a POCO object, meaning its DataContext property is set through a ViewModelSource class.

   1: DataContext="{dxmvvm:ViewModelSource Type={x:Type ViewModel:MainViewModel}}"
 
Otherwise, the DataContext is set in the typical way.

ApplicationTheme

The ApplicationTheme property applies a single theme (DeepBlue by default) to the entire application at runtime and in Visual Studio.

SmartTag_Themes

When you apply a theme, the DevExpress Smart Tag automatically adds the following code to your application:

App.config file (DevExpress generated code preserves the theme between sessions):

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <configuration>
   3:     <configSections>
   4:        <sectionGroup name="userSettings" ... >
   5:            <section name="DXThemeManager" ... />
   6:        </sectionGroup>
   7:     </configSections>
   8:     <userSettings>
   9:        <DXThemeManager>
  10:            <setting name="ApplicationThemeName" serializeAs="String">
  11:                <value>Office2013</value>
  12:            </setting>
  13:        </DXThemeManager>
  14:     </userSettings>
  15: </configuration>

App.xaml (DevExpress generated XAML applies the theme set in the App.config):

   1: <Application x:Class="DXDesignTime.App"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     StartupUri="MainWindow.xaml" 
   5:     Startup="OnAppStartup_UpdateThemeName">
   6:     <Application.Resources>
   7:        
   8:     </Application.Resources>
   9: </Application>

App.xaml.cs

   1: public partial class App : Application {
   2:     private void OnAppStartup_UpdateThemeName(object sender, StartupEventArgs e) {
   3:        DevExpress.Xpf.Core.ApplicationThemeHelper.UpdateApplicationThemeName();
   4:     }
   5: }

Image Gallery

You can assign a Control Glyph directly from its Smart Tag. An icon list of choices can be populated from images in your solution or the DevExpress.Images.v14.2.dll assembly. The DevExpress.Images.v14.2.dll assembly contains common images referenced across a wide range of DevExpress controls. To access the complete icon list, press the SmartTag_SourceBindingButton button beside the Glyph or LargeGlyph property.

SmartTag_Images

The following properties will use an Image Gallery to present their available icons sets: Image.Source, AppBarButton.Glyph, TileBarItem.TileGlyph, NavigationBarItem.Glyph, NavButton.Glyph, BarItem.Glyph, BarItem.LargeGlyph, ImageEdit.Source, Window.Icon, NavBarGroup.ImageSource, NavBarItem.ImageSource, RibbonPageGroup.Glyph.

Convert To DXWindow or DXRibbonWindow

By clicking the Smart Tag’s Convert to DXWindow or Convert to DXRibbonWindow options (both are available when a Window is selected), you can easily convert a Window to a DXWindow or DXRibbonWindow with a single action.

SmartTag_Windows

The Smart Tag automatically handles the generation of the necessary XAML and C#.

2 comment(s)
Martin Pelletier
Martin Pelletier

Like all the little help you can get us :)

I know XPO is less popular but a little tutorial on how to use XPO with your WPF controls would be cool

24 February, 2015
Michael Ch (DevExpress Support)
Michael Ch (DevExpress Support)

Hello Martin,

There are few blogs that explain how to bind WPF components to XPO data:

1. community.devexpress.com/.../getting-started-with-the-devexpress-datagrid-for-wpf-xpo-data-binding.aspx

2. community.devexpress.com/.../xpo-11-1-sneak-peek-data-binding-in-wpf.aspx

The following ticket in SC also contains information about using DevExpress WPF controls with XPO:

www.devexpress.com/.../S34007

If you face any specific difficulties in this regard, please submit a ticket (www.devexpress.com/.../Create), and we will be happy to assist you.

In addition, I would like to draw your attention to our Scaffolding Wizard: documentation.devexpress.com that allows you to get a functional application with well-organized and extendable MVVM structure in few clicks. You can find detailed information here:community.devexpress.com/.../devexpress-mvvm-framework-using-scaffolding-wizards-for-building-views.aspx and here:

community.devexpress.com/.../new-wpf-mvvm-scaffolding-wizard-released-in-v2013-1.aspx

In addition, we have plans to publish a new blog dedicated to new Scaffolding features introduced in v14.2.

Thanks,

Michael

26 February, 2015

Please login or register to post comments.