Click here to Skip to main content
15,039,244 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);
   

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