Hi All,
I am facing some issues when writing a xaml and my code goes as follows :-
<Grid>
<Grid.Resources>
<!-- Shared Storyboard across the system -->
<!-- This storyboard will make the image (button) grow to double its size in 0.2 seconds -->
<Storyboard x:Key="expandStoryboard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="2.5" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="2.5" Duration="0:0:0.2" />
<Int32Animation Storyboard.TargetName="myImage" Duration="00:00:0.2" Storyboard.TargetProperty="(Panel.ZIndex)" From="998" To="999"/>
</Storyboard>
<!-- This storyboard will make the image revert to its original size -->
<Storyboard x:Key="shrinkStoryboard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2" />
</Storyboard>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Height="50" Width="50" Panel.ZIndex="999">
<Image x:Name="myImage" RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/New.png">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
</Image>
</Button>
<Button Grid.Column="1" Height="50" Width="50" Panel.ZIndex="999">
<Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/open.jpg">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
</Image>
</Button>
<Button Grid.Column="2" Height="50" Width="50" Panel.ZIndex="999">
<Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/Diary.png">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
</Image>
</Button>
<Button Grid.Column="3" Height="50" Width="50" Panel.ZIndex="999">
<Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/workstation.gif">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
</Image>
</Button>
<Button Grid.Column="4" Height="50" Width="50" Panel.ZIndex="999">
<Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/Settings.png">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
</Image>
</Button>
<Button Grid.Column="5" Height="50" Width="50" Panel.ZIndex="999">
<Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/Refresh.png">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
</Image>
</Button>
</Grid>
The issue is when I mouse over an image, it goes back to the adjacent border/image.
Could anyone please help me with the same ?
Thank you very much in advance :)