WPF L02-Graphics, Binding and Animation

1. Mohammad Shaker www.mohammadshaker.com WPF Starter Course @ZGTRShaker 2011, 2012, 2013, 2014 WPF Showcase L02 –Graphics, Binding (MVVM) and The Basis of Animation

2. Graphics

3. Graphics

4. Canvas –The Best Thing To Draw In <Windowx: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"> <CanvasBackground="Yellow"> </Canvas> </Window>

5. Panel <Window x:Class="PanelDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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"/> <Ellipse Canvas.Left="60" Canvas.Top="5" Width="100" Height="100" Stroke="Black" Fill="Yellow"/> <Ellipse Canvas.Left="110" Canvas.Top="5" Width="100" Height="100" Stroke="Black" Fill="Green"/> </Canvas> </Window>

6. Panel –From Code Behind private void Window_Loaded(object sender, RoutedEventArgse) { 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); }

7. Ellipse

8. Rectangle

9. Scaling Shapes with a Viewbox <ViewboxGrid.Row="1" HorizontalAlignment="Left" > <Canvas> </Canvas> </Viewbox>

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

11. PolyLine

12. PolyLine •StrokeDashArray="2 1"

13. Bézier Curves

14. Brushes

15. Transparency

16. Transparency

17. BlurEffect <Button Content="Blurred (Radius=2)" Padding="5" Margin="3"> <Button.Effect> <BlurEffectRadius="2"></BlurEffect> </Button.Effect> </Button>

18. Transforming Shapes

19. Transforming Shapes

20. WPF Content Heaven

25. Positioning in Layouts

26. Positioning public MainWindow() { InitializeComponent(); TextBoxt = new TextBox(); t.Text= "Hi"; t.RenderTransform= new TranslateTransform(10, 10); grid.Children.Add(t); }

27. Positioning

28. 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);

29. Positioning –Transforms

30. Ellipse ellipse= new Ellipse { Width = width, Height = height }; ellipse.RenderTransform= new TranslateTransform(desiredX,desiredY); Positioning Ellipse ellipse= new Ellipse { Width = width, Height = height }; ellipse.RenderTransform= new TranslateTransform(desiredX,desiredY); ellipse.RenderTransform= new TranslateTransform(desiredX,desiredY);

31. Ellipse ellipse= new Ellipse { Width = width, Height = height }; ellipse.RenderTransform= new TranslateTransform(desiredX,desiredY); Positioning Ellipse ellipse= new Ellipse { Width = width, Height = height }; ellipse.RenderTransform= new TranslateTransform(desiredX,desiredY); ellipse.RenderTransform= new TranslateTransform(desiredX,desiredY);

32. Routed Events

33. Routed Events Routed events normally appear as pair. The first is a tunnellingevent calledPreviewMouseDownand the second is the bubbling calledMouseDown. They don't stop routing if they reach an event handler. To stop routing then you have to set e.Handled= true;

34. 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.

35. Multi-touch Input

36. Multi-touch Input

37. Visual and Effects

38. Visual and Effects

39. Drag-and-Drop

40. Drag-and-Drop nice task!

41. Drag-and-Drop •With, private void lblTarget_Drop(object sender, DragEventArgse) { ((Label)sender).Content = e.Data.GetData(DataFormats.Text); }

42. Drag-and-Drop

43. Drag-and-Drop Shapes

44. Drag-and-Drop Shapes •Let’s have just a rectangle names “myRectangle”

45. Drag-and-Drop Shapes private boolIsDragging= false; private void Rect_MouseDown(object sender, MouseButtonEventArgse) { Rectangle rectangle= (Rectangle)sender; IsDragging= true; } private void Rect_PreviewMouseMove(object sender, MouseEventArgse) { 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, MouseButtonEventArgse) { if (IsDragging) { Canvas.SetLeft(myRectangle, e.GetPosition(canvas).X -myRectangle.Width/2); Canvas.SetTop(myRectangle, e.GetPosition(canvas).Y -myRectangle.Height/2); IsDragging= false; } }

46. Binding

47. WPF Content HeavenBinding and MVVM

48. MVVMModel-View View-Model

49. 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/

50. Data Binding

51. Data Binding

52. Data Binding

