Date post: | 14-May-2015 |
Category: |
Software |
Upload: | mohammad-shaker |
View: | 2,659 times |
Download: | 5 times |
Mohammad Shakerwww.mohammadshaker.com
WPF Starter Course@ZGTRShaker
2011, 2012, 2013, 2014
WPF ShowcaseL02 – Graphics, Binding (MVVM) and The Basis of Animation
Graphics
Graphics
Canvas – The Best Thing To Draw In<Window x:Class="CanvasDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Canvas Demo"
Height="150"
Width="250">
<Canvas Background="Yellow">
</Canvas>
</Window>
Panel<Window x:Class="PanelDemo.MainWindow"
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 Behindprivate void Window_Loaded(object sender, RoutedEventArgs e)
{
Ellipse ellipse = new Ellipse();
ellipse.Width = 200;
ellipse.Height = 50;
ellipse.Stroke = Brushes.Black;
ellipse.Fill = Brushes.Blue;
MyCanvas.Children.Add(ellipse);
Canvas.SetLeft(ellipse, 10);
Canvas.SetTop(ellipse, 30);
}
Ellipse
Rectangle
Scaling Shapes with a Viewbox
<Viewbox Grid.Row="1" HorizontalAlignment="Left" >
<Canvas>
</Canvas>
</Viewbox>
Line<Line Stroke="Blue" X1="0" Y1="0" X2="10" Y2="100“ Canvas.Left="5" Canvas.Top="100">
</Line>
PolyLine
PolyLine
• StrokeDashArray="2 1"
Bézier Curves
Brushes
Transparency
Transparency
BlurEffect<Button Content="Blurred (Radius=2)" Padding="5" Margin="3">
<Button.Effect>
<BlurEffect Radius="2"></BlurEffect>
</Button.Effect>
</Button>
Transforming Shapes
Transforming Shapes
WPF Content Heaven
WPF Content Heaven
WPF Content Heaven
WPF Content Heaven
WPF Content Heaven
Positioning in Layouts
Positioningpublic MainWindow()
{
InitializeComponent();
TextBox t = new TextBox();
t.Text = "Hi";
t.RenderTransform = new TranslateTransform(10, 10);
grid.Children.Add(t);
}
Positioning
Positioning
Ellipse ellipse = new Ellipse { Width = width, Height = height };
ellipse.RenderTransform = new TranslateTransform(desiredX,desiredY);
Ellipse ellipse = new Ellipse { Width = width, Height = height };double left = desiredX;double top = desiredY;ellipse.Margin = new Thickness(left, top, 0, 0);
Ellipse ellipse = new Ellipse { Width = width, Height = height };canvas.SetLeft(ellipse, desiredX);canvas.SetTop(ellipse, desiredY);
Positioning – Transforms
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
tunnelling event called PreviewMouseDown and
the second is the bubbling called MouseDown.
They don't stop routing if they reach an event
handler. To stop routing then you have to set
e.Handled = true;
Routed Events
• Tunneling– The event is raised on the root element and navigates down to the visual tree until it reaches
the source element or until the tunneling is stopped by marking the event as handeld. By naming convention it is calledPreview... and appears before corresponding bubbling event.
• Bubbling– The event is raised on the source element and navigates up to the visual tree until it reaches
the root element or until the bubbling is stopped by marking the event as handled. The bubbling event is raised after the tunneling event.
• Direct– The event is raised on the source element and must be handled on the source element itself.
This behavior is the same as normal.NET events.
Multi-touch Input
Multi-touch Input
Visual and Effects
Visual and Effects
Drag-and-Drop
Drag-and-Drop nice task!
Drag-and-Drop
• With,
private void lblTarget_Drop(object sender, DragEventArgs e){
((Label)sender).Content = e.Data.GetData(DataFormats.Text);}
Drag-and-Drop
Drag-and-Drop Shapes
Drag-and-Drop Shapes
• Let’s have just a rectangle names “myRectangle”
Drag-and-Drop Shapesprivate bool IsDragging = false;private void Rect_MouseDown(object sender, MouseButtonEventArgs e){
Rectangle rectangle = (Rectangle)sender;IsDragging = true;
}
private void Rect_PreviewMouseMove(object sender, MouseEventArgs e){
if (IsDragging){
Canvas.SetLeft(myRectangle, e.GetPosition(canvas).X - myRectangle.Width/2);Canvas.SetTop(myRectangle, e.GetPosition(canvas).Y - myRectangle.Height/2);
}}
private void Rect_PreviewMouseUp(object sender, MouseButtonEventArgs e){
if (IsDragging){
Canvas.SetLeft(myRectangle, e.GetPosition(canvas).X - myRectangle.Width/2);Canvas.SetTop(myRectangle, e.GetPosition(canvas).Y - myRectangle.Height/2);
IsDragging = false;}
}
Binding
WPF Content HeavenBinding and MVVM
MVVM
Model-View View-Model
Visit and know more about http://msdn.microsoft.com/en-us/library/ff648465.aspx
Prism provides guidance to help you more easily design and build, flexible, and easy-to-maintain client business apps that run on Windows Runtime, Windows Presentation Foundation (WPF) desktop, Silverlight, or Windows Phone 7. These
apps may start small and evolve over time.
Visit also: http://compositewpf.codeplex.com/
Data Binding
Data Binding
Data Binding
Data Binding
• Another example
Data Binding
• Another example
Steve Jobs had it back in 1997!http://youtu.be/QhhFQ-3w5tE?t=24m (min: 24)
ListView Template
<Window x: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>
<ListView Margin="10" Name="lvDataBinding">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="Name: " />
<TextBlock Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Text=", " />
<TextBlock Text="Age: " />
<TextBlock Text="{Binding Age}" FontWeight="Bold" />
<TextBlock Text=" (" />
<TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
<TextBlock Text=")" />
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Window>
public class User{
public string Name { get; set; }
public int Age { get; set; }
public string Mail { get; set; }
}
lvDataBinding.ItemsSource = items;
ListView Template
<Window x:Class="WpfTutorialSamples.ListView_control.ListViewGridViewSample"
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>
<ListView Margin="10" Name="lvUsers">
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
<GridViewColumn Header="Mail" Width="150" DisplayMemberBinding="{Binding Mail}" />
</GridView>
</ListView.View>
</ListView>
</Grid>
</Window>
A Complete ExampleFrom Windows Phone Slide
http://www.slideshare.net/ZGTRZGTR/mobile-software-engineering-crash-course-c06-windowsphone
A Complete ExampleBinding, Templates and XML Example
http://www.creativebloq.com/mobile/build-your-first-windows-phone-7-app-3122831
A Complete ExampleBinding, Templates and XML Example
Binding, Templates and XML Example
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><Grid.RowDefinitions>
<RowDefinition Height="74*" /><RowDefinition Height="533*" />
</Grid.RowDefinitions><TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0"
Name="txtUserName" VerticalAlignment="Top" Width="294" /><Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"
Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" /><ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
<ListBox.ItemTemplate><DataTemplate>
<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"><Image Source="{Binding ImageSource}" Height="73" Width="73"
VerticalAlignment="Top" Margin="10,10,8,10"/><TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" />
</StackPanel></DataTemplate>
</ListBox.ItemTemplate></ListBox>
</Grid>
Binding, Templates and XML Example
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><Grid.RowDefinitions>
<RowDefinition Height="74*" /><RowDefinition Height="533*" />
</Grid.RowDefinitions><TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0"
Name="txtUserName" VerticalAlignment="Top" Width="294" /><Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"
Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" /><ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
<ListBox.ItemTemplate><DataTemplate>
<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"><Image Source="{Binding ImageSource}" Height="73" Width="73"
VerticalAlignment="Top" Margin="10,10,8,10"/><TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" />
</StackPanel></DataTemplate>
</ListBox.ItemTemplate></ListBox>
</Grid>
Binding, Templates and XML Example
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><Grid.RowDefinitions>
<RowDefinition Height="74*" /><RowDefinition Height="533*" />
</Grid.RowDefinitions><TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0"
Name="txtUserName" VerticalAlignment="Top" Width="294" /><Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"
Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" /><ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
<ListBox.ItemTemplate><DataTemplate>
<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"><Image Source="{Binding ImageSource}" Height="73" Width="73"
VerticalAlignment="Top" Margin="10,10,8,10"/><TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" />
</StackPanel></DataTemplate>
</ListBox.ItemTemplate></ListBox>
</Grid>
Binding, Templates and XML Example
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><Grid.RowDefinitions>
<RowDefinition Height="74*" /><RowDefinition Height="533*" />
</Grid.RowDefinitions><TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0"
Name="txtUserName" VerticalAlignment="Top" Width="294" /><Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"
Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" /><ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
<ListBox.ItemTemplate><DataTemplate>
<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"><Image Source="{Binding ImageSource}" Height="73" Width="73"
VerticalAlignment="Top" Margin="10,10,8,10"/><TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" />
</StackPanel></DataTemplate>
</ListBox.ItemTemplate></ListBox>
</Grid>
Binding, Templates and XML Example
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><Grid.RowDefinitions>
<RowDefinition Height="74*" /><RowDefinition Height="533*" />
</Grid.RowDefinitions><TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0"
Name="txtUserName" VerticalAlignment="Top" Width="294" /><Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"
Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" /><ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
<ListBox.ItemTemplate><DataTemplate>
<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"><Image Source="{Binding ImageSource}" Height="73" Width="73"
VerticalAlignment="Top" Margin="10,10,8,10"/><TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" />
</StackPanel></DataTemplate>
</ListBox.ItemTemplate></ListBox>
</Grid>
Binding, Templates and XML Example
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><Grid.RowDefinitions>
<RowDefinition Height="74*" /><RowDefinition Height="533*" />
</Grid.RowDefinitions><TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0"
Name="txtUserName" VerticalAlignment="Top" Width="294" /><Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"
Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" /><ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
<ListBox.ItemTemplate><DataTemplate>
<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"><Image Source="{Binding ImageSource}" Height="73" Width="73"
VerticalAlignment="Top" Margin="10,10,8,10"/><TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" />
</StackPanel></DataTemplate>
</ListBox.ItemTemplate></ListBox>
</Grid>
Binding, Templates and XML Example
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null) return;
XElement xmlTweets = XElement.Parse(e.Result);
lstTwitter.ItemsSource =
from tweet in xmlTweets.Descendants("status")
select new TwitterItem { ImageSource = tweet.Element("user").Element("profile_image_url").Value, Message=tweet.Element("text").Value};
}
private void button2_Click(object sender, RoutedEventArgs e)
{
WebClient twitter = new WebClient();
// Handle downloaded data when finished
twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
// Set the site
twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + textBox1.Text));
}
Binding, Templates and XML Example
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null) return;
XElement xmlTweets = XElement.Parse(e.Result);
lstTwitter.ItemsSource =
from tweet in xmlTweets.Descendants("status")
select new TwitterItem { ImageSource = tweet.Element("user").Element("profile_image_url").Value, Message=tweet.Element("text").Value};
}
private void button2_Click(object sender, RoutedEventArgs e)
{
WebClient twitter = new WebClient();
// Handle downloaded data when finished
twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
// Set the site
twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + textBox1.Text));
}
Binding, Templates and XML Example
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null) return;
XElement xmlTweets = XElement.Parse(e.Result);
lstTwitter.ItemsSource =
from tweet in xmlTweets.Descendants("status")
select new TwitterItem { ImageSource = tweet.Element("user").Element("profile_image_url").Value, Message=tweet.Element("text").Value};
}
private void button2_Click(object sender, RoutedEventArgs e)
{
WebClient twitter = new WebClient();
// Handle downloaded data when finished
twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
// Set the site
twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + textBox1.Text));
}
Binding, Templates and XML Example
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null) return;
XElement xmlTweets = XElement.Parse(e.Result);
lstTwitter.ItemsSource =
from tweet in xmlTweets.Descendants("status")
select new TwitterItem { ImageSource = tweet.Element("user").Element("profile_image_url").Value, Message=tweet.Element("text").Value};
}
private void button2_Click(object sender, RoutedEventArgs e)
{
WebClient twitter = new WebClient();
// Handle downloaded data when finished
twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
// Set the site
twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + textBox1.Text));
}
Binding, Templates and XML Example
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null) return;
XElement xmlTweets = XElement.Parse(e.Result);
lstTwitter.ItemsSource =
from tweet in xmlTweets.Descendants("status")
select new TwitterItem { ImageSource = tweet.Element("user").Element("profile_image_url").Value, Message=tweet.Element("text").Value};
}
private void button2_Click(object sender, RoutedEventArgs e)
{
WebClient twitter = new WebClient();
// Handle downloaded data when finished
twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
// Set the site
twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + textBox1.Text));
}
Binding, Templates and XML Example
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><Grid.RowDefinitions>
<RowDefinition Height="74*" /><RowDefinition Height="533*" />
</Grid.RowDefinitions><TextBox Grid.RowSpan="2" Height="72" HorizontalAlignment="Left" Margin="9,8,0,0"
Name="txtUserName" VerticalAlignment="Top" Width="294" /><Button Content="Lookup" Grid.RowSpan="2" Height="72" HorizontalAlignment="Left"
Margin="296,8,0,0" Name="btnLookupUser" VerticalAlignment="Top" Width="160" Click="btnLookupUser_Click" /><ListBox Name="lstTwitter" Grid.Row="1" Margin="10, 10, 10, 10">
<ListBox.ItemTemplate><DataTemplate>
<StackPanel Orientation="Horizontal" Height="110" Margin="-10,-10,-10,-10"><Image Source="{Binding ImageSource}" Height="73" Width="73"
VerticalAlignment="Top" Margin="10,10,8,10"/><TextBlock Text="{Binding Message}" Margin="10" TextWrapping="Wrap" FontSize="18" Width="350" />
</StackPanel></DataTemplate>
</ListBox.ItemTemplate></ListBox>
</Grid>
void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error != null) return;
XElement xmlTweets = XElement.Parse(e.Result);
lstTwitter.ItemsSource =
from tweet in xmlTweets.Descendants("status")
select new TwitterItem { ImageSource = tweet.Element("user").Element("profile_image_url").Value, Message=tweet.Element("text").Value};
}
Animation
Animation – The Basis
Animation
Animation<Grid Name="grid">
<Canvas Name="canvas">
<Button Content="Fire Shapes!" Height="23" HorizontalAlignment="Left"
Margin="12,12,0,0" Name="buttonFireShapes" VerticalAlignment="Top"
Width="75" Click="buttonFireShapes_Click" />
</Canvas>
</Grid>
Animation
private void CreateRectangleMovementAnimation(Rectangle rectangle){
DoubleAnimation animation = new DoubleAnimation(150,800,new Duration(TimeSpan.FromSeconds(2)));animation.AutoReverse = true;animation.RepeatBehavior = RepeatBehavior.Forever;TranslateTransform t = new TranslateTransform();rectangle.RenderTransform.BeginAnimation(TranslateTransform.XProperty, animation);
}
private void CreateRectangleColorAnimation(Rectangle rectangle){
ColorAnimation animation = new ColorAnimation(Colors.Red, Colors.Yellow,newDuration(TimeSpan.FromSeconds(1)));
animation.AutoReverse = true;animation.RepeatBehavior = RepeatBehavior.Forever;rectangle.Fill.BeginAnimation(SolidColorBrush.ColorProperty, animation);
}
Animation