Image Zoom Out and Zoom In xaml code for WPF Application

Geetha.Katneni
Posted by Geetha.Katneni under ASP.NET category on | Points: 40 | Views : 40059
<Window x:Class="myWpfApplication1.Window4"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Choose your Avatar" Height="300" Width="500">
<Grid>
<Grid x:Name="layoutRoot" Margin="0,1,0,-1">
<!--Border in which image is placed-->
<Border BorderThickness="0" BorderBrush="Blue" Width="100" Height="80" RenderTransformOrigin=".5,.5" Margin="19,15,359,166">
<Border.RenderTransform>
<ScaleTransform x:Name="scale"/>
</Border.RenderTransform>

<Border.Triggers>

<!--Image Zooms Out when Mouse Enters the border -->

<EventTrigger RoutedEvent="Border.MouseEnter">
<BeginStoryboard>
<Storyboard Duration="0:0:.5" Storyboard.TargetName="scale">
<DoubleAnimation Storyboard.TargetProperty="ScaleX" To="2"/>
<DoubleAnimation Storyboard.TargetProperty="ScaleY" To="2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>



<EventTrigger RoutedEvent="Border.MouseLeave">
<BeginStoryboard>
<Storyboard Duration="0:0:.5" Storyboard.TargetName="scale">
<DoubleAnimation Storyboard.TargetProperty="ScaleX" To="1"/>
<DoubleAnimation Storyboard.TargetProperty="ScaleY" To="1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<!--Select Image to zoom -->
<Image x:Name="image1" Source="/myWpfApplication1;component/Images/img7.jpeg" Height="84" Width="97" />
</Border>

Comments or Responses

Login to post response