It looks like you should introduce your own Button class. I would do it like this:
<my:GlowingArrowButton ArrowDirection="Left"/>
And your generic.xaml:
<Style TargetType="my:GlowingArrowButton"> <Setter Property="Cursor" Value="Hand"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="my:GlowingArrowButton"> <Grid x:Name="grdRoot" RenderTransformOrigin="0.5,0.5"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.165"/> </VisualStateGroup.Transitions> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver" <Storyboard> <DoubleAnimation Duration="0:0:0.165" To="1.25" Storyboard.TargetProperty="(UiElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="polygon"/> <DoubleAnimation Duration="0:0:0.165" To="1.25" Storyboard.TargetProperty="(UiElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="polygon"/> <ColorAnimation Duration="0:0:0.165" To="#FF9BD6FF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/> <ColorAnimation Duration="0:0:0.165" To="#FF70ACDF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/> <ColorAnimation Duration="0:0:0.165" To="#FF7DAEFF" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/> <ColorAnimation Duration="0:0:0.165" To="#FF2B5CB4" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="polygon" d:IsOptimized="True"/> </Storyboard> </VisualState> <VisualState x:Name="Pressed"/> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <LayoutTransformer LayoutTransform="{Binding Path=ArrowDirection, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource RotationTranslator_ToBeImplemented}}" Grid.Row="0" HorizontalAlignment="Center"> <Polygon x:Name="polygon" Margin="1" StrokeThickness="{TemplateBinding BorderThickness}" RenderTransformOrigin="0.5,0.5"> <Polygon.Points> <Point X="10"/> <Point X="0" Y="5" /> <Point Y="10" X="10" /> </Polygon.Points> <Polygon.RenderTransform> <ScaleTransform /> </Polygon.RenderTransform> <Polygon.Fill> <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1"> <GradientStop Color="#FFA9A9A9"/> <GradientStop Color="#FFD3D3D3" Offset="1"/> </LinearGradientBrush> </Polygon.Fill> <Polygon.Stroke> <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1"> <GradientStop Color="#FF696969"/> <GradientStop Color="#FF939393" Offset="1"/> </LinearGradientBrush> </Polygon.Stroke> </Polygon> </LayoutTransformer> <ContentPresenter Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
And the code:
public class GlowingArrowButton : ButtonBase { public GlowingArrowButton() { DefaultStyleKey = typeof (GlowingArrowButton); } public ArrowDirection ArrowDirection { get { return (ArrowDirection) GetValue( ArrowDirectionProperty ); } set { SetValue( ArrowDirectionProperty, value ); } } public static readonly DependencyProperty ArrowDirectionProperty = DependencyProperty.Register( "ArrowDirection", typeof( ArrowDirection ), typeof( GlowingArrowButton ), new PropertyMetadata( default( ArrowDirection ) ) ); } public enum ArrowDirection { Left, Up, Right, Down }
[Edit] Written but not verified:
public class RotationTranslator : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var arrowDirection = (ArrowDirection) value; switch (arrowDirection) { case ArrowDirection.Left: return new RotateTransform{ Angle = 0 }; case ArrowDirection.Up: return new RotateTransform { Angle = 90 }; case ArrowDirection.Right: return new RotateTransform { Angle = 180 }; case ArrowDirection.Down: return new RotateTransform { Angle = -90 }; } throw new InvalidOperationException(); } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){throw new NotSupportedException();} }