I am trying to modify the ControlTemplate of CheckBox. I got the default template from ExpressionBlend and dropped it into a CheckBox.
Why does it now display the text "System.Windows.Controls.ControlTemplate" next to the CheckBox?
<CheckBox IsChecked="True">
<!-- the following is from ExpressionBlend -->
<ControlTemplate TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedTrue">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedFalse">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="IndeterminateOn">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="IndeterminateOff">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocussedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentFocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocussedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentFocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<BulletDecorator Background="Transparent" x:Name="bulletDecorator">
<BulletDecorator.Bullet>
<Grid Width="16" Height="16">
<Rectangle Height="14" Margin="1" x:Name="Background"
Width="14" Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}" />
<Rectangle Height="14" Margin="1" x:Name="BackgroundOverlay"
Width="14" Opacity="0" Fill="{x:Null}"
Stroke="{StaticResource HoverBrush}"
StrokeThickness="2" />
<Rectangle Height="16" x:Name="PressedRectangle"
Width="16" IsHitTestVisible="false" Opacity="0"
Stroke="{StaticResource HoverBrush}"
StrokeThickness="1" />
<Path Height="10" Margin="1,1,0,1.5" x:Name="CheckIcon"
Width="10.5" Opacity="0" Fill="{StaticResource GlyphBrush}"
Stretch="Fill"
Data="M102.03442,598.79645 L105.22962,597.78918 L106.78825,600.42358 C106.78825,600.42358 108.51028,595.74304 110.21724,593.60419 C112.00967,591.35822 114.89314,591.42316 114.89314,591.42316 C114.89314,591.42316 112.67844,593.42645 111.93174,594.44464 C110.7449,596.06293 107.15683,604.13837 107.15683,604.13837 z" />
<Rectangle Height="8" x:Name="IndeterminateIcon"
Width="10" Opacity="0" Fill="{StaticResource GlyphBrush}" />
<Rectangle Height="14" x:Name="DisabledVisualElement"
Width="14" Opacity="0" Fill="{StaticResource DisabledBackgroundBrush}" />
<Rectangle Height="16" x:Name="ContentFocusVisualElement"
Width="16" IsHitTestVisible="false" Opacity="0"
Stroke="{StaticResource HoverShineBrush}"
StrokeThickness="1" />
<Rectangle Height="12" x:Name="ShineRectangle"
Width="14" IsHitTestVisible="false" Opacity="1"
Stroke="{x:Null}"
StrokeThickness="1"
Fill="{StaticResource ShineBrush}"
Margin="2,2,2,2" />
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter RecognizesAccessKey="True"
Margin="5,0,0,0"
VerticalAlignment="Top" HorizontalAlignment="Left" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FocussedOff}"
x:Name="FocussedOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FocussedOn}"
x:Name="FocussedOn_BeginStoryboard"/>
</Trigger.EnterActions>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True" />
<Condition Property="IsThreeState" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="ThreeStateOn_BeginStoryboard" Storyboard="{StaticResource CheckedFalse}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="ThreeStateOff_BeginStoryboard" Storyboard="{StaticResource CheckedTrue}" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="{x:Null}" />
<Condition Property="IsThreeState" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="ThreeStateOn1_BeginStoryboard" Storyboard="{StaticResource IndeterminateOn}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="ThreeStateOff1_BeginStoryboard" Storyboard="{StaticResource IndeterminateOff}" />
</MultiTrigger.ExitActions>
<Setter Property="Visibility" TargetName="CheckIcon" Value="Hidden"/>
</MultiTrigger>
<Trigger Property="IsChecked" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource CheckedFalse}"
x:Name="CheckedTrue_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="CheckedTrue_BeginStoryboard1" Storyboard="{StaticResource CheckedTrue}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Background" />
<Setter Property="Stroke" Value="{DynamicResource DisabledBorderBrush}" TargetName="Background" />
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" />
<Setter Property="Opacity" TargetName="bulletDecorator" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</CheckBox>
This is because you assign ControlTemplate as a value of CheckBox. You should assign it to the Template property:
<CheckBox IsChecked="True">
<CheckBox.Template>
<ControlTemplate TargetType="{x:Type CheckBox}">
...
</ControlTemplate>
</CheckBox.Template>
</CheckBox>
Related
I have custom template for ToggleButton with triggers targeted for providing clear visual difference between Checked and Unchecked state.
Main concept:
Trigger 1. When Togglebuton is Unchecked and MouseOver = false: FontSize should be 13, FontWeight - Normal.
Trigger 2. When Togglebuton is Unchecked and MouseOver = true: FontSize should be 14, FontWeight - Normal.
Trigger 3. When Togglebuton is Checked: FontSize should be 15, FontWeight - Bold.
Everything is working fine, but after first toggleButton check/uncheck sequence
trigger 2 stops to fire and ToggleButton does not change appearence on MouseOver = true any more.
Here is my actual XAML.
<Style TargetType="{x:Type ToggleButton}" x:Key="DefaultToggleButtonStyle">
<Style.Resources>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2"
SnapsToDevicePixels="true"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeThickness="1"
StrokeDashArray="1 2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="Background" Value="{DynamicResource ButtonColor}" />
<Setter Property="Foreground" Value="{DynamicResource EditAreaColor}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="FontSize" Value="13" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Style TargetType="Border" x:Key="MainBorderStyle">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="CornerRadius" Value="1" />
<Setter Property="UseLayoutRounding" Value="True" />
</Style>
</ControlTemplate.Resources>
<Grid>
<Border Background="Black" Opacity="0.5">
<Border.Effect>
<BlurEffect Radius="7" />
</Border.Effect>
</Border>
<Border x:Name="upperSurfaceBorder" Background="{TemplateBinding Background}" Style="{StaticResource MainBorderStyle}">
<Border x:Name="mouserOverHl" Background="Transparent"
Style="{StaticResource MainBorderStyle}"
BorderThickness="0.5" BorderBrush="{StaticResource MainNormal}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Border>
<Border Background="Transparent" Style="{StaticResource MainBorderStyle}" x:Name="disabledOverlay" />
</Grid>
<ControlTemplate.Triggers>
<!--MouseOver-->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsChecked" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="14" Duration="0:0:.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="13" Duration="0:0:.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<!--IsChecked-->
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Trigger.Setters>
<Setter Property="Background" Value="{StaticResource MainVeryDark}"/>
</Trigger.Setters>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontWeight">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Bold</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="(ToggleButton.Background).(SolidColorBrush.Color)">
<ColorAnimation Duration="0:0:0.1" To="#002f67">
<ColorAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="15" Duration="0:0:0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontWeight">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Normal</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="13" Duration="0:0:0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--Pressed-->
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetName="upperSurfaceBorder" TargetProperty="Margin">
<ThicknessAnimation Duration="0:0:0.1" To="2 2 -2 -2">
<ThicknessAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard TargetName="upperSurfaceBorder"
TargetProperty="Margin">
<ThicknessAnimation Duration="0:0:0.1"
To="0 0 0 0">
<ThicknessAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--Disabled-->
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="disabledOverlay"
Storyboard.TargetProperty="Background.Color" To="#55FFFFFF">
<ColorAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Opacity" To="0.6" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" To="Transparent" Storyboard.TargetName="disabledOverlay" Storyboard.TargetProperty="Background.Color">
<ColorAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Opacity" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Setter Property="Visibility" Value="Visible" TargetName="disabledOverlay" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any suggestions what's wrong?
Thanks in advance!
Your Main problem is in Trigger 3. I think EnterActions and ExitActions have not feeling good with IsChecked Property. I don't know why.
you must take another way to writing this trigger.
Well, as RezaNoei suggested, the problem was in ExitActions of Trigger 3. I solved this issue by removing of "To" property of font's size animation. This decision was inspired by this topic.
I have a WPF app that uses Buttons (surprise)
I have styled it so that when the User clicks on the button the background image is changed to a red color.
What I want to happen is that after a few seconds the background reverts back to its original background.
I am not sure how to do this.
This is my code so far:
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" Background="{TemplateBinding Background}"
BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="{StaticResource RedButtonBackGround}"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="74"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="27"></Setter>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="{StaticResource ButtonBackGround}"/>
</Setter.Value>
</Setter>
</Style>
here is a solution to how animate the background image based on DoubleAnimationUsingKeyFrames and opacity.
Update - 2 Button style code (put to your resource section)
<ImageBrush x:Key="KoalaImageBrushKey" ImageSource="Images/Koala.jpg"/>
<ImageBrush x:Key="RedButtonBackGround" ImageSource="Images/RedButtonBackGround.jpg"/>
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border x:Name="MyBorder" CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
<Border x:Name="RectangleVisibleOnCklick" Opacity="0" CornerRadius="5" Background="{StaticResource RedButtonBackGround}" BorderThickness="1">
</Border>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="50"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="{StaticResource KoalaImageBrushKey}"/>
</Style>
First DoubleAnimationUsingKeyFrames section changes the RectangleVisibleOnCklick's opacity from 1 to 0. in 2 sec.
Second DoubleAnimationUsingKeyFrames section changes the MyBorder's opacity from 0 to 1. in 2 sec.
To make the animation to be faster change the KeyTime parameters of both DoubleAnimationUsingKeyFrames sections:
Options
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
or
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
Elliptic button with a Elliptic content
<ImageBrush x:Key="KoalaImageBrushKey" ImageSource="Images/Koala.jpg"/>
<ImageBrush x:Key="PinguinsImageBrushKey" ImageSource="Images/Penguins.jpg"/>
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse x:Name="MyBorder" Fill="{TemplateBinding Background}"></Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.OpacityMask>
<VisualBrush Visual="{Binding ElementName=MyBorder}"></VisualBrush>
</ContentPresenter.OpacityMask>
</ContentPresenter>
<Ellipse x:Name="RectangleVisibleOnCklick" Fill="{StaticResource PinguinsImageBrushKey}" Opacity="0"></Ellipse>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="50"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="{StaticResource KoalaImageBrushKey}"/>
</Style>
Rectangle button with elliptic content (is elliptic when clicked due to KeyFrames animation using)
<ImageBrush x:Key="KoalaImageBrushKey" ImageSource="Images/Koala.jpg"/>
<ImageBrush x:Key="PinguinsImageBrushKey" ImageSource="Images/Penguins.jpg"/>
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="MyBorder" Fill="{TemplateBinding Background}"></Rectangle>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.OpacityMask>
<VisualBrush Visual="{Binding ElementName=MyBorder}"></VisualBrush>
</ContentPresenter.OpacityMask>
</ContentPresenter>
<Ellipse x:Name="RectangleVisibleOnCklick" Fill="{StaticResource PinguinsImageBrushKey}" Opacity="0"></Ellipse>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="50"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="{StaticResource KoalaImageBrushKey}"/>
</Style>
Regards.
<Style x:Key="AnimatedButton" TargetType="Button">
<Setter Property="Background" Value="Red" />
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="Background.Color">
<ColorAnimation To="Blue" Duration="0:0:4" />
<ColorAnimation To="Red" BeginTime="0:1:52" Duration="0:0:4" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
Copied from here (by sa_ddam213)
I have a DatagridCheckBoxColumn is ReadOnly="true" but if i style the CheckBox using the Style
<WPFToolkit:DataGridCheckBoxColumn.ElementStyle>
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type CheckBox}}"></Style>
</WPFToolkit:DataGridCheckBoxColumn.ElementStyle>
Where CheckBox Default style is
<Style TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
<Setter Property="Foreground" Value="{StaticResource OutsideFontColor}" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Padding" Value="4,1,0,0" />
<Setter Property="Template" Value="{DynamicResource CheckBoxTemplate}" />
</Style>
<ControlTemplate x:Key="CheckBoxTemplate"
TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<Storyboard x:Key="PressedOn">
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
To="#FFF28A27" />
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
To="#FFF4D9BE" />
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BackgroundFill"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
<Storyboard x:Key="PressedOff">
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
To="#FFFDDA81" />
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
To="#FFFCE7AF" />
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="0" />
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BackgroundFill"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<Storyboard x:Key="DisabledOn">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="DisabledVisualElement"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxPress"
Storyboard.TargetProperty="Opacity"
To="1" />
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxPress"
Storyboard.TargetProperty="Opacity"
To="0" />
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.4000000"
Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="IndeterminateOn">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="IndeterminateIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="IndeterminateOff">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="IndeterminateIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocusedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusedVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocusedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusedVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid>
<Rectangle x:Name="Background"
Width="13"
Height="13"
Margin="1"
Fill="{DynamicResource CheckBoxBackgroundBrush}"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource CheckBoxBorderBrush}"
StrokeThickness="1" />
<Rectangle x:Name="BoxFill"
Width="9"
Height="9"
Fill="{DynamicResource CheckBoxInnerBoxBackgroundBrush}"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource CheckBoxInnerBoxBorderBrush}"
StrokeThickness="1" />
<Rectangle x:Name="BackgroundFill"
Width="13"
Height="13"
Margin="1"
Fill="{DynamicResource CheckBoxBackgroundFillBrush}"
Opacity="0"
RadiusX="0"
RadiusY="0"
Stroke="#FF5577A3"
StrokeThickness="1" />
<Rectangle x:Name="BoxOver"
Width="9"
Height="9"
Margin="3"
Fill="{DynamicResource CheckBoxMouseOverBrush}"
Opacity="0"
RadiusX="0"
RadiusY="0"
StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.886,0.808" EndPoint="0.055,0.119">
<GradientStop Color="#FFFCE7AF" />
<GradientStop Offset="1" Color="#FFFDDA81" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BoxPress"
Width="9"
Height="9"
Margin="3"
Opacity="0"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource CheckBoxPressBorderBrush}"
StrokeThickness="1" />
<Rectangle x:Name="BoxGradient"
Width="7"
Height="7"
Fill="{DynamicResource CheckBoxInnerBoxGradientBrush}"
RadiusX="0"
RadiusY="0"
StrokeThickness="1" />
<Rectangle x:Name="IndeterminateIcon"
Width="5"
Height="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource GlyphBrush}"
Visibility="Collapsed" />
<Path x:Name="CheckIcon"
Width="7"
Height="9"
Margin="0,3.333,3.833,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Data="M103.78572,598.96112 L105.09846,597.5661 L107.00806,600.16229 C107.00806,600.16229 109.91004,592.74463 109.91004,592.74463 C109.91004,592.74463 111.74678,593.79761 111.74678,593.79761 C111.74678,593.79761 107.88566,602.75848 107.88566,602.75848 L106.60118,602.75848 z"
Fill="{DynamicResource GlyphBrush}"
Stretch="Fill"
Visibility="Collapsed" />
<Rectangle x:Name="FocusedVisualElement"
Opacity="0"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource FocusBrush}"
StrokeThickness="1" />
<Rectangle x:Name="DisabledVisualElement"
Margin="1"
Fill="{DynamicResource DisabledBackgroundBrush}"
RadiusX="0"
RadiusY="0"
Visibility="Collapsed" />
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter x:Name="contentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="FocusedOff_BeginStoryboard"
Storyboard="{StaticResource FocusedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="FocusedOn_BeginStoryboard"
Storyboard="{StaticResource FocusedOn}" />
</Trigger.EnterActions>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True" />
<Condition Property="IsThreeState" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="CheckedOff_BeginStoryboard"
Storyboard="{StaticResource CheckedOff}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard"
Storyboard="{StaticResource CheckedOn}" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="{x:Null}" />
<Condition Property="IsThreeState" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource IndeterminateOn}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource IndeterminateOff}" />
</MultiTrigger.ExitActions>
<Setter TargetName="CheckIcon" Property="Opacity" Value="0" />
</MultiTrigger>
<Trigger Property="IsChecked" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard2"
Storyboard="{StaticResource CheckedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard1"
Storyboard="{StaticResource CheckedOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource PressedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource PressedOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource DisabledOn}" />
</Trigger.EnterActions>
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="CheckBoxFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="15,0,0,0"
Stroke="#60000000"
StrokeDashArray="1 2"
StrokeThickness="1" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
then the CheckBox is no longer readonly... you can check or uncheck it
I dont know is it a bug or what....
Any help in this regrad would be greatful
I am guessing that since you're overwritting the template, the IsReadOnly property isn't getting applied.
Try setting IsReadOnly="{TemplateBinding IsReadOnly}" in your Control Template
I need help with an custom "Image-Button" that i have used for a while. It works great, but i can't figure out how to animate the button with these three states (normal, mouseover, pressed):
Normal to MouseOver
MouseOver to Pressed
Im not that skilled with XAML so I couldn't figure it out. Anyway here's the code i've been using:
<Button Height="40" HorizontalAlignment="Left" IsEnabled="True" IsHitTestVisible="True" Margin="262,219,0,0" Name="home_btn" VerticalAlignment="Top" Width="89">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="Normal" Source="normal.png" />
<Image Name="Hover" Source="hover.png" Visibility="Hidden" />
<Image Name="Pressed" Source="pressed.png" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Setter Property="UIElement.Visibility" TargetName="Normal" Value="Hidden" />
<Setter Property="UIElement.Visibility" TargetName="Pressed" Value="Visible" />
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="UIElement.Visibility" TargetName="Normal" Value="Hidden" />
<Setter Property="UIElement.Visibility" TargetName="Hover" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Any answer is appreciated.
An other way to accomplish animation is to use triggers like you did in combination with Storyboards
Here is some sample code (integrated in your posted code):
<Button Height="40" HorizontalAlignment="Left" IsEnabled="True" IsHitTestVisible="True" Margin="262,219,0,0" Name="home_btn" VerticalAlignment="Top" Width="89">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="Normal" Source="normal.png" />
<Image Name="Hover" Source="hover.png" Opacity="0"/>
<Image Name="Pressed" Source="pressed.png" Opacity="0" />
</Grid>
<ControlTemplate.Resources>
<Storyboard x:Key="MouseDownTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseUpTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseEnterTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseExitTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseEnterTimeLine}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseExitTimeLine}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
You should probably use the VisualStateManager for that sort of thing, see its documentation for a usage example.
I am defining a button style in Buttons.xaml file. Can you please tell me how to set the foreground property of the button? I need to use a gradient as foreground property. Code is as below. Right now i am setting the gradient within the button tag.
<Style x:Key="ButtonCancel" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.68"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard_Copy1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.68"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Image x:Name="image" Source="../images/UnCategorized/Red_Oval_Button_With_Cross.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" Content="CANCEL" RenderTransformOrigin="0.5,0.5">
<ContentPresenter.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="Storyboard_Copy1_BeginStoryboard" Storyboard="{StaticResource Storyboard_Copy1}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Style="{DynamicResource ButtonCancel}" Click="btnCancel_Clicked" FontFamily="Tw Cen MT" FontSize="18" FontWeight="Bold" Width="144" Name="btnCancel"
HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Margin="0,73.5,0,55.5">
<Button.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#9B000000" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Button.OpacityMask>
</Button>
In the style? If so use a setter:
<Style x:Key="ButtonCancel" TargetType="{x:Type Button}">
<Setter Property="Foreground">
<Setter.Value>
<!-- LinearGradientBrush here -->
</Setter.Value>
</Setter>
<!-- ........ -->
</Style>