SlideShare una empresa de Scribd logo
1 de 78
Descargar para leer sin conexión
Mohammad Shaker 
www.mohammadshaker.com 
WPF Starter Course 
@ZGTRShaker 
2011, 2012, 2013, 2014 
WPF Showcase 
L02 –Graphics, Binding (MVVM) and The Basis of Animation
Graphics
Graphics
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>
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>
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); 
}
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"></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
Positioning 
public MainWindow() 
{ 
InitializeComponent(); 
TextBoxt = 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
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);
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);
Routed Events
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;
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, DragEventArgse) 
{ 
((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 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; 
} 
}
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 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/
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.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;
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>
A Complete ExampleFrom Windows Phone Slidehttp://www.slideshare.net/ZGTRZGTR/mobile-software-engineering-crash-course-c06-windowsphone
A Complete ExampleBinding, Templates and XML Examplehttp://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> <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>
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>
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>
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>
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>
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>
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)); 
}
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)); 
}
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)); 
}
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)); 
}
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)); 
}
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}; 
}
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) 
{ 
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); 
}
Animation

Más contenido relacionado

La actualidad más candente

Silverlight week2
Silverlight week2Silverlight week2
Silverlight week2
iedotnetug
 

La actualidad más candente (11)

Rethink Frontend Development With Elm
Rethink Frontend Development With ElmRethink Frontend Development With Elm
Rethink Frontend Development With Elm
 
Dynamic HTML Event Model
Dynamic HTML Event ModelDynamic HTML Event Model
Dynamic HTML Event Model
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
O que há de novo no Xamarin.Forms
O que há de novo no Xamarin.FormsO que há de novo no Xamarin.Forms
O que há de novo no Xamarin.Forms
 
Html css
Html cssHtml css
Html css
 
02 getting started building windows runtime apps
02   getting started building windows runtime apps02   getting started building windows runtime apps
02 getting started building windows runtime apps
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
05.Blend Expression, Transformation & Animation
05.Blend Expression, Transformation & Animation05.Blend Expression, Transformation & Animation
05.Blend Expression, Transformation & Animation
 
Html cheatsheet
Html cheatsheetHtml cheatsheet
Html cheatsheet
 
2001: Bridging the Gap between RSS and Java Old School Style
2001: Bridging the Gap between RSS and Java Old School Style2001: Bridging the Gap between RSS and Java Old School Style
2001: Bridging the Gap between RSS and Java Old School Style
 
Silverlight week2
Silverlight week2Silverlight week2
Silverlight week2
 

Destacado

Destacado (10)

Chennai Animation Studio Profile
Chennai Animation Studio ProfileChennai Animation Studio Profile
Chennai Animation Studio Profile
 
Profile
ProfileProfile
Profile
 
Presentacion Journey Animation Studio
Presentacion Journey Animation StudioPresentacion Journey Animation Studio
Presentacion Journey Animation Studio
 
737 Shaker Company Presentation
737 Shaker Company Presentation737 Shaker Company Presentation
737 Shaker Company Presentation
 
3 D animation company
3 D animation company3 D animation company
3 D animation company
 
Keepsake Animation Company Overview
Keepsake Animation Company OverviewKeepsake Animation Company Overview
Keepsake Animation Company Overview
 
Digital Studio College Profile
Digital Studio College ProfileDigital Studio College Profile
Digital Studio College Profile
 
3D Animation Services Company
3D Animation Services Company3D Animation Services Company
3D Animation Services Company
 
Dawn Digital Studios
Dawn Digital StudiosDawn Digital Studios
Dawn Digital Studios
 
[Company Profile] Main Studios Mar 2013
[Company Profile] Main Studios Mar 2013 [Company Profile] Main Studios Mar 2013
[Company Profile] Main Studios Mar 2013
 

Similar a WPF L02-Graphics, Binding and Animation

Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
Varun C M
 
Scala+swing
Scala+swingScala+swing
Scala+swing
perneto
 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J Query
QConLondon2008
 
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdfpragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
Hiroshi Ono
 
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdfpragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
Hiroshi Ono
 
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdfpragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
Hiroshi Ono
 
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdfpragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
Hiroshi Ono
 

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

Java Fx Overview Tech Tour
Java Fx Overview Tech TourJava Fx Overview Tech Tour
Java Fx Overview Tech Tour
 
Async Redux Actions With RxJS - React Rally 2016
Async Redux Actions With RxJS - React Rally 2016Async Redux Actions With RxJS - React Rally 2016
Async Redux Actions With RxJS - React Rally 2016
 
Javascript variables and datatypes
Javascript variables and datatypesJavascript variables and datatypes
Javascript variables and datatypes
 
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
netmind - Primer Contacto con el Desarrollo de Aplicaciones para Windows 8
 
Prototype UI Intro
Prototype UI IntroPrototype UI Intro
Prototype UI Intro
 
CSS3 vs jQuery
CSS3 vs jQueryCSS3 vs jQuery
CSS3 vs jQuery
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQuery
 
Prototype UI
Prototype UIPrototype UI
Prototype UI
 
Scala+swing
Scala+swingScala+swing
Scala+swing
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
 
CSS3 and jQuery
CSS3 and jQueryCSS3 and jQuery
CSS3 and jQuery
 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J Query
 
