This example creates a view styled according to Fluent Design with DevExpress components.
Here are the main controls used in the view:
- ThemedWindow - the window with the acrylic effect
- AccordionControl - the navigation control on the left
- MainMenuControl with bar items - the user menu in the top right corner
- ListBoxEdit - the galleries in the main part
- ButtonEdit - the search field in the window header
We used the following features to achieve this design:
-
<dx:ThemedWindow AcrylicOpacity="0.6" AcrylicColor="#FF02111D" ...
-
<Style x:Key="accordionChildItemStyle" TargetType="{x:Type dxa:AccordionItem}"> <Setter Property="dxwui:RevealHighlightOptions.Mode" Value="BackgroundAndBorder"/> <Setter Property="dxwui:RevealHighlightOptions.BackgroundColor" Value="#19E4D9D9"/> <Setter Property="dxwui:RevealHighlightOptions.BorderColor" Value="#FF615B5B"/> <Setter Property="dxwui:RevealHighlightOptions.BorderThickness" Value="1"/> </Style>
-
Theme palettes to customize theme colors:
var custompalette = new ThemePalette("CustomPalette"); custompalette.SetColor("Foreground", Colors.White); custompalette.SetColor("Focused", (Color)ColorConverter.ConvertFromString("#A04B647A")); custompalette.SetColor("HoverBackground", (Color)ColorConverter.ConvertFromString("#1FFFFFFF")); //… var customtheme = Theme.CreateTheme(custompalette, Theme.Office2019Black); Theme.RegisterTheme(customtheme); ApplicationThemeHelper.ApplicationThemeName = customtheme.Name;
-
<dx:WpfSvgPalette.Palette> <dx:WpfSvgPalette> <SolidColorBrush x:Key="Blue" Color="White"/> <SolidColorBrush x:Key="Black" Color="White"/> <SolidColorBrush x:Key="Yellow" Color="White"/> <SolidColorBrush x:Key="Red" Color="White"/> <SolidColorBrush x:Key="Green" Color="White"/> </dx:WpfSvgPalette> </dx:WpfSvgPalette.Palette>
-
SimpleButtons with a corner radius:
<dx:SimpleButton CornerRadius="2" ...
-
The ThemedWindow.HeaderItems property to add elements to the window header.
Please note that you need to restore the Mono.Cecil NuGet package to run the sample.
- MainWindow.xaml (VB: MainWindow.xaml)
- MainViewModel.cs (VB: MainViewModel.cs)
- ViewResourceDictionary.xaml (VB: ViewResourceDictionary.xaml)
(you will be redirected to DevExpress.com to submit your response)