53. Data Binding •Another example

54. Data Binding •Another example

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

56. ListViewTemplate <Windowx:Class="WpfTutorialSamples.ListView_control.ListViewItemTemplateSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ListViewItemTemplateSample"Height="150"Width="350"> <Grid> <ListViewMargin="10"Name="lvDataBinding"> <ListView.ItemTemplate> <DataTemplate> <WrapPanel> <TextBlockText="Name: "/> <TextBlockText="{Binding Name}"FontWeight="Bold"/> <TextBlockText=", "/> <TextBlockText="Age: "/> <TextBlockText="{Binding Age}"FontWeight="Bold"/> <TextBlockText=" ("/> <TextBlockText="{Binding Mail}"TextDecorations="Underline"Foreground="Blue"Cursor="Hand"/> <TextBlockText=")"/> </WrapPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid> </Window> publicclassUser{ publicstringName{get;set;} publicintAge{get;set;} publicstringMail{get;set;} } lvDataBinding.ItemsSource=items;

57. ListViewTemplate <Windowx:Class="WpfTutorialSamples.ListView_control.ListViewGridViewSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ListViewGridViewSample"Height="200"Width="400"> <Grid> <ListViewMargin="10"Name="lvUsers"> <ListView.View> <GridView> <GridViewColumnHeader="Name"Width="120"DisplayMemberBinding="{Binding Name}"/> <GridViewColumnHeader="Age"Width="50"DisplayMemberBinding="{Binding Age}"/> <GridViewColumnHeader="Mail"Width="150"DisplayMemberBinding="{Binding Mail}"/> </GridView> </ListView.View> </ListView> </Grid> </Window>

58. A Complete ExampleFrom Windows Phone Slidehttp://www.slideshare.net/ZGTRZGTR/mobile-software-engineering-crash-course-c06-windowsphone

59. A Complete ExampleBinding, Templates and XML Examplehttp://www.creativebloq.com/mobile/build-your-first-windows-phone-7-app-3122831

60. A Complete ExampleBinding, Templates and XML Example

61. Binding, Templates and XML Example <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinitionHeight="74*" /> <RowDefinitionHeight="533*" /> </Grid.RowDefinitions> <TextBoxGrid.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" /> <ListBoxName="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10"> <ListBox.ItemTemplate> <DataTemplate> <StackPanelOrientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"> <Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="10,10,8,10"/> <TextBlockText="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid>

67. Binding, Templates and XML Example void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgse) { if (e.Error!= null) return; XElementxmlTweets= 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, RoutedEventArgse) { WebClienttwitter = 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)); }

72. Binding, Templates and XML Example <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinitionHeight="74*" /> <RowDefinitionHeight="533*" /> </Grid.RowDefinitions> <TextBoxGrid.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" /> <ListBoxName="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10"> <ListBox.ItemTemplate> <DataTemplate> <StackPanelOrientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"> <Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="10,10,8,10"/> <TextBlockText="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgse) { if (e.Error!= null) return; XElementxmlTweets= 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}; }

73. Animation

74. Animation –The Basis

75. Animation

76. 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>

77. Animation private void CreateRectangleMovementAnimation(Rectangle rectangle) { DoubleAnimationanimation = new DoubleAnimation(150,800,new Duration(TimeSpan.FromSeconds(2))); animation.AutoReverse= true; animation.RepeatBehavior= RepeatBehavior.Forever; TranslateTransformt = new TranslateTransform(); rectangle.RenderTransform.BeginAnimation(TranslateTransform.XProperty, animation); } private void CreateRectangleColorAnimation(Rectangle rectangle) { ColorAnimationanimation = new ColorAnimation(Colors.Red, Colors.Yellow,newDuration(TimeSpan.FromSeconds(1))); animation.AutoReverse= true; animation.RepeatBehavior= RepeatBehavior.Forever; rectangle.Fill.BeginAnimation(SolidColorBrush.ColorProperty, animation); }

78. Animation

WPF L02-Graphics, Binding and Animation

More Related Content

What's hot (11)

Viewers also liked (10)

Similar to WPF L02-Graphics, Binding and Animation (20)

More from Mohammad Shaker (20)

Recently uploaded (20)

WPF L02-Graphics, Binding and Animation