Click here to Skip to main content
15,867,834 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hey guys,
in xaml, i use Window.Resources to write a Storyboard triggerd when the mouse is over my image and another when the mouse leave the image.
i need this animation to handle each image i will add to the window but i dont know how to do it. for now, assuming i am adding another image, the animation take the effect only on one image.
i named the storyboards "ScaleImageLargeStoryboard" and "ScaleImageSmallStoryboard". i am adding the code here:
<window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:properties="clr-namespace:EW.Properties"
x:Class="EW.MainWindow"
WindowStyle="None" ResizeMode="NoResize"
ShowInTaskbar="False" AllowsTransparency="True"
removed="Transparent" MouseDown="Window_MouseDown"
WindowStartupLocation="CenterScreen" MouseDoubleClick="Window_MouseDoubleClick">
<border borderbrush="White">
BorderThickness="1.5"
CornerRadius="10" RenderTransformOrigin="0.545,0.488"
Padding="3">
<border.background>
<lineargradientbrush endpoint="0.5,1" startpoint="0.5,0"> <gradientstop color="#FF00F0FF" offset="0.003">
<gradientstop color="#FF2375F3" offset="1">

<stackpanel removed="Transparent">
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="515"
Width="748"
Margin="5.333,5.333,5.333,5" >
<Button x:Name="button"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="135"
Width="182"
Background="{x:Null}"
BorderThickness="1"
Style="{DynamicResource RoundConrner}"
RenderTransformOrigin="0,0" Margin="283,20">
<stackpanel>
<Image Source="Resources/AddAccount.png"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5, 0.5" MouseEnter="Image_MouseEnter">
<Image.RenderTransform>
<scaletransform x:name="ScaleImage" xmlns:x="#unknown">
</Image.RenderTransform>
<Image.Triggers>
<eventtrigger routedevent="UIElement.MouseEnter">
<beginstoryboard>
Storyboard="{DynamicResource ScaleImageLargeStoryboard}"/>

<eventtrigger routedevent="UIElement.MouseLeave">
<beginstoryboard storyboard="{DynamicResource ScaleImageSmallStoryboard}">

</Image.Triggers>
</Image>

</Button>



<window.resources>
<Style TargetType="Button" x:Key="RoundConrner">
<setter property="Background" value="White">
<setter property="TextBlock.TextAlignment" value="Center">
<setter property="Template">
<setter.value>
<controltemplate targettype="Button">
<border cornerradius="80" removed="Transparent">
BorderBrush="White"
BorderThickness="1,1,1,1" Margin="35,15,35,10"
>
<contentpresenter x:name="contentPresenter" xmlns:x="#unknown">
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>




<Style.Triggers>
<trigger property="Image.IsMouseOver" value="True"> <setter property="Image.Effect" value="{DynamicResource MyEffect}">
<setter property="Image.Effect" value="{DynamicResource MyEffect}">
</Style.Triggers>
</Style>
<dropshadoweffect x:key="MyEffect" xmlns:x="#unknown">
ShadowDepth="0.5"
Color="White"
Opacity="100"
BlurRadius="1"/>
<storyboard x:key="ScaleImageLargeStoryboard">
<doubleanimation duration="0:0:0.2" from="1" to="1.45" autoreverse="false">
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleX"/>
<doubleanimation duration="0:0:0.2" from="1" to="1.45" autoreverse="False">
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleY"/>

<storyboard x:key="ScaleImageSmallStoryboard">
<doubleanimation duration="0:0:0.2" from="1.45" to="1" autoreverse="false">
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleX"/>
<doubleanimation duration="0:0:0.2" from="1.45" to="1" autoreverse="False">
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleY"/>





What I have tried:

actually i dont know how to move forward with that issue...
Posted
Updated 22-Mar-16 23:00pm

1 solution

In Your
<Window.Resources>

//Create Two StoryBoard & give them x:key namely ImageEnterKey & otherOne ImageExitKey

</Window.Resources>

then later in code Behind on Your ImageEnterEvent write this code:

C#
this.BeginStoryboard(FindResource("ImageEnterKey ") as Storyboard);


& in code Behind on Your ImageExitEvent write this code:

C#
this.BeginStoryboard(FindResource("ImageExitKey") as Storyboard);
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900