11 - Revit API - Family Manager Plugin - Dark Theme and Styling

After finishing page transition implementation we can create custom styling and theme for our application. As always we can use native WPF functionality without leverage of third party modules. This is where WPF shines. Modern looking UI is much easier to develop using XAML than in Windows Forms.

First steps first. We need some kind of visual guide, so I find one image of UI that is looking like good one to implement. We sample colors in Photoshop (you can use open source apps such as Gimp, Paint.net, Krita or some other) to do this task. Colors are laid out in custom resource dictionary which is just a .xaml file. All dictionaries will be merged into one master dictionary call App.xaml that can be used in any Window, Page or User Control in our application. Here is simple color resource dictionary.

<ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:cbb.ui">


    <Color x:Key="MainBackground">#2f2c37</Color>
    <SolidColorBrush x:Key="MainBackgroundBrush" Color="{StaticResource MainBackground}" />


    <Color x:Key="MainLightBackground">#3d3947</Color>
    <SolidColorBrush x:Key="MainLightBackgroundBrush" Color="{StaticResource MainLightBackground}" />


    <Color x:Key="MainBorders">#3a3742</Color>
    <SolidColorBrush x:Key="MainBordersBrush" Color="{StaticResource MainBorders}" />


    <Color x:Key="BlueFont">#b7cccf</Color>
    <SolidColorBrush x:Key="BlueFontBrush" Color="{StaticResource BlueFont}" />


    <Color x:Key="YellowFont">#bcbba6</Color>
    <SolidColorBrush x:Key="YellowFontBrush" Color="{StaticResource YellowFont}" />


    <Color x:Key="OrangeFont">#fac488</Color>
    <SolidColorBrush x:Key="OrangeFontBrush" Color="{StaticResource OrangeFont}" />


    <Color x:Key="RedFont">#c66a77</Color>
    <SolidColorBrush x:Key="RedFontBrush" Color="{StaticResource RedFont}" />


    <Color x:Key="GrayFont">#d5d2dd</Color>
    <SolidColorBrush x:Key="GrayFontBrush" Color="{StaticResource GrayFont}" />



</ResourceDictionary>

Brush is what we need. Also custom font would be nice to have. I decided to use Open Sans font that can be found and download freely on www.fonts.google.com. Just as colors we can add resource dictionary for our fonts. More than one can be defined here.

<ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:cbb.ui"
                    xmlns:System="clr-namespace:System;assembly=mscorlib">
    
    <!-- Font size. -->
    <System:Double x:Key="SmallFontSize">9</System:Double>
    <System:Double x:Key="RegularFontSize">12</System:Double>
    <System:Double x:Key="LargeFontSize">14</System:Double>
    <System:Double x:Key="ExtraLargeFontSize">16</System:Double>
    
    <!-- Open Sans Font Family -->
    <FontFamily x:Key="OpenSansLite">pack://application:,,,/cbb.res;Component/Fonts/OpenSans/#Open Sans Light</FontFamily>
    <FontFamily x:Key="OpenSansLiteItalic">pack://application:,,,/cbb.res;Component/Fonts/OpenSans/#Open Sans Light Italic</FontFamily>
    <FontFamily x:Key="OpenSansRegular">pack://application:,,,/cbb.res;Component/Fonts/OpenSans/#Open Sans Regular</FontFamily>


</ResourceDictionary>

Defining font hosted in cbb.res .dll assembly can be done with some kind of weird syntax and looks like this "pack://application:,,,/cbb.res;Component/Fonts/OpenSans/#Open Sans Regular". Looks like sorcery doesn't it. It is standard way of pulling out resources from .dll that lives in our solution. It is better to use one resource dictionary in our UI elements than loading individual ones for each UI item. So App.xaml is created to host all other ones. Looks like this one bellow.

<ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:cbb.ui">


    <ResourceDictionary.MergedDictionaries>
        
        <!-- Styles. -->
        <ResourceDictionary Source="Styles/Colors.xaml" />
        <ResourceDictionary Source="Styles/Fonts.xaml" />


        <!-- Converters. -->
        <ResourceDictionary Source="Converters/Converters.xaml" />


    </ResourceDictionary.MergedDictionaries>
    
</ResourceDictionary>

Finally our dark theme and styling look like something on presented image. Using this method we can develop truly nice user experience. Would be cool to see Revit as application implement dark theme so our app don't sticks too much.

Gota say that I really enjoy using WPF and will continue developing apps with this technology. Buttons need styling too. In next video/article we'll attack this issue, and create custom button styling for whole application at once.

Project roadmap can be found at: https://trello.com/b/JjstvevR/circles-bim-blog-cbb

Public code repository can be accessed on link: https://bitbucket.org/cbb_team/circles-bim-blog