I want , when mouse enter button , foreground of button's font change to another color
i have this style for my button but Doesn't work Animation
<Style x:Key="StartButton" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{Binding solid1}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" x:Name="Body">
<Grid Name="Figure">
<Grid.Resources>
<SolidColorBrush x:Key="solid1" x:Name="solid2" Color="Black"/>
</Grid.Resources>
.
.
.
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Click">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="solid2"
Storyboard.TargetProperty="Color">
<ColorAnimation From="Black" To="Red"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
thanks.
Instead of
Storyboard.TargetName="solid2"
try
Storyboard.Target="{StaticResource solid1}"
Related
Im trying to create an effect in my tabcontrol when draging over a tab I want to move it x number of pixels to the right creating a sliding effect as I drag over, but I cant seem to get the animation to fire. What am I missing here:
<Style TargetType="{x:Type TabItem}">
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<RotateTransform />
<TranslateTransform />
<SkewTransform />
<ScaleTransform />
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="TabItem.DragEnter" >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(TabItem.RenderTransform).(TranslateTransform.X)"
From="0"
To="50"
Duration="0:0:0.5"
FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
You have set the RenderTransform property to a TransformGroup and you want to animate the X property of the second child of this one so the Storyboard.TargetProperty should be set to RenderTransform.Children[1].X:
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Children[1].X"
From="0"
To="50"
Duration="0:0:0.5"
FillBehavior="Stop"/>
Your current DoubleAnimation should work if you set the RenderTransform property to a TranslateTransform:
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform />
</Setter.Value>
</Setter>
I've tried to recreate a material design kind of button. One of the animations of this button is that upon mouse over is that the color of the button changes to a darker hue of the original color.
In order to realise this for every color, I overlay my button with a rectangle and change it's opacity between 25 % and 0 % depending on mouse over or not. This style is implemented in the style of the rectangle. But it appears that this style is only executed before I click. Once I click the button, this style trigger is not executed anymore.
I've also implemented a animation to change the opacity of the rectangle to 40 % when the button is clicked. this animation however, is still visible after the first click.
I thought that it might be because the rectangle's style is included in the control template. But I don't know how to extract those styles from the control template to the button's style.
<Style x:Key="MaterialFlatButton" TargetType="Button">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle RadiusX="4" RadiusY="4" Fill="#000000" Panel.ZIndex="1" x:Name="Reccie">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Opacity" Value="0"/>
<!--These styles-->
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.26"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="Opacity" Value="0"/>
</Trigger>
<EventTrigger RoutedEvent="MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.4" Duration="0:0:0.25"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.25" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="16 0 16 0" TextBlock.FontFamily="{StaticResource LatoMedium}"
TextBlock.FontSize="{StaticResource FontSizeBody}" Typography.Capitals="AllSmallCaps"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!--Should go here perhaps?-->
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#000000"/>
<Setter Property="Opacity" Value="0.26"/>
</Trigger>
</Style.Triggers>
</Style>
edit: does it do what you want if you set FillBehavior="Stop"?
<EventTrigger RoutedEvent="MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard FillBehavior="Stop">
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.26" To="0.4" Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Here's custom style:
<Style TargetType="{x:Type Button}">
<Setter Property="Focusable" Value="false" />
<Setter Property="Background" Value="{StaticResource AppBackBrush}"/>
<Setter Property="Foreground" Value="{StaticResource AppBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderBrush="{StaticResource AppBrush}"
Name="content"
BorderThickness="1"
CornerRadius="3"
Background="{StaticResource AppBackBrush}"
>
<Grid Background="Transparent">
<Label Content="{TemplateBinding Content}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Grid.Row="0" Grid.Column="0"
Background="Transparent"
Style="{x:Null}"
Foreground="{TemplateBinding Foreground}"
Padding="{TemplateBinding Padding}"/>
</Grid>
<Border.RenderTransform>
<!-- push the content a bit to the left and the top -->
<TranslateTransform x:Name="translation"
X="-1" Y="-1"/>
</Border.RenderTransform>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0"
To="0"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.X)"/>
<DoubleAnimation Duration="0:0:0"
To="0"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.Y)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0"
To="-1"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.X)"/>
<DoubleAnimation Duration="0:0:0"
To="-1"
Storyboard.TargetName="translation"
Storyboard.TargetProperty="(TranslateTransform.Y)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="content" Property="Opacity" Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I save this ResourceDictionary that contains this style to string like this:
XamlWriter.Save(s);
where s is ResourceDictionary. The problem is that when I get expected string, it looks so:
<Style TargetType=\"Button\" x:Key=\"{x:Type Button}\">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property=\"UIElement.Focusable\">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property=\"Panel.Background\">
<Setter.Value>
<SolidColorBrush>#FFF1F2F4</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property=\"TextElement.Foreground\">
<Setter.Value>
<SolidColorBrush>#FF13776A</SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property=\"Control.Template\">
<Setter.Value>
<ControlTemplate TargetType=\"Button\">
<Border BorderThickness=\"1,1,1,1\" CornerRadius=\"3,3,3,3\" BorderBrush=\"#FF13776A\" Background=\"#FFF1F2F4\" Name=\"content\">
<Border.RenderTransform>
<TranslateTransform X=\"-1\" Y=\"-1\" />
</Border.RenderTransform>
<Grid>
<Grid.Style>
<Style TargetType=\"Grid\">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property=\"Panel.Background\">
<Setter.Value>
<SolidColorBrush>#00FFFFFF</SolidColorBrush>
</Setter.Value>
</Setter>
</Style>
</Grid.Style>
<Label Content=\"{TemplateBinding ContentControl.Content}\" Background=\"#00FFFFFF\" Foreground=\"{TemplateBinding TextElement.Foreground}\" HorizontalContentAlignment=\"Center\" VerticalContentAlignment=\"Center\" Padding=\"{TemplateBinding Control.Padding}\" Style=\"{x:Null}\" Grid.Column=\"0\" Grid.Row=\"0\" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property=\"ButtonBase.IsPressed\">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<DoubleAnimation To=\"0\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.X)\" />
<DoubleAnimation To=\"0\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.Y)\" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<Storyboard.Children>
<DoubleAnimation To=\"-1\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.X)\" />
<DoubleAnimation To=\"-1\" Duration=\"00:00:00\" Storyboard.TargetName=\"translation\" Storyboard.TargetProperty=\"(TranslateTransform.Y)\" />
</Storyboard.Children>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<Trigger Property=\"UIElement.IsEnabled\">
<Setter Property=\"UIElement.Opacity\" TargetName=\"content\">
<Setter.Value>
<s:Double>0.5</s:Double>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Please take a look at TranslateTransform in Border.RenderTransform. In the ResourceDictionary it has x:Name="translation", but the name is missing in the output string.
Where was I mistaken or is this a bug? Thanks in advance.
According to this MSDN blog post, "some markup extensions, such as {x:Static}, are resolved at load-time by XamlReader and the markup extension itself is discarded, so there is no means for XamlWriter to re-produce it." It looks like x:Name is one of those markup extensions that is lost.
It looks like you are trying to create two styles - an original and an extended one - that both implicitly target button (presumably in different scopes). If that is the case, you can create a base style in a resource both styles above can reference, then use Style's BasedOn property to keep from duplicating the template.
I have a button with it's control template set to a TextBlock. I want the text to "Glow" when the mouse is over it or it has gained focus by moving to it via the keyboard. I can't seem to get this working as I presume I'm setting the effect in the wrong place. Has anyone done this before that could share the xaml for it. Here is my style so far.
<!--Back Button-->
<Style x:Key="MoviesBackButton"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock Text="Back" Style="{DynamicResource MoviesButtonBackTextBlock}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width"
Value="40" />
<Setter Property="Height"
Value="25" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="Margin"
Value="10,5,0,0" />
</Style>
<Style x:Key="MoviesButtonBackTextBlock"
TargetType="TextBlock">
<Setter Property="Foreground"
Value="{DynamicResource MoviesButtonBackTextBlockForeground}" />
<Setter Property="FontFamily"
Value="Segoe UI Light, Lucida Sans Unicode, Verdana" />
<Setter Property="FontSize"
Value="20" />
<Setter Property="TextOptions.TextHintingMode"
Value="Animated" />
</Style>
<LinearGradientBrush x:Key="MoviesButtonBackTextBlockForeground"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="LightGray"
Offset="0" />
<GradientStop Color="Gray"
Offset="1" />
</LinearGradientBrush>
Here's one solution for mouse-over glow. You can add similar event triggers for Button.GotKeyboardFocus/LostKeyboardFocus.
If I was doing this for real, I would probably create a custom control and use visual states. Search for 'Visual State Manager' for more information.
<Grid>
<Grid.Resources>
<Style x:Key="TextBoxGlow" TargetType="{x:Type Button}">
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Content).(TextBlock.Effect).Opacity" From="0"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Content).(TextBlock.Effect).Opacity" From="1"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<StackPanel>
<Button Style="{StaticResource TextBoxGlow}" Margin="5">
<TextBlock Text="I'm glowing" FontSize="28" Padding="10">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="8" Color="Crimson" ShadowDepth="0" Opacity="0" />
</TextBlock.Effect>
</TextBlock>
</Button>
</StackPanel>
</Grid>
Well i have a custom control and when Visibility is changed to Visible I have a Trigger with a enter/exit action but the problem is that when the exit action fires the Visibility is no longer Visible so the animation can't be seen how would I fix this?
here is my Trigger:
<ControlTemplate.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Hide}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Show}"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
I tried this too and failed. I think it is not possible to accomplish this in a simple ControlTemplate with a Trigger on the Visibility property. What you can do is add an Opacity animation From 1 To 0 to a Trigger for a different property, for instance a DependencyProperty that you add in the code behind yourself.
You could also use ObjectAnimationUsingKeyFrames to set Visibility for animation period.
In such case there is no need in any codebehind.
There is a way to achieve it. Not 100 % pure, but works for me:
Don't use Visibility property, but use Opacity and Tag property.
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border CornerRadius="5"
BorderThickness="2"
BorderBrush="DodgerBlue"
Background="#CC4f9dea" >
<Grid>
<ContentPresenter HorizontalAlignment="Stretch" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch" />
<Button x:Name="btnClose" Opacity="0" Content="X" Style="{StaticResource RoundedButtonStyle}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" TargetName="btnClose" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="15" Background="White" BorderThickness="1" Padding="2" BorderBrush="Black">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Tag" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0" To="0.5" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.5" To="0.0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>