Mohammad Shaker 
www.mohammadshaker.com 
WPF Starter Course 
@ZGTRShaker 
2011, 2012, 2013, 2014 
WPF Showcase 
L02 –Graph...
Graphics
Graphics
Canvas –The Best Thing To Draw In 
<Windowx:Class="CanvasDemo.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/...
Panel 
<Window x:Class="PanelDemo.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x=...
Panel –From Code Behind 
private void Window_Loaded(object sender, RoutedEventArgse) 
{ 
Ellipse ellipse= new Ellipse(); 
...
Ellipse
Rectangle
Scaling Shapes with a Viewbox 
<ViewboxGrid.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> 
<BlurEffectRadius="2"></BlurEff...
Transforming Shapes
Transforming Shapes
WPF Content Heaven
WPF Content Heaven
WPF Content Heaven
WPF Content Heaven
WPF Content Heaven
Positioning in Layouts
Positioning 
public MainWindow() 
{ 
InitializeComponent(); 
TextBoxt = new TextBox(); 
t.Text= "Hi"; 
t.RenderTransform= ...
Positioning
Positioning 
Ellipse ellipse= new Ellipse { Width = width, Height = height }; ellipse.RenderTransform= new TranslateTransf...
Positioning –Transforms
Ellipse ellipse= new Ellipse { Width = width, Height = height }; 
ellipse.RenderTransform= new TranslateTransform(desiredX...
Ellipse ellipse= new Ellipse { Width = width, Height = height }; 
ellipse.RenderTransform= new TranslateTransform(desiredX...
Routed Events
Routed Events 
Routed events normally appear as pair. The first is a tunnellingevent calledPreviewMouseDownand the second ...
Routed Events 
•Tunneling 
–The event is raised on the root element and navigates down to the visual tree until it reaches...
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, DragEventArgse) 
{ 
((Label)sender).Content = e.Data.Get...
Drag-and-Drop
Drag-and-Drop Shapes
Drag-and-Drop Shapes 
•Let’s have just a rectangle names “myRectangle”
Drag-and-Drop Shapes 
private boolIsDragging= false; 
private void Rect_MouseDown(object sender, MouseButtonEventArgse) 
{...
Binding
WPF Content HeavenBinding and MVVM
MVVMModel-View View-Model
Visit and know more about http://msdn.microsoft.com/en-us/library/ff648465.aspx 
Prism provides guidance to help you more ...
Data Binding
Data Binding
Data Binding
Data Binding 
•Another example
Data Binding 
•Another example
Steve Jobshad it back in 1997! http://youtu.be/QhhFQ-3w5tE?t=24m(min: 24)
ListViewTemplate 
<Windowx:Class="WpfTutorialSamples.ListView_control.ListViewItemTemplateSample" xmlns="http://schemas.mi...
ListViewTemplate 
<Windowx:Class="WpfTutorialSamples.ListView_control.ListViewGridViewSample" xmlns="http://schemas.micros...
A Complete ExampleFrom Windows Phone Slidehttp://www.slideshare.net/ZGTRZGTR/mobile-software-engineering-crash-course-c06-...
A Complete ExampleBinding, Templates and XML Examplehttp://www.creativebloq.com/mobile/build-your-first-windows-phone-7-ap...
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> <Ro...
Binding, Templates and XML Example 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <Ro...
Binding, Templates and XML Example 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <Ro...
Binding, Templates and XML Example 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <Ro...
Binding, Templates and XML Example 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <Ro...
Binding, Templates and XML Example 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <Ro...
Binding, Templates and XML Example 
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgse)...
Binding, Templates and XML Example 
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgse)...
Binding, Templates and XML Example 
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgse)...
Binding, Templates and XML Example 
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgse)...
Binding, Templates and XML Example 
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgse)...
Binding, Templates and XML Example 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <Ro...
Animation
Animation –The Basis
Animation
Animation 
<Grid Name="grid"> 
<Canvas Name="canvas"> 
<Button Content="Fire Shapes!" Height="23" HorizontalAlignment="Lef...
Animation 
private void CreateRectangleMovementAnimation(Rectangle rectangle) 
{ 
DoubleAnimationanimation = new DoubleAni...
Animation
Upcoming SlideShare
Loading in...5
×

WPF L02-Graphics, Binding and Animation

3,509

Published on

Published in: Software, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,509
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
125
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

WPF L02-Graphics, Binding and Animation

  1. 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. 2. Graphics
  3. 3. Graphics
  4. 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. 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. 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. 7. Ellipse
  8. 8. Rectangle
  9. 9. Scaling Shapes with a Viewbox <ViewboxGrid.Row="1" HorizontalAlignment="Left" > <Canvas> </Canvas> </Viewbox>
  10. 10. Line <Line Stroke="Blue" X1="0" Y1="0" X2="10" Y2="100“ Canvas.Left="5" Canvas.Top="100"> </Line>
  11. 11. PolyLine
  12. 12. PolyLine •StrokeDashArray="2 1"
  13. 13. Bézier Curves
  14. 14. Brushes
  15. 15. Transparency
  16. 16. Transparency
  17. 17. BlurEffect <Button Content="Blurred (Radius=2)" Padding="5" Margin="3"> <Button.Effect> <BlurEffectRadius="2"></BlurEffect> </Button.Effect> </Button>
  18. 18. Transforming Shapes
  19. 19. Transforming Shapes
  20. 20. WPF Content Heaven
  21. 21. WPF Content Heaven
  22. 22. WPF Content Heaven
  23. 23. WPF Content Heaven
  24. 24. WPF Content Heaven
  25. 25. Positioning in Layouts
  26. 26. Positioning public MainWindow() { InitializeComponent(); TextBoxt = new TextBox(); t.Text= "Hi"; t.RenderTransform= new TranslateTransform(10, 10); grid.Children.Add(t); }
  27. 27. Positioning
  28. 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. 29. Positioning –Transforms
  30. 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. 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. 32. Routed Events
  33. 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. 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. 35. Multi-touch Input
  36. 36. Multi-touch Input
  37. 37. Visual and Effects
  38. 38. Visual and Effects
  39. 39. Drag-and-Drop
  40. 40. Drag-and-Drop nice task!
  41. 41. Drag-and-Drop •With, private void lblTarget_Drop(object sender, DragEventArgse) { ((Label)sender).Content = e.Data.GetData(DataFormats.Text); }
  42. 42. Drag-and-Drop
  43. 43. Drag-and-Drop Shapes
  44. 44. Drag-and-Drop Shapes •Let’s have just a rectangle names “myRectangle”
  45. 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. 46. Binding
  47. 47. WPF Content HeavenBinding and MVVM
  48. 48. MVVMModel-View View-Model
  49. 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. 50. Data Binding
  51. 51. Data Binding
  52. 52. Data Binding
  53. 53. Data Binding •Another example
  54. 54. Data Binding •Another example
  55. 55. Steve Jobshad it back in 1997! http://youtu.be/QhhFQ-3w5tE?t=24m(min: 24)
  56. 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. 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. 58. A Complete ExampleFrom Windows Phone Slidehttp://www.slideshare.net/ZGTRZGTR/mobile-software-engineering-crash-course-c06-windowsphone
  59. 59. A Complete ExampleBinding, Templates and XML Examplehttp://www.creativebloq.com/mobile/build-your-first-windows-phone-7-app-3122831
  60. 60. A Complete ExampleBinding, Templates and XML Example
  61. 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>
  62. 62. 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>
  63. 63. 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>
  64. 64. 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>
  65. 65. 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>
  66. 66. 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. 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)); }
  68. 68. 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)); }
  69. 69. 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)); }
  70. 70. 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)); }
  71. 71. 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. 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. 73. Animation
  74. 74. Animation –The Basis
  75. 75. Animation
  76. 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. 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. 78. Animation
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×