none
Problem with TemplateBinding in radial gradient for a control template

    Question

  • Hello,
    I'm trying to customize a very good control template for a button I found on the internet for a Glass style button (http://blogs.msdn.com/mgrayson/archive/2007/02/16/creating-a-glass-button-the-complete-tutorial.aspx).
    There's a Radial gradient for the "glow" effect on mouseOver and I want to link it to the background color of the button via TemplateBinding but it doesn't work.
    Here is the code of the Control Template, can anyone help me finding the mistake I'm probably doing?

        <ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}">
            <ControlTemplate.Resources>
                <Storyboard x:Key="Timeline1">
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
                <Storyboard x:Key="Timeline2">
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </ControlTemplate.Resources>
            <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.507*" />
                            <RowDefinition Height="0.493*" />
                        </Grid.RowDefinitions>
                        <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">
                            <Border.Background>
                                <RadialGradientBrush>
                                    <RadialGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1.702" ScaleY="2.243" />
                                            <SkewTransform AngleX="0" AngleY="0" />
                                            <RotateTransform Angle="0" />
                                            <TranslateTransform X="-0.368" Y="-0.152" />
                                        </TransformGroup>
                                    </RadialGradientBrush.RelativeTransform>
                                    <GradientStop Color="{TemplateBinding Background}" Offset="0" />
                                    <GradientStop Color="#008DBDFF" Offset="1" />
                                </RadialGradientBrush>
                            </Border.Background>
                        </Border>
                        <ContentPresenter x:Name="pres" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2" />
                        <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">
                                    <GradientStop Color="#99FFFFFF" Offset="0" />
                                    <GradientStop Color="#33FFFFFF" Offset="1" />
                                </LinearGradientBrush>
                            </Border.Background>
                        </Border>
                    </Grid>
                </Border>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Opacity" TargetName="shine" Value="0.4" />
                    <Setter Property="Background" TargetName="border" Value="#CC000000" />
                    <Setter Property="Visibility" TargetName="glow" Value="Hidden" />
                    <Setter Property="Margin" TargetName="pres" Value="1,1,-1,-1" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard Storyboard="{StaticResource Timeline1}" />
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}" />
                    </Trigger.ExitActions>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

    Thanks to everybody

    P.S. if I use the same binding for other colors (let's say the button border color) it works fine.
    Friday, December 07, 2007 5:47 PM

Answers

  • Background property is type of Brush, you have to bind it to Color Property of the Brush

     

    Friday, December 07, 2007 6:11 PM
  •  

    The background is not a color.  The GradientStop takes a Color.  The Background can be a color, but it can also be a Gradient.

     

    GradientStop Color must be a color.

    Friday, December 07, 2007 6:21 PM

All replies

  • Background property is type of Brush, you have to bind it to Color Property of the Brush

     

    Friday, December 07, 2007 6:11 PM
  •  

    The background is not a color.  The GradientStop takes a Color.  The Background can be a color, but it can also be a Gradient.

     

    GradientStop Color must be a color.

    Friday, December 07, 2007 6:21 PM
  • Try template binding the entire Border.Background property to the background.  You could then create a resource of type RadialGradientBrush for each color variation you are likely to use.  It's more verbose but it works.  There is also another approach which might work, which is  described here.
    Friday, January 11, 2008 4:58 PM