Idioms in swift 2016 05c
Idioms in swift 2016 05cIdioms in swift 2016 05c
Idioms in swift 2016 05c
 
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdfpragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
 
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdfpragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
 
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdfpragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
 
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdfpragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
pragmaticrealworldscalajfokus2009-1233251076441384-2.pdf
 
Fabric.js @ Falsy Values
Fabric.js @ Falsy ValuesFabric.js @ Falsy Values
Fabric.js @ Falsy Values
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 

Más de Mohammad Shaker

Más de Mohammad Shaker (20)

12 Rules You Should to Know as a Syrian Graduate
12 Rules You Should to Know as a Syrian Graduate12 Rules You Should to Know as a Syrian Graduate
12 Rules You Should to Know as a Syrian Graduate
 
Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]
Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]
Ultra Fast, Cross Genre, Procedural Content Generation in Games [Master Thesis]
 
Interaction Design L06 - Tricks with Psychology
Interaction Design L06 - Tricks with PsychologyInteraction Design L06 - Tricks with Psychology
Interaction Design L06 - Tricks with Psychology
 
Short, Matters, Love - Passioneers Event 2015
Short, Matters, Love -  Passioneers Event 2015Short, Matters, Love -  Passioneers Event 2015
Short, Matters, Love - Passioneers Event 2015
 
Unity L01 - Game Development
Unity L01 - Game DevelopmentUnity L01 - Game Development
Unity L01 - Game Development
 
Android L07 - Touch, Screen and Wearables
Android L07 - Touch, Screen and WearablesAndroid L07 - Touch, Screen and Wearables
Android L07 - Touch, Screen and Wearables
 
Interaction Design L03 - Color
Interaction Design L03 - ColorInteraction Design L03 - Color
Interaction Design L03 - Color
 
Interaction Design L05 - Typography
Interaction Design L05 - TypographyInteraction Design L05 - Typography
Interaction Design L05 - Typography
 
Interaction Design L04 - Materialise and Coupling
Interaction Design L04 - Materialise and CouplingInteraction Design L04 - Materialise and Coupling
Interaction Design L04 - Materialise and Coupling
 
Android L05 - Storage
Android L05 - StorageAndroid L05 - Storage
Android L05 - Storage
 
Android L04 - Notifications and Threading
Android L04 - Notifications and ThreadingAndroid L04 - Notifications and Threading
Android L04 - Notifications and Threading
 
Android L09 - Windows Phone and iOS
Android L09 - Windows Phone and iOSAndroid L09 - Windows Phone and iOS
Android L09 - Windows Phone and iOS
 
Interaction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile ConstraintsInteraction Design L01 - Mobile Constraints
Interaction Design L01 - Mobile Constraints
 
Interaction Design L02 - Pragnanz and Grids
Interaction Design L02 - Pragnanz and GridsInteraction Design L02 - Pragnanz and Grids
Interaction Design L02 - Pragnanz and Grids
 
Android L10 - Stores and Gaming
Android L10 - Stores and GamingAndroid L10 - Stores and Gaming
Android L10 - Stores and Gaming
 
Android L06 - Cloud / Parse
Android L06 - Cloud / ParseAndroid L06 - Cloud / Parse
Android L06 - Cloud / Parse
 
Android L08 - Google Maps and Utilities
Android L08 - Google Maps and UtilitiesAndroid L08 - Google Maps and Utilities
Android L08 - Google Maps and Utilities
 
Android L03 - Styles and Themes
Android L03 - Styles and Themes Android L03 - Styles and Themes
Android L03 - Styles and Themes
 
Android L02 - Activities and Adapters
Android L02 - Activities and AdaptersAndroid L02 - Activities and Adapters
Android L02 - Activities and Adapters
 
Android L01 - Warm Up
Android L01 - Warm UpAndroid L01 - Warm Up
Android L01 - Warm Up
 

Último

%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
masabamasaba
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
masabamasaba
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
masabamasaba
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 

Último (20)

%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
 
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
Harnessing ChatGPT - Elevating Productivity in Today's Agile Environment
Harnessing ChatGPT  - Elevating Productivity in Today's Agile EnvironmentHarnessing ChatGPT  - Elevating Productivity in Today's Agile Environment
Harnessing ChatGPT - Elevating Productivity in Today's Agile Environment
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
tonesoftg
tonesoftgtonesoftg
tonesoftg
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdfPayment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
 

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
  • 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); }
  • 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>
  • 17. BlurEffect <Button Content="Blurred (Radius=2)" Padding="5" Margin="3"> <Button.Effect> <BlurEffectRadius="2"></BlurEffect> </Button.Effect> </Button>
  • 26. Positioning public MainWindow() { InitializeComponent(); TextBoxt = new TextBox(); t.Text= "Hi"; t.RenderTransform= new TranslateTransform(10, 10); grid.Children.Add(t); }
  • 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);
  • 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);
  • 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.
  • 41. Drag-and-Drop •With, private void lblTarget_Drop(object sender, DragEventArgse) { ((Label)sender).Content = e.Data.GetData(DataFormats.Text); }
  • 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; } }
  • 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/
  • 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>
  • 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. 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. 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. 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. 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)); }
  • 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. 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. 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. 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}; }
  • 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); }