Setting Properties of Control Templates in XAML

Question

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.

Answer 1

As far as I understand the question you want to bind glow colors in your template to glow properties on your control. You can do it this way:

<GradientStop x:Name="GlowStartColor" Color="{TemplateBinding GlowStartColor}" Offset="0"/>
<GradientStop x:Name="GlowEndColor" Color="{TemplateBinding GlowEndColor}" Offset="1"/>

Answer 2

I couldn't get the above to work right either. Its on the right track though I think. I just wanted to have the ability to set the glow properties when I define the button. The only other way to do this is to make a custom control of a button, but it seems a little excessive just to add on some extra properties.

Answer 3

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).

Answer 4

I had to do something similar recently. Turns out that you can piggyback off of other properties that are already defined on the control. So, if your new template does not use TemplateBindings for, say, Foreground and Background then you can stick your start/stop glow colours in there. There's also the Tag property on all controls that's usually empty.

It's worth looking into these options as an alternative to subclassing a control. In cases where there is only one custom parameter to the control template, it's usually simple and often natural to reuse an existing property.