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>















