I am pretty new to xaml and wpf in general, so excuse me if the solution is easy or the xaml i used is bad. I am unsure if this is possible, but if there is some kind of solution please let me know!
Here is a video of what i am trying to fix:
https://imgur.com/a/NmnV50S
If the video doesn't explain my problem, here it is: can the button animation not spam or bug when the user moves his cursor very fast across the button?
Here is the xaml for the animation:
<Style x:Key="SlidingButtonToRight" TargetType="Button">
<Setter Property="Width" Value="270"/>
<Setter Property="Height" Value="80"/>
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="ClipToBounds" Value="True"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Button.RenderTransform">
<Setter.Value>
<TranslateTransform/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="0" To="110" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="110" To="0" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<Style x:Key="SlidingButtonToLeft" TargetType="Button" BasedOn="{StaticResource SlidingButtonToRight}">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="0" To="-110" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" From="-110" To="0" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
Here is the xaml for the button on which i use the animation style:
<Button x:Name="button4" Click="Button4_Click" Style="{DynamicResource SlidingButtonToLeft}" Margin="0,50,-186,0" VerticalAlignment="Top" HorizontalAlignment="Right">
<Button.Background>
<ImageBrush ImageSource="Assets/programm-bt.png"/>
</Button.Background>
<TextBlock Text="Programm" TextAlignment="Left" Width="105" Margin="0,0,-25,0" HorizontalAlignment="Center"/>
</Button>
To reduce the animation spam, you can set a BeginTime property on your MouseLeave animation to give the user enough time to move the mouse off the button before the animation starts.
You can start with .2 seconds and tweak from there:
<Storyboard>
<DoubleAnimation
BeginTime="0:0:0.2"
Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
From="-110"
To="0"
Duration="0:0:0.3" />
</Storyboard>
I figured it out, by removing From ,the animation doesn't start from 0 every time the user hovers over the button. Here is a video from before and after the change.
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
To="110"
Duration="0:0:0.2"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
To="0"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
based on this answer i have two questions:
Whats the name of the marked icon?
How can I make it to raotate to the other direction, i.e to spin like:
Itried to add FlowDirection="RightToLeft" like:
<fa:ImageAwesome FlowDirection="RightToLeft" SpinDuration="6" Icon="Cog" Width="200" Height="200" Foreground="White" Spin="True" />
but it still rotate to same direction
this should do the trick for you:
<Viewbox Height="20">
<Path Fill="black" Data="M28,2.202v4.059C37.053,7.706,44,15.547,44,25c0,10.477-8.523,19-19,19S6,35.477,6,25c0-9.442,6.93-17.275,15.966-18.734 V2.206C10.713,3.696,2,13.347,2,25c0,12.682,10.317,23,23,23s23-10.318,23-23C48,13.335,39.269,3.677,28,2.202z" RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<RotateTransform/>
</Path.RenderTransform>
<Path.Style>
<Style>
<Style.Triggers>
<Trigger Property="Image.IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Angle"
From="0"
To="360"
Duration="0:0:1"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</Viewbox>
I want to implement the button expanding animation where when user hovers over the top button, a sneak peak of the other functions each with their own button will be displayed below that top button on which the user hovered initially. I wrote the below XAML to achieve that and it is working as expected.
XAML:
<Button Name="panel" Margin="0,40,0,0">
<Button.Template>
<ControlTemplate x:Name="abc">
<Grid>
<Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<!--Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter>
</-->
<Trigger Property="Margin" Value="0,45,10,0">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-" Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="Margin" Value="0,85,10,0">
<Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="..." Click="Button_Click">
<Button.Template>
<ControlTemplate x:Name="editBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=editButton}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="enterBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Name="exitBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Initial Screenshot:
When the user hovers on the blue button, two additional buttons will drop from behind this blue button. It is difficult to take screenshot for that as those two buttons will be displayed only until the user is hovering on the the blue button. This is exactly my problem.
If the user wants to click on the two additional buttons which come down, the user will have to move the cursor away from the blue button and immediately these two additional buttons will go away and hide behind the blue button and thus escaping the user's click. How can I overcome this?
Is there anyway I can overwrite the Trigger.ExitActions if the user clicks on the blue button instead of hovering on it? Or any other event which I can fire up to disable the ExitActions for a while?
I am trying to create a click event for the blue button and handle the required behaviour in the code behind but if there are any other better approaches, please let me know.
Either use VisualStates one for Normal and another for Expanded state.
Or, use ToggleButton instead of Button , in case of which your code would look like this :
<Button Name="panel" Margin="0,40,10,31">
<Button.Template>
<ControlTemplate x:Name="abc">
<Grid>
<Button Width="150" Name="addButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="+" >
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="addFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Add new task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<!--Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Hidden"></Setter>
</-->
<Trigger Property="Margin" Value="0,45,10,0">
<Setter Property="Visibility" TargetName="addFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="addFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="150" Name="remButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="-">
<Button.Template>
<ControlTemplate x:Name="addBtn" TargetType="Button">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="remFavTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Text="Remove task" Opacity="0" FontSize="14" Width="90" Visibility="Hidden">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="Margin" Value="0,85,10,0">
<Setter Property="Visibility" TargetName="remFavTxtBlock" Value="Visible"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="remFavTxtBlock" Storyboard.TargetProperty="Opacity" From="50" To="0" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<ToggleButton Width="150" Name="editButton" Height="30" Grid.Column="1" VerticalAlignment="Top" FontSize="20" Margin="0,5,10,0" Foreground="White" VerticalContentAlignment="Stretch" Content="...">
<ToggleButton.Template>
<ControlTemplate x:Name="editBtn" TargetType="ToggleButton">
<StackPanel Orientation="Horizontal" >
<TextBlock Name="editTxtBlock" Foreground="LightGray" FontWeight="SemiBold" VerticalAlignment="Center" HorizontalAlignment="Left" Opacity="0" FontSize="14" Width="90">
</TextBlock>
<Grid>
<Ellipse Width="30" Stroke="#00a1f1" Name="btnEllipse"
StrokeThickness="2" Fill="#00a1f1">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Top"/>
<Grid.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="1"/>
</Grid.Effect>
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" TargetName="btnEllipse" Value="28"></Setter>
<Setter Property="Height" TargetName="btnEllipse" Value="28"></Setter>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="editTxtBlock" Storyboard.TargetProperty="Opacity" From="0" To="50" Duration="00:00:00.03"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Visibility" TargetName="editTxtBlock" Value="Hidden"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=editButton}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="enterBoard">
<Storyboard FillBehavior="HoldEnd">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Name="exitBoard">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="remButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,85,10,0" />
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="addButton" Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00.05" Value="0,5,10,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="0,45,10,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
When I put my mouse on 1st image, 2nd image will appear. When I leave my mouse on 1st image, 2nd image will straight away fade off. How to do to make 2nd image to keep on appear for a few second even after l leave off my mouse on the 1st image?
<EventTrigger RoutedEvent="Button.Click" SourceName="P">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource showA}"/>
</EventTrigger.Actions>
</EventTrigger>
<Button Grid.Column="1" Command="{Binding Path=PressC}" CommandParameter="cam" Style="{StaticResource TransparentButton}">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="1" Source="/W;component/Images/1.png" Height="100" />
<Image Name="2" Source="/W;component/Images/2.png" Height="200" Width="100" Margin="50,-33,-50,0" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="imgPressedKeyboard05" Storyboard.TargetProperty="Opacity" From="0" To="2" Duration="0:0:.5" BeginTime="0:0:0"/>
<DoubleAnimation Storyboard.TargetName="imgPressedKeyboard05" Storyboard.TargetProperty="Opacity" From="2" To="0" Duration="0:0:.5" BeginTime="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Setter Property="Panel.ZIndex" Value="999"/>
<Setter TargetName="pressed5" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Use animations instead of a simple Setter. One in the EnterActions to make it visible, one in the ExitActions to hide it after a given time. To animate Visibility you can use an ObjectAnimationUsingKeyFrames.
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid.Background>
<SolidColorBrush x:Name="backgroundBrush" Color="Transparent" Opacity="0.1"/>
</Grid.Background>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
<Setter TargetName="backgroundBrush" Property="Color" Value="Green" />
</DataTrigger>
<Trigger SourceName="grid" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="backgroundBrush"
Storyboard.TargetProperty="Color"
To="White" Duration="0:0:1.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="backgroundBrush"
Storyboard.TargetProperty="Color"
AccelerationRatio="1" Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
Doesn't compile with error 'Cannot find the trigger target 'backgroundBrush'.'
If I remove the DataTrigger it will compile and work. If I change the DataTrigger to use TargetName="grid" Property="Background" it will compile and work (but without the desired opacity).
Where am I going wrong?
While I'm not sure why the brush isn't in the namescope, you can do this by swapping out the brush, and "dotting-down" to the Color property of the background brush in the animations like so:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid.Background>
<SolidColorBrush Color="Transparent" Opacity="0.1"/>
</Grid.Background>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
<Setter TargetName="grid" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Green" Opacity="0.1"/>
</Setter.Value>
</Setter>
</DataTrigger>
<Trigger SourceName="grid" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="grid"
Storyboard.TargetProperty="Background.Color"
To="White" Duration="0:0:1.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="grid"
Storyboard.TargetProperty="Background.Color"
AccelerationRatio="1" Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>