WPF L02-Graphics, Binding and Animation

Mohammad Shakerwww.mohammadshaker.com

WPF Starter Course@ZGTRShaker

2011, 2012, 2013, 2014

WPF ShowcaseL02 – Graphics, Binding (MVVM) and The Basis of Animation

Graphics

Graphics

Canvas – The Best Thing To Draw In<Window x:Class="CanvasDemo.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Canvas Demo"

Height="150"

Width="250">

<Canvas Background="Yellow">

</Canvas>

</Window>

Panel<Window x:Class="PanelDemo.MainWindow"



Title="Panel Demo"

Width="250"

Height="150">

<Canvas Name="MyCanvas">

<Ellipse Canvas.Left="10" Canvas.Top="5"

Width="100" Height="100"

Stroke="Black" Fill="Red"/>



Stroke="Black" Fill="Yellow"/>



Stroke="Black" Fill="Green"/>

</Canvas>

</Window>

Panel – From Code Behindprivate void Window_Loaded(object sender, RoutedEventArgs e)

{

Ellipse ellipse = new Ellipse();

ellipse.Width = 200;

ellipse.Height = 50;

ellipse.Stroke = Brushes.Black;

ellipse.Fill = Brushes.Blue;

MyCanvas.Children.Add(ellipse);

Canvas.SetLeft(ellipse, 10);

Canvas.SetTop(ellipse, 30);

}

Ellipse

Rectangle

Scaling Shapes with a Viewbox

<Viewbox Grid.Row="1" HorizontalAlignment="Left" >

<Canvas>

</Canvas>

</Viewbox>

Line<Line Stroke="Blue" X1="0" Y1="0" X2="10" Y2="100“ Canvas.Left="5" Canvas.Top="100">

</Line>

PolyLine

PolyLine

• StrokeDashArray="2 1"

Bézier Curves

Brushes

Transparency

Transparency

BlurEffect<Button Content="Blurred (Radius=2)" Padding="5" Margin="3">

<Button.Effect>

<BlurEffect Radius="2"></BlurEffect>

</Button.Effect>

</Button>

Transforming Shapes

Transforming Shapes

WPF Content Heaven

WPF Content Heaven

WPF Content Heaven

WPF Content Heaven

WPF Content Heaven

Positioning in Layouts

Positioningpublic MainWindow()

{

InitializeComponent();

TextBox t = new TextBox();

t.Text = "Hi";

t.RenderTransform = new TranslateTransform(10, 10);

grid.Children.Add(t);

}

Positioning

Positioning

Ellipse ellipse = new Ellipse { Width = width, Height = height };

ellipse.RenderTransform = new TranslateTransform(desiredX,desiredY);

Ellipse ellipse = new Ellipse { Width = width, Height = height };double left = desiredX;double top = desiredY;ellipse.Margin = new Thickness(left, top, 0, 0);

Ellipse ellipse = new Ellipse { Width = width, Height = height };canvas.SetLeft(ellipse, desiredX);canvas.SetTop(ellipse, desiredY);

Positioning – Transforms



Positioning






Positioning




Routed Events

Routed Events

Routed events normally appear as pair. The first is a

tunnelling event called PreviewMouseDown and

the second is the bubbling called MouseDown.

They don't stop routing if they reach an event

handler. To stop routing then you have to set

e.Handled = true;

Routed Events

• Tunneling– The event is raised on the root element and navigates down to the visual tree until it reaches

the source element or until the tunneling is stopped by marking the event as handeld. By naming convention it is calledPreview... and appears before corresponding bubbling event.

• Bubbling– The event is raised on the source element and navigates up to the visual tree until it reaches

the root element or until the bubbling is stopped by marking the event as handled. The bubbling event is raised after the tunneling event.

• Direct– The event is raised on the source element and must be handled on the source element itself.

This behavior is the same as normal.NET events.

Multi-touch Input

Multi-touch Input

Visual and Effects

Visual and Effects

Drag-and-Drop

Drag-and-Drop nice task!

Drag-and-Drop

• With,

private void lblTarget_Drop(object sender, DragEventArgs e){

((Label)sender).Content = e.Data.GetData(DataFormats.Text);}

Drag-and-Drop

Drag-and-Drop Shapes

Drag-and-Drop Shapes

• Let’s have just a rectangle names “myRectangle”

Drag-and-Drop Shapesprivate bool IsDragging = false;private void Rect_MouseDown(object sender, MouseButtonEventArgs e){

Rectangle rectangle = (Rectangle)sender;IsDragging = true;

}

private void Rect_PreviewMouseMove(object sender, MouseEventArgs e){

if (IsDragging){

Canvas.SetLeft(myRectangle, e.GetPosition(canvas).X - myRectangle.Width/2);Canvas.SetTop(myRectangle, e.GetPosition(canvas).Y - myRectangle.Height/2);

}}

private void Rect_PreviewMouseUp(object sender, MouseButtonEventArgs e){

if (IsDragging){

Canvas.SetLeft(myRectangle, e.GetPosition(canvas).X - myRectangle.Width/2);Canvas.SetTop(myRectangle, e.GetPosition(canvas).Y - myRectangle.Height/2);

IsDragging = false;}

}

Binding

WPF Content HeavenBinding and MVVM

MVVM

Model-View View-Model

