ScaleTransform On MediaElement

  • Article

I recently put this XAML together -- it shows animating a MediaElement with a ScaleTransform, kind of a cool effect watching the video expand from a tiny circle to full size.

 

<Grid
xmlns="https://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="https://schemas.microsoft.com/winfx/xaml/2005"
Background="Black"
>
<Grid.Storyboards>
<ParallelTimeline >
<SetterTimeline TargetName="myVideo" FillBehavior="HoldEnd"
Path="(MediaElement.RenderTransform).(ScaleTransform.ScaleX)"
>
<DoubleAnimation From=".1" To="1" Duration="0:0:3" FillBehavior="HoldEnd"
AutoReverse="False" BeginTime="0:0:3"/>
</SetterTimeline>
<SetterTimeline TargetName="myVideo" FillBehavior="HoldEnd"
Path="(MediaElement.RenderTransform).(ScaleTransform.ScaleY)" >
<DoubleAnimation From=".1" To="1" Duration="0:0:3" BeginTime="0:0:3" FillBehavior="HoldEnd"
AutoReverse="False"/>
</SetterTimeline>
</ParallelTimeline>
</Grid.Storyboards>
<MediaElement Name="myVideo" Source="C:\WINDOWS\system32\oobe\images\intro.wmv"
Width="450" Height="400" >
<MediaElement.Clip>
<EllipseGeometry Center="300, 150" RadiusX="150" RadiusY="150" />
</MediaElement.Clip>
<MediaElement.RenderTransform>
<ScaleTransform Center="250,200" ScaleX=".1" ScaleY=".1"/>
</MediaElement.RenderTransform>
</MediaElement>
</Grid>