This blog is related to Dynamically Applying styles to controls in control template of a button.

To do that one must override the OnApplyTemplate() of the control and use “GetTemplateChild(controlName)” within the method to access the control. There after,any dynamic style can be applied.

An Implementation example :

1) CustomButton class  which overrides OnApplytemplate and uses “GetTemplateChild” to access the border element

public class CustomButton : Button
    {
        public bool? IsSelected;
        public bool? IsNew;
        public string IconType;

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            Border border = GetTemplateChild(“border”) as Border;

            if (border != null)
            {
                border.BorderBrush = GetBorderBrush(IsSelected);
                border.Background = GetBackGroundStyleBasedOnType(IconType, IsNew);
            }
        }

        public Brush GetBackGroundStyleBasedOnType(string type,bool? isNew)
        {
            if (!string.IsNullOrEmpty(type))
            {
                switch (type.ToLower())
                {
                    case “default”:
                        if (isNew.HasValue && isNew.Value)
                            return Application.Current.Resources["MutationDefaultBackgroundBrush"] as Brush;
                        else
                            return Application.Current.Resources["MutationDefaultBackgroundBrush"] as Brush;
                 
                }
            }
            return null;
        }

        public Brush GetBorderBrush(bool? isSelected)
        {
            if (IsSelected.HasValue && IsSelected.Value)
            {
                return ThemeHelper.GetThemeBasedBrush(“MutationSelectedBrush”);
            }
            else
            {
                return ThemeHelper.GetThemeBasedBrush(“MutationUnSelectedBrush”);
            }
        }

    }
}

2) XAML Button Instantiation

 <local:MutationButton x:Name=”btnTerminatedSubscriptions” Style=”{StaticResource CustomButtonStyle}” Click=”btnTerminatedSubscriptions_Click”/>

 3) Style for button

 <Style x:Key=”MyButtonStyle” TargetType=”Button”>
        <Setter Property=”Template”>
            <Setter.Value>
                <ControlTemplate TargetType=”Button”>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name=”CommonStates”>
                                <VisualState x:Name=”Disabled”/>
                                <VisualState x:Name=”Normal”/>
                                <VisualState x:Name=”MouseOver”>
                                    <Storyboard>
                                        <ColorAnimation Duration=”0″ To=”#BFFFFFFF” Storyboard.TargetProperty=”(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)” Storyboard.TargetName=”border” d:IsOptimized=”True”/>
                                        <ColorAnimation Duration=”0″ To=”#BF617584″ Storyboard.TargetProperty=”(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)” Storyboard.TargetName=”border” d:IsOptimized=”True”/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name=”Pressed”>
                                    <Storyboard>
                                        <ColorAnimation Duration=”0″ To=”#FFC4CFD8″ Storyboard.TargetProperty=”(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)” Storyboard.TargetName=”border” d:IsOptimized=”True”/>
                                        <ColorAnimation Duration=”0″ To=”Black” Storyboard.TargetProperty=”(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)” Storyboard.TargetName=”border” d:IsOptimized=”True”/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name=”FocusStates”>
                                <VisualState x:Name=”Unfocused”/>
                                <VisualState x:Name=”Focused”/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name=”border” BorderThickness=”3″ CornerRadius=”5″ Grid.RowSpan=”1″ Grid.ColumnSpan=”1″ Grid.Column=”1″ Background=”{StaticResource MutationDefaultBackgroundBrush}” >
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
                                    <GradientStop Color=”#7F000000″ Offset=”1″/>
                                    <GradientStop Color=”#7FC4CFD8″/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                        </Border>
                        <ContentPresenter HorizontalAlignment=”Center” VerticalAlignment=”Center” RenderTransformOrigin=”0.2,0″ Grid.Column=”1″/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property=”FontSize” Value=”18.667″/>
        <Setter Property=”Foreground” Value=”#7F000000″/>
        <Setter Property=”MinHeight” Value=”40″/>
        <Setter Property=”MinWidth” Value=”40″/>
    </Style>