This example illustrates how to apply a theme to an application or an element within an application.
Files to Look At
- MainWindow.xaml (VB: MainWindow.xaml)
- MainWindow.xaml.cs (VB: MainWindow.xaml.vb)
- Task.cs (VB: Task.vb)
Learning Materials
- Themes
- Available Themes
- Modify Theme Resources
- Implement the ThemeMananger theme support in custom controls
More Examples
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
XAML<dx:DXWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
x:Class="DevExpress.Examples.ThemeSwitcher.MainWindow"
xmlns:dxut="clr-namespace:DevExpress.Xpf.Utils.Themes;assembly=DevExpress.Xpf.Core.v24.2"
x:Name="wndMain"
Title="MainWindow" Height="550" Width="850">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Application theme:" VerticalAlignment="Center" Margin="10,0" />
<dxe:ComboBoxEdit VerticalAlignment="Center" Width="200" ItemsSource="{Binding Source={x:Static dx:Theme.Themes}}" x:Name="cbTheme"
DisplayMember="Name" ValueMember="Name" EditValueChanged="cbTheme_EditValueChanged" />
<Button Content="Set default theme" VerticalAlignment="Center" Margin="10,0" Padding="15,1" Click="Button_Click" />
</StackPanel>
<dxg:GridControl Grid.Row="1" AutoGenerateColumns="AddNew" x:Name="dxGrid" EnableSmartColumnsGeneration="True">
<dxg:GridControl.View>
<dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="True" />
</dxg:GridControl.View>
</dxg:GridControl>
<dx:BackgroundPanel Grid.Row="2"
dx:ThemeManager.ThemeName="{Binding EditValue, ElementName=cbLocalTheme}">
<GroupBox Header="Set a theme for this element:" Height="Auto">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="Local theme:" VerticalAlignment="Center" Margin="10,0" />
<dxe:ComboBoxEdit VerticalAlignment="Center" Width="200" x:Name="cbLocalTheme" SelectedIndex="15" ValueMember="Name"
ItemsSource="{Binding Source={x:Static dx:Theme.Themes}}" />
<dxe:CheckEdit Content="DXCheckEdit" Margin="10,0" />
<!--This text edit has it's own background-->
<dxe:TextEdit Text="I'm always red" x:Name="tbSpecial" Background="OrangeRed" Margin="10,0" />
<!--This button's theme is set directly-->
<Button Content="Independent theme" dx:ThemeManager.ThemeName="MetropolisDark" Margin="10,0" />
<Slider Value="40" Width="200" Maximum="100" Margin="10,0" />
</StackPanel>
</GroupBox>
</dx:BackgroundPanel>
</Grid>
</dx:DXWindow>
C#using DevExpress.Xpf.Core;
using DevExpress.Xpf.Utils.Themes;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace DevExpress.Examples.ThemeSwitcher {
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : DXWindow {
public MainWindow() {
InitializeComponent();
this.dxGrid.ItemsSource = this.Tasks;
}
#region Data
protected List<Task> _Tasks;
public List<Task> Tasks {
get {
if(this._Tasks == null) {
this._Tasks = new List<Task>();
Random r = new Random();
int i = 0;
while(i < 100) {
this._Tasks.Add(new Task() {
Name = string.Format("Task {0}", i),
Priority = r.Next(2) > 0 ? Priority.Important : Priority.NotImportant,
StartDate = DateTime.Today.AddDays(-r.Next(20)),
FinishDate = DateTime.Today.AddDays(r.Next(20)),
IsComplete = r.Next(2) > 0
});
i++;
}
}
return this._Tasks;
}
}
#endregion Data
private void Button_Click(object sender, RoutedEventArgs e) {
ApplicationThemeHelper.ApplicationThemeName = Theme.DefaultThemeName;
}
private void cbTheme_EditValueChanged(object sender, Xpf.Editors.EditValueChangedEventArgs e) {
ApplicationThemeHelper.ApplicationThemeName = (this.cbTheme.SelectedItem as Theme).Name;
}
}
}
C#using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace DevExpress.Examples.ThemeSwitcher {
public enum Priority { Important, NotImportant }
public class Task {
public string Name { get; set; }
public DateTime StartDate { get; set; }
public DateTime FinishDate { get; set; }
public bool IsComplete { get; set; }
public Priority Priority { get; set; }
}
}