Home .NET Half-Prezi in 10 minutes in .NET and WPF

Half-Prezi in 10 minutes in .NET and WPF

by admin

This will be about creating a program to playback a presentation similar to the Prezi web service, although a similar concept could be seen earlier in PowerPoint 2010 in one of the standard templates.
The difference from the usual slide presentations is the presence of a solid background, like a canvas for the content, where the movement from one area with content to another is done by moving, zooming and rotating.
So, doing something similar in .NET and WPF.Personally, I like VB.NET (probably because of the lack of {…}, which take a whole line in C#).
Need: VisualStudio, Framework 4and a big picture, for example 4800×3800, drawn in Photoshop with some content (you can stick a couple of slides exported from PowerPoint):
Half-Prezi in 10 minutes in .NET and WPF
In VisualStudio, create an empty WPF project and add the following things to the "form" :
ImageBg background image with a stretch under the form, a ScrollViewer component with hidden bars and into it another image Image1 without stretching.

<Grid Name="Grid1"><Image Name="ImageBg" Stretch="Fill"/><ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"><Image Name="Image1" Stretch="None"/></ScrollViewer></Grid>

Set Variables :

'base file pathDim base_dir As String = System.AppDomain.CurrentDomain.BaseDirectory()'translate by movingDim trTranslate As New TranslateTransform'transformation by rotationDim trRotate As New RotateTransform'transformation by scalingDim trScale As New ScaleTransform'step (as if a slide)Dim stp As Integer = 0'number of stepsDim stp_count As Integer = 0'non-linearity function for the motion animationDim ease As New PowerEaseinitial position (scale, angle, coordinates)Dim init_s, init_a As DoubleDim init_x, init_y As Integer'new step parameters (scale, angle, coordinates and move time)Dim new_z(99) As DoubleDim new_a(99) As DoubleDim new_x(99) As DoubleDim new_y(99) As DoubleDim new_t(99) As Double

Making Window_Loaded pre-loaded images:
ImageBg.Source = New BitmapImage(New Uri(base_dir + "bg.jpg"))
Image1.Source = New BitmapImage(New Uri(base_dir + "content.jpg"))

The files bg.jpg with some background (e.g. black) and content.jpg should be put in the Debug folder.
You can also add a transparency mask .png to the content, but that’s unnecessary for now.
There, after loading the image, write the parameters of the transformation :
Dim transf_grp As New TransformGroup
transf_grp.Children.Add(trTranslate)
transf_grp.Children.Add(trRotate)
transf_grp.Children.Add(trScale)
Image1.RenderTransform = transf_grp

I.e., a transformation group is created with three separate transformation types.
Set the initial state of the content, so that the big picture fits into the screen with a small gap (humanly this is done by the Stretch and Margin properties, but in this case you need a transformation):

init_s = Math.Round(Grid1.ActualWidth / (Image1.Source.Width + 50), 2)
init_a = 0
init_x = 50
init_y = (Grid1.ActualHeight - (Image1.Source.Height) * init_s) * 2
trScale.ScaleX = init_s
trScale.ScaleY = init_s
trRotate.Angle = init_a
trTranslate.X = init_x
trTranslate.Y = init_y

Loading step lists from file :
If File.Exists(base_dir + "loc.ini") Then
Dim oRead As System.IO.StreamReader = File.OpenText(base_dir + "loc.ini")
Dim data(99) As String
Dim i As Integer = 0
Do While oRead.Peek > = 0
i += 1
data(i) = oRead.ReadLine()
Dim param() As String = data(i).Split(", ")
new_z(i) = CDbl(param(0))
new_a(i) = CDbl(param(1))
new_x(i) = CDbl(param(2))
new_y(i) = CDbl(param(3))
new_t(i) = CDbl(param(4))
If new_z(i) <> 0 Then stp_count += 1
Loop
oRead.Close()
End If

File structure : each line is a new step and there are 5 parameters (scale, angle, x and y coordinates, travel time) separated by commas
Add processing of movement between steps :
Private Sub NavigationStep()
Dim Z_anim As New DoubleAnimation(trScale.ScaleX, new_z(stp), TimeSpan.FromSeconds(new_t(stp)))
Dim A_anim As New DoubleAnimation(trRotate.Angle, new_a(stp), TimeSpan.FromSeconds(new_t(stp) / 2))
Dim X_anim As New DoubleAnimation(trTranslate.X, new_x(stp), TimeSpan.FromSeconds(new_t(stp)))
Dim Y_anim As New DoubleAnimation(trTranslate.Y, new_y(stp), TimeSpan.FromSeconds(new_t(stp)))
ease.EasingMode = EasingMode.EaseInOut
Z_anim.EasingFunction = ease
A_anim.EasingFunction = ease
X_anim.EasingFunction = ease
Y_anim.EasingFunction = ease
trScale.BeginAnimation(ScaleTransform.ScaleXProperty, Z_anim)
trScale.BeginAnimation(ScaleTransform.ScaleYProperty, Z_anim)
trRotate.BeginAnimation(RotateTransform.AngleProperty, A_anim)
trTranslate.BeginAnimation(TranslateTransform.XProperty, X_anim)
trTranslate.BeginAnimation(TranslateTransform.YProperty, Y_anim)
End Sub

There are just 4 animations for scale, angle and coordinates (of course you could set the variables beforehand to keep the code clean, but that’s almost compact too).
That’s basically all there is to it.
It remains to write the set of steps to the text file loc.ini, for example :
1.5, 0, -70, -40, 1.5
2, -100, -1200, -100, 2
3, 85, 110, -640, 1
4, 35, -735, -1800, 0.5

And activate step switching in code :
Private Sub Image1_MouseUp(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Image1.MouseUp
If Not setup_mode And Not sel_mode Then
If e.GetPosition(Grid1).X < Grid1.ActualWidth / 2 Then
stp -= 1
If stp <= 0 Then stp = stp_count
NavigationStep()
End If
If e.GetPosition(Grid1).X > = Grid1.ActualWidth / 2 Then
stp += 1
If stp = stp_count + 1 Then stp = 1
NavigationStep()
End If
End If
End Sub

If you clicked on the left side of the content image – step back, on the right side – forward.
For normal work, of course, you need the tuning mode with the subsequent saving of new parameters. But I won’t describe it here, you can download the working beta version here To run it you will need Framework 4
You can also improve the program in many ways – add support for vector content (which will bring it closer to Prezi), make project saving, add multi-touch for customization, quick navigation, content canvas change, and more.

You may also like