Tuesday, 9 April 2019

WPF - XAML - How to SkewTransform a Video

It is possible to SkewTransform a video to make it look like a special effect from a Hollywood film. I made a video to demonstrate. I also made a quick explanatory video. As promised, here is the source code.

<Window x:Class="BrexitThisIsFine.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BrexitThisIsFine"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Viewbox Stretch="Uniform">
        <StackPanel Grid.Column="0">

            <Canvas ClipToBounds="True"   Width="480" Height="330">
                <MediaElement Canvas.Left="150" Canvas.Top="100" Width="240" Height="150" x:Name="foo" Source="C:\Documents\My Movie.mp4" >
                    <MediaElement.RenderTransform>
                        <SkewTransform x:Name="skew" CenterX="40" CenterY="50"/>
                    </MediaElement.RenderTransform>
                </MediaElement>

                <!-- Animate the video: -->
                <Canvas.Triggers>
                    <EventTrigger RoutedEvent="Canvas.Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever" >
                                <DoubleAnimation Storyboard.TargetName="skew" Storyboard.TargetProperty="AngleX" From="0" To="360" Duration="0:0:50"/>
                                <DoubleAnimation Storyboard.TargetName="skew" Storyboard.TargetProperty="AngleY" From="0" To="360" Duration="0:0:50"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Canvas.Triggers>
            </Canvas>
        </StackPanel>
    </Viewbox>
</Window>