Home/ Questions/Q 124375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T04:59:25+00:00

I’ve created a button control template where I want to change the glow color

  • 0

I’ve created a button control template where I want to change the glow color of the button on the xaml level. Here is what I mean.

<Button x:Name='btnClose' Template='{DynamicResource GlassButton}' Width='32' Height='32' GlowStartColor='Red' GlowEndColor='DarkRed'>Button1</Button>

The GlowStartColor and GlowEndColor are the properties I want to change on the control template.

Here’s my control template

    <ControlTemplate x:Key='DefaultGlassButton' TargetType='{x:Type Button}'>     <!-- Internal Resources -->     <ControlTemplate.Resources>         <Storyboard x:Key='Storyboard1' RepeatBehavior='Forever' AutoReverse='True'>             <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='Glow' Storyboard.TargetProperty='(UIElement.Opacity)'>                 <SplineDoubleKeyFrame KeyTime='00:00:00.3000000' Value='1'/>                 <SplineDoubleKeyFrame KeyTime='00:00:00.7000000' Value='1'/>             </DoubleAnimationUsingKeyFrames>             <ColorAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='Glow' Storyboard.TargetProperty='(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)'>                 <SplineColorKeyFrame KeyTime='00:00:00.3000000' Value='#00C080FF'/>                 <SplineColorKeyFrame KeyTime='00:00:00.7000000' Value='#00C080FF'/>             </ColorAnimationUsingKeyFrames>         </Storyboard>         <Storyboard x:Key='Storyboard2'>             <DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='Glow' Storyboard.TargetProperty='(UIElement.Opacity)'>                 <SplineDoubleKeyFrame KeyTime='00:00:00.3000000' Value='0.745'/>             </DoubleAnimationUsingKeyFrames>         </Storyboard>     </ControlTemplate.Resources>      <!-- Actual Control Template-->     <Border x:Name='OuterBorder' BorderBrush='#FFFFFFFF' BorderThickness='1,1,1,1' CornerRadius='4,4,4,4'>         <Border x:Name='InnerBorder' Background='#7F000000' BorderBrush='#FF000000' BorderThickness='1,1,1,1' CornerRadius='4,4,4,4'>             <Grid x:Name='MainGrid'>                 <Grid.RowDefinitions>                     <RowDefinition Height='0.5*'/>                     <RowDefinition Height='0.5*'/>                 </Grid.RowDefinitions>                 <Border x:Name='Glow' HorizontalAlignment='Stretch' Width='Auto' Opacity='0' Grid.RowSpan='2' CornerRadius='4,4,4,4'>                     <Border.Background>                         <RadialGradientBrush>                             <RadialGradientBrush.RelativeTransform>                                 <TransformGroup>                                     <ScaleTransform CenterX='0.5' CenterY='0.5' ScaleX='1.852' ScaleY='2.281'/>                                     <SkewTransform AngleX='0' AngleY='0' CenterX='0.5' CenterY='0.5'/>                                     <RotateTransform Angle='0' CenterX='0.5' CenterY='0.5'/>                                     <TranslateTransform X='0.014' Y='0.458'/>                                 </TransformGroup>                             </RadialGradientBrush.RelativeTransform>                             <GradientStop x:Name='GlowStartColor' Color='#B1FF80FF' Offset='0'/>                             <GradientStop x:Name='GlowEndColor' Color='#00C080FF' Offset='1'/>                         </RadialGradientBrush>                     </Border.Background>                 </Border>                 <ContentPresenter HorizontalAlignment='Center' VerticalAlignment='Center' Width='Auto' Grid.RowSpan='2'/>                 <Border x:Name='Shine' HorizontalAlignment='Stretch' Margin='0,0,0,0' CornerRadius='4,4,0,0'>                     <Border.Background>                         <LinearGradientBrush EndPoint='0.5,1' StartPoint='0.5,0'>                             <GradientStop x:Name='ShineStartColor' Color='#99FFFFFF' Offset='0'/>                             <GradientStop x:Name='ShineEndColor' Color='#26FFFFFF' Offset='1'/>                         </LinearGradientBrush>                     </Border.Background>                 </Border>             </Grid>         </Border>     </Border>      <!-- Triggers -->     <ControlTemplate.Triggers>         <Trigger Property='IsMouseOver' Value='True'>         </Trigger>         <Trigger Property='IsMouseOver' Value='True'>             <Trigger.EnterActions>                 <BeginStoryboard Storyboard='{StaticResource Storyboard1}'/>             </Trigger.EnterActions>             <Trigger.ExitActions>                 <BeginStoryboard x:Name='Storyboard2_BeginStoryboard' Storyboard='{StaticResource Storyboard2}'/>             </Trigger.ExitActions>         </Trigger>         <Trigger Property='IsPressed' Value='True'>             <Setter Property='Opacity' TargetName='Shine' Value='0.4'/>             <Setter Property='Background' TargetName='InnerBorder' Value='#CC000000'/>         </Trigger>     </ControlTemplate.Triggers> </ControlTemplate>

Is this the proper way to do this, or is there a better way? Still fairly new to WPF and XAML so still have alot of learning to do.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. You need to either subclass Button and add those two properties or add those two properties as attached properties (by creating a new class with two attached dependency properties).

    • 0