Visit and know more about http://msdn.microsoft.com/en-us/library/ff648465.aspx

Prism provides guidance to help you more easily design and build, flexible, and easy-to-maintain client business apps that run on Windows Runtime, Windows Presentation Foundation (WPF) desktop, Silverlight, or Windows Phone 7. These

apps may start small and evolve over time.

Visit also: http://compositewpf.codeplex.com/

http://msdn.microsoft.com/en-us/library/ff648465.aspx

http://compositewpf.codeplex.com/

Data Binding

Data Binding

Data Binding

Data Binding

• Another example

Data Binding

• Another example

Steve Jobs had it back in 1997!http://youtu.be/QhhFQ-3w5tE?t=24m (min: 24)

http://youtu.be/QhhFQ-3w5tE?t=24m

ListView Template

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewItemTemplateSample"



Title="ListViewItemTemplateSample" Height="150" Width="350">

<Grid>

<ListView Margin="10" Name="lvDataBinding">

<ListView.ItemTemplate>

<DataTemplate>

<WrapPanel>

<TextBlock Text="Name: " />

<TextBlock Text="{Binding Name}" FontWeight="Bold" />

<TextBlock Text=", " />

<TextBlock Text="Age: " />

<TextBlock Text="{Binding Age}" FontWeight="Bold" />

<TextBlock Text=" (" />

<TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />

<TextBlock Text=")" />

</WrapPanel>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

</Window>

public class User{

public string Name { get; set; }

public int Age { get; set; }

public string Mail { get; set; }

}

lvDataBinding.ItemsSource = items;

ListView Template

<Window x:Class="WpfTutorialSamples.ListView_control.ListViewGridViewSample"



Title="ListViewGridViewSample" Height="200" Width="400">

<Grid>

<ListView Margin="10" Name="lvUsers">

<ListView.View>

<GridView>

<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />

<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />

<GridViewColumn Header="Mail" Width="150" DisplayMemberBinding="{Binding Mail}" />

</GridView>

</ListView.View>

</ListView>

</Grid>

</Window>

A Complete ExampleFrom Windows Phone Slide

http://www.slideshare.net/ZGTRZGTR/mobile-software-engineering-crash-course-c06-windowsphone

http://www.slideshare.net/ZGTRZGTR/mobile-software-engineering-crash-course-c06-windowsphone

A Complete ExampleBinding, Templates and XML Example

http://www.creativebloq.com/mobile/build-your-first-windows-phone-7-app-3122831

http://www.creativebloq.com/mobile/build-your-first-windows-phone-7-app-3122831

A Complete ExampleBinding, Templates and XML Example

Binding, Templates and XML Example

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><Grid.RowDefinitions>

<RowDefinition Height="74*" /><RowDefinition Height="533*" />

</Grid.RowDefinitions><TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0"

Name="txtUserName" VerticalAlignment="Top" Width="294" /><Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"

Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" /><ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">

<ListBox.ItemTemplate><DataTemplate>

<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"><Image Source="{Binding ImageSource}" Height="73" Width="73"

VerticalAlignment="Top" Margin="10,10,8,10"/><TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" />

</StackPanel></DataTemplate>

</ListBox.ItemTemplate></ListBox>

</Grid>












</Grid>












</Grid>












</Grid>












</Grid>












</Grid>


void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

{

if (e.Error != null) return;

XElement xmlTweets = XElement.Parse(e.Result);

lstTwitter.ItemsSource =

from tweet in xmlTweets.Descendants("status")

select new TwitterItem { ImageSource = tweet.Element("user").Element("profile_image_url").Value, Message=tweet.Element("text").Value};

}

private void button2_Click(object sender, RoutedEventArgs e)

{

WebClient twitter = new WebClient();

// Handle downloaded data when finished

twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);

// Set the site

twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + textBox1.Text));

}



{






}


{




// Set the site


}



{






}


{




// Set the site


}



{






}


{




// Set the site


}



{






}


{




// Set the site


}












</Grid>


{






}

Animation

Animation – The Basis

Animation

Animation<Grid Name="grid">

<Canvas Name="canvas">

<Button Content="Fire Shapes!" Height="23" HorizontalAlignment="Left"

Margin="12,12,0,0" Name="buttonFireShapes" VerticalAlignment="Top"

Width="75" Click="buttonFireShapes_Click" />

</Canvas>

</Grid>

Animation

private void CreateRectangleMovementAnimation(Rectangle rectangle){

DoubleAnimation animation = new DoubleAnimation(150,800,new Duration(TimeSpan.FromSeconds(2)));animation.AutoReverse = true;animation.RepeatBehavior = RepeatBehavior.Forever;TranslateTransform t = new TranslateTransform();rectangle.RenderTransform.BeginAnimation(TranslateTransform.XProperty, animation);

}

private void CreateRectangleColorAnimation(Rectangle rectangle){

ColorAnimation animation = new ColorAnimation(Colors.Red, Colors.Yellow,newDuration(TimeSpan.FromSeconds(1)));

animation.AutoReverse = true;animation.RepeatBehavior = RepeatBehavior.Forever;rectangle.Fill.BeginAnimation(SolidColorBrush.ColorProperty, animation);

}

Animation

Software

WPF L02-Graphics, Binding and Animation