Every time I hover on the button, the background blinks then animates/goes to the color I chose, like this:
this is my style:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bg" Background="Transparent" SnapsToDevicePixels="True">
<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.25" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" To="#1E1E1E"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.25" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" To="Transparent"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Nevermind, I found out the solution, setting it to Transparent causes it, so I replaced it with "#00000000" which is transparent (its basically the color's opacity to 0)
Related
I'm new to WPF. I want to change button text and color on MouseEnter.
Here is my codes in order to change the color:
<Style x:Key="btnClose" TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button" x:Name="btnClose">
<Border Name="btnCloseBorder" CornerRadius="7" Background="Red" BorderBrush="#ccc" BorderThickness="0,1,1,0" >
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Button.Content">
<Setter.Value>
<ContentElement ???/>
</Setter.Value>
</Setter>
</Trigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="Red" To="#FF7F7F" Duration="0:0:0.5" Storyboard.TargetName="btnCloseBorder" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="#FF7F7F" To="Red" Duration="0:0:0.5" Storyboard.TargetName="btnCloseBorder" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Style="{StaticResource btnClose}" Name="btnClose" Content="" HorizontalAlignment="Left" Margin="274,0,0,0" VerticalAlignment="Top" Width="18" Height="21"/>
It works like a charm. But I couldn't change the text.
I guest it should be after ColorAnimation tag. But I dont know what tag should be used.
How can I change button text in MouseEnter and MouseLeave?
I found my answer. I simply removed Content in Button tag and changed Style like below:
<Style x:Key="btnClose" TargetType="{x:Type Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button" x:Name="btnClose">
<Border Name="btnCloseBorder" CornerRadius="7" Background="Red" BorderBrush="#ccc" BorderThickness="0,1,1,0" >
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Button.Content" Value="Your Text">
</Setter>
</Trigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard >
<ColorAnimation From="Red" To="#FF7F7F" Duration="0:0:0" Storyboard.TargetName="btnCloseBorder" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="#FF7F7F" To="Red" Duration="0:0:0.5" Storyboard.TargetName="btnCloseBorder" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property = "Foreground" Value="White"/>
<Setter Property = "Button.Content" Value="Some new text..."/>
</Trigger>
</Style.Triggers>
</Style>
<Button Style="{StaticResource btnClose}" Name="btnClose" HorizontalAlignment="Left" Margin="274,0,0,0" VerticalAlignment="Top" Width="18" Height="21"/>
I hope it will be useful.
You don't need to explicitly create a ContentControl. You can set Button.Content to any object you want. If the object is not a UIElement, an implicit TextBlock will be created and it's Text set to Value.ToString(). If it is a UIElement, it's OnRender method will be used to render it.
So in your case, you can simply set the setter value to a string.
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Button.Content" Value="Your Text">
</Setter>
</Trigger>
Note that this trigger will automatically revert back to the previous value when IsMouseOver becomes false.
<Button x:Name="ListItem_Button_Play" VerticalAlignment="Center"
Style="{StaticResource PlayButtonStyle}" Foreground="{x:Null}">
<Image Source="Resources/ListItem_Button_Play.png"/>
</Button>
I have a Button in my DataTemplate. I applied a Style to it to remove the default hover effect. Also, to make it grow bigger when mouse pointer enter the hover area.
<Style x:Key="PlayButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border"
Width="{Binding Path=ActualHeight, ElementName=border}"
BorderThickness="0"
CornerRadius="{Binding Path=ActualHeight, ElementName=border}"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
<DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
<DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
I successfully changed the Border shape of the Button to follow the Image (ellipse). But not the hover area.
After some experiments, i can conclude that although the shape of the Border has changed, the shape of hover area are still the same. The red area above is the hover area.
Is there a way to change the Hover Area shape just like the "Play" Image ??
Avoid things like the Height/Width bindings you have whose path is itself. RelativeSource if you need, but in this case none of that should be necessary. Besides, you already have two Setter's halfway down with your Height and Width hard set already...
I made a few minor tweaks but this should sort you out and tests fine on my end.
<Style x:Key="PlayButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background" Value="Purple"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border"
CornerRadius="50"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
<DoubleAnimation From="93" To="103" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Height" Duration="0:0:0.2"/>
<DoubleAnimation From="103" To="93" Storyboard.TargetProperty="Width" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
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 want the WPF button behaves in a way on mouse over only i want to show content of button (its an image)
and also on mouseover i want the background as transparent + no border .
Button content is an image and i am giving a padding of 50 px . so mouse is anywhere near to 50px on button i can see the button content.
The xaml i used is
<Button Style="{StaticResource FadeOutButton}" Padding="50" Opacity="0" >
<Image Source="Images\myimage.JPG"></Image>
and
<Style x:Key="FadeOutButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<EventTrigger RoutedEvent="Control.MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Control.MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
What else i have to add to make the background transparent on mouseover in addition to current effect
Try this
<Window.Resources>
<Style x:Key="FadeOutButton" TargetType="{x:Type Button}">
<Style.Resources>
<Storyboard x:Key="MouseOverAnimation" >
<DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
<Storyboard x:Key="MouseOutAnimation">
<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Transparent" >
<ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" Content="{TemplateBinding Content}" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent"/>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Button Style="{StaticResource FadeOutButton}" Padding="50" Opacity="0" >
<Image Source="Screenshot_3.png"></Image>
</Button>
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>