12 - Revit API - Family Manager - Custom Button Style

Theme is not complete without buttons style. Here we deal with how to style button to be more fit in dark theme style from last video. Our style will now support hover animation based on mouse position. Content of the button is overridden so we can put custom content with borders, text blocks or other items.

Style is implemented in Buttons.xaml Resource Dictionary which is merged with other styles in main App.xaml Resource Dictionary. Notice that in App.xaml order of merging styles is kinda important. If buttons depends on Colors.xaml dictionary, one should be merged prior Buttons.xaml. Boy this one was bugging me for few ours until I figure it out. Probably this is mentioned somewhere in documentation and I was lazy to read more methodically.

<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>
        <ResourceDictionary Source="Colors.xaml" />
        <ResourceDictionary Source="Fonts.xaml" />
    </ResourceDictionary.MergedDictionaries>


    <!-- Template style for flat button. -->
    <Style x:Key="MainButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{StaticResource MainBackgroundBrush}" />
        <Setter Property="Foreground" Value="{StaticResource YellowFontBrush}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="FontFamily" Value="{StaticResource OpenSansLite}" />
        <Setter Property="FontSize" Value="{StaticResource LargeFontSize}" />
        <Setter Property="Padding" Value="1" />
        <Setter Property="Margin" Value="0" />


        <!-- Overide default button content. -->
        <Setter Property="Template">


            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">


                    <!-- Button content. -->
                    <Border x:Name="border"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            SnapsToDevicePixels="True">


                        <Grid>


                            <TextBlock Text="{TemplateBinding Content}"
                                       Focusable="False"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                       Margin="{TemplateBinding Margin}"
                                       Padding="{TemplateBinding Padding}"
                                       SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />


                            <TextBlock Style="{StaticResource BaseTextBlockStyle}"
                                       HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                       VerticalAlignment="{TemplateBinding VerticalAlignment}" />


                        </Grid>
                        
                    </Border>


                    <!-- Event triggers for styled animation. -->
                    <ControlTemplate.Triggers>


                        <!-- Change background when mouse hover over button. -->
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation To="{StaticResource MainLightBackground}"
                                                    Duration="0:0:0.3"
                                                    Storyboard.TargetName="border"
                                                    Storyboard.TargetProperty="Background.Color" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>


                        <!-- Change background when mouse leave button. -->
                        <EventTrigger RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation To="{StaticResource MainBackground}"
                                                    Duration="0:0:0.3"
                                                    Storyboard.TargetName="border"
                                                    Storyboard.TargetProperty="Background.Color" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        
                    </ControlTemplate.Triggers>


                </ControlTemplate>
            </Setter.Value>
            
        </Setter>


    </Style>
    
</ResourceDictionary>

Once you have style setup like this you can customize button very deeply.

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