How to allow user to change property in a template?

Question

Hi,

I have a button which in Blend I have edited (using Edit current template). I have added my animations for mouse over etc and the button works as expected.

However, on the mouse over event I have a shape that scales. What I want to do is give the user the option to set in XAML the rotation and scaling properties.

So for example, something like this:

<Button Height="76" Content="Gallery" Style="{StaticResource RotatingAnimationButton}" " Scaling="2.0" >

where in the template I have :

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Document" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0]. (ScaleTransform.ScaleX)">

where Value="1.5" would be changed to "2.0".

Currently, all I have is the style of the template. I am not sure whether I can pass in the parameters or I have to create some sort of user control?

JD

Note : This question was originally posted as Silverlight and WPF. But as you will see it only applies to Silverlight which is why the excellent solutions provided caused me problems.

Answer 1

You have two good options:

1. You can subclass Button and add a "Scaling" property, or
2. You can create an attached "Scaling" property and attach it to Button

In either case, your animation can bind to it.

Unless your button is custom in other ways, I would generally go with the attached property. You would use a standard attached property template (use the "propa" snippet):

public class MyAttachedProperties
{
      // Scaling
  public static double GetScaling(DependencyObject obj) { return (double)obj.GetValue(ScalingProperty); }
  public static void SetScaling(DependencyObject obj, double value) { obj.SetValue(ScalingProperty, value); }
  public static readonly DependencyProperty ScalingProperty = DependencyProperty.RegisterAttached("Scaling", typeof(double), typeof(MyAttachedProperties));
}

In the code that uses the button you would reference it like this:

<Button Height="76" Content="Gallery"
        Style="{StaticResource RotatingAnimationButton}"
        local:MyAttachedProperties.Scaling="2.0" />

In the template you would bind it like this:

Value="{Binding Path=(local:MyAttachedProperties.Scaling),
                RelativeSource={RelativeSource TemplatedParent}}"

Both of these bits of XAML assume you have xmlns:local defined to include the MyAttachedProperties class.