Upload
jake
View
40
Download
0
Embed Size (px)
DESCRIPTION
Visual Application Development. Dependency/Attached properties Enumerations Starting a game – flying pig. Dependency vs Attached properties. Dependency properties. provide a way to compute the value of a property based on the value of other inputs. - PowerPoint PPT Presentation
Citation preview
UNIVERSITY of GREENWICH
1E. I. Teodorescu
Dependency/Attached propertiesEnumerations
Starting a game – flying pig
Visual Application Development
E. I. Teodorescu
UNIVERSITY of GREENWICH
2E. I. Teodorescu
Dependency vs Attached properties
E. I. Teodorescu
UNIVERSITY of GREENWICH
3E. I. Teodorescu
UNIVERSITY of GREENWICH
Dependency properties
provide a way to compute the value of a property based on the value of other inputs. they’re needed if you want a property to support data binding, animations, transformations and styles properly.use the methods SetValue and GetValue which are defined in the DependencyObject class. can hold a default value,
with built in mechanism for property value validation and automatic notification for changes in property value
3E. I. Teodorescu
UNIVERSITY of GREENWICH
4E. I. Teodorescu
UNIVERSITY of GREENWICH
attached properties
new concept that is defined XAML. allows different child elements to specify unique values for a property that is actually defined in a parent element.
4E. I. Teodorescu
<TextBlock Height="32" HorizontalAlignment="Center" Name="tbOutput" Text="output" VerticalAlignment="Top" Width="516" Grid.Row="2" Margin="0,0,-116,0" FontSize="20" />
UNIVERSITY of GREENWICH
5E. I. Teodorescu
UNIVERSITY of GREENWICH
Dependency/ attached propertiesWhat is the difference between the 2?
New concepts - .NET Framework 3.0,Different opinions Attached properties are a specialized case of Dependency Properties
For now do not bother about the differencesDifferent specialists use either of the 2 terms
“ When you write: <Rectangle Canvas.Top=”15”> It is correct to call it either an Attached property or a Dependency Property, in the sense that if All Throgs are Thrains and this is a Throg then it is also a Thrain. ”
[Jesse Liberty, Dependency Properties or Attached Properties]
5E. I. Teodorescu
UNIVERSITY of GREENWICH
6E. I. Teodorescu
UNIVERSITY of GREENWICH
Property vs Dependency property Property:
Get method – void, no parametersSet method – return type and 1 parameter for the value
Dependency propertyGetValue method – void, 1 parameter= the obhect that you set it forSetValue method – return type and 2 parameters for the value and object
int Dock { get; set; }
int GetDock(DependencyObject o); void SetDock(DependencyObject o, int value);
6E. I. Teodorescu
UNIVERSITY of GREENWICH
7E. I. Teodorescu
UNIVERSITY of GREENWICH
Defining a dependency property exampleoptional
property
dependency property
Brush myBackground;
public Brush MyBackground { get { return myBackground; }
set { myBackground = value; } }
public static readonly DependencyProperty MyBackgroundProperty = DependencyProperty.Register(“MyBackground",
typeof(Brush), typeof(Scheduler), null);
public Brush ScheduleBackground { get { return (Brush)GetValue(ScheduleBackgroundProperty); } set { SetValue(ScheduleBackgroundProperty, value); }
}7E. I. Teodorescu
UNIVERSITY of GREENWICH
8E. I. Teodorescu
UNIVERSITY of GREENWICH
First flying pig.
The Application will allow to move an object (in our case, the pig) up , down, left, right using a key pad.Step one -We need the flying object.
You can draw it– or use my “creation”
Step 2 - create a Silverlight application8E. I. Teodorescu
UNIVERSITY of GREENWICH
9E. I. Teodorescu
UNIVERSITY of GREENWICH
Setting the game dimensions on the web page
important, otherwise the game doesn’t have boundariesIn the Solution Explorer find the Web folder (for example FlyingPig1.Web)Open the aspx test page (for example FlyingPig1TestPage.aspx)change Width="640" Height="480“
Either in the html:<object data="data:application/x-silverlight-2,“ type="application/x-silverlight-2“ width="640" height="480">
Or in the properties of the <OBJECT>
9E. I. Teodorescu
UNIVERSITY of GREENWICH
10E. I. Teodorescu
UNIVERSITY of GREENWICH
Setting the game dimensions in the Silverlight application
Open the MainPage.xamlOn the UserControl tag change Width and Height
Either in the xaml:<UserControl ...
... Height="480" Width="640">
Or in the properties of the UserControl
10E. I. Teodorescu
UNIVERSITY of GREENWICH
11E. I. Teodorescu
UNIVERSITY of GREENWICH
Adding an image for the gameSave the image in the main folderAdd the pig image to the Silverlight project.
Right click: Add existing item…
Add the image to the client bin in the web folder, as well
Right click: Add existing item… Note: the executable file (XAP file) is deployed in the folder “ClientBin” of the web folder, which means you will need to copy the image to the ClientBin directory, since that essentially represents the “root” of the lookup.
11E. I. Teodorescu
UNIVERSITY of GREENWICH
12E. I. Teodorescu
UNIVERSITY of GREENWICH
<UserControl x:Class="FlyingPigNoBackground.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" Height="480" Width="640">
<Canvas x:Name="LayoutRoot" Background="#FF8AD3EF">
</Canvas>
</UserControl>
Use a canvas as a RootLayoutChange the grid layout called LayoutRoot into a Canvas
Change the grid layout to Canvas
12E. I. Teodorescu
UNIVERSITY of GREENWICH
13E. I. Teodorescu
UNIVERSITY of GREENWICH
Adding an image control on the canvasin the MainPage.xaml
Add an Image control from the tool box (drag and drop)Give it a meaningful name (e.g. flyingPig)and set the source to the desired picture
13E. I. Teodorescu
UNIVERSITY of GREENWICH
14E. I. Teodorescu
UNIVERSITY of GREENWICH
MainPage.xaml
<Canvas x:Name="LayoutRoot" Background="#FF8AD3EF">
<Image Name="flyingPig" Canvas.Left="185" Canvas.Top="203" Stretch="Fill" Width="101" Height="76"
Source="/FlyingPigNoBackground;component/FlyingPig.png" />
</Canvas>
Change the attached property Canvas.Left to 10
14E. I. Teodorescu
UNIVERSITY of GREENWICH
15E. I. Teodorescu
UNIVERSITY of GREENWICH
Making the pig fly
We will move the pig by using the up, down, left and right keys.The whole MainPage needs to “listen” to the keys. Who is going to have an event attached?
We can add an event to the UserControl<UserControl x:Class="FlyingPig1.MainPage“….>
For the flying pig to move in response to keyboard input events, the UserControl class will need a key event handler
15E. I. Teodorescu
UNIVERSITY of GREENWICH
16E. I. Teodorescu
UNIVERSITY of GREENWICH
Making the pig fly
Create the KeyDown event of the UserControl from the properties or in the XAML file.
16E. I. Teodorescu
UNIVERSITY of GREENWICH
17E. I. Teodorescu
UNIVERSITY of GREENWICH
MainPage.xamlThe event MUST be created from the event panel ! Important !!!DO NOT copy and paste the code below as it will not work
<UserControl x:Class="FlyingPigNoBackground.MainPage" ... Height="480" Width="640" KeyDown="UserControl_KeyDown“> <Canvas x:Name="LayoutRoot" Background="#FF8AD3EF“> <Image Canvas.Left="12" Canvas.Top="123" Height="76" Name="flyingPig" Stretch="Fill" Width="101" Source="/FlyingPigNoBackground;component/FlyingPig.png" /> </Canvas></UserControl>
17E. I. Teodorescu
UNIVERSITY of GREENWICH
18E. I. Teodorescu
UNIVERSITY of GREENWICH
“velocity” field (variable)
Why should we declare it?We need it to set the speed of the pig.
how much the pig will move when a key is pressed an instance variable (field), of type integer, initialised to 10
How we can use this “velocity”?add or subtract the variable from the distance between the left canvas margin and the pig.
Use the dependency properties of the Canvas class to set the distances between the pig and the margins of the canvas.
change the Canvas.Left and Canvas.Top18E. I. Teodorescu
UNIVERSITY of GREENWICH
19E. I. Teodorescu
UNIVERSITY of GREENWICH
Implementing the KeyDown event handler
Everytime the player presses a key (while the UserControl has focus), it raises a KeyDown event. In VS notice the new code in the MainPage.xaml.cs.
The function UserControl_KeyDown as a KeyEventHandler to the KeyDown event insures that everytime the event raises, Silverlight calls the UserControl_KeyDown function.
19E. I. Teodorescu
UNIVERSITY of GREENWICH
20E. I. Teodorescu
UNIVERSITY of GREENWICH
Explaining the event handler
The event handler knows 2 things:the object that has the event attached. Who is it?
“sender” (In this case the user control)which key the user pressed
Information given by the KeyEventArgs object “e”
private void UserControl_KeyDown(object sender, KeyEventArgs e) {
}
20E. I. Teodorescu
UNIVERSITY of GREENWICH
21E. I. Teodorescu
UNIVERSITY of GREENWICH
Using attached propertiesWe need to move an object on the canvas.
This means we need an attached property of the canvas to manipulate the location of the object
Canvas’ attached properties:Top - Gets or sets a value that represents the distance between the top of an element and the top of its parent Canvas.Bottom - Gets or sets a value that represents the distance between the bottom of an element and the bottom of its parent Canvas.Left - Gets or sets a value that represents the distance between the left side of an element and the left side of its parent Canvas. Right - Gets or sets a value that represents the distance between the right side of an element and the right side of its parent Canvas.
Note: If you specify them, the attached properties Canvas.Top or Canvas.Left take priority over the other
Each property has a SetValue and GetValue method21E. I. Teodorescu
UNIVERSITY of GREENWICH
22E. I. Teodorescu
UNIVERSITY of GREENWICH
Explaining Canvas.SetLeft
Canvas.SetLeft (UIElement element, double length )sets the value of the Canvas.Left attached property for a given dependency object. Syntax:
public static void SetLeft( UIElement element, double length )
Element: The element to which the property value is written (a button, a image, etc).Length: Sets the Canvas.Left coordinate of the specified element.
22E. I. Teodorescu
UNIVERSITY of GREENWICH
23E. I. Teodorescu
UNIVERSITY of GREENWICH
What makes the pig move
private void UserControl_KeyDown(object sender, KeyEventArgs e) { if (e.Key == Key.Right) Canvas.SetLeft(this.flyingPig, Canvas.GetLeft(flyingPig) + velocity);}
checks the Key property of the KeyEventArgs to
determine which key the user pressed.
gets the current left of the object, and then adds the velocity value from it
sets the value of the Canvas.Left attached property for a given object – in our case the flyingPig.
Q: Who is flyingPig? Where was it declared?
23E. I. Teodorescu
UNIVERSITY of GREENWICH
24E. I. Teodorescu
UNIVERSITY of GREENWICH
Running the application
Click on the application to set the focus on itClick on the right key and see the pig flying …
24E. I. Teodorescu
UNIVERSITY of GREENWICH
25E. I. Teodorescu
UNIVERSITY of GREENWICH
Moving the pig in all directions
Canvas.SetLeft (UIElement element, double length )Canvas.GetLeft (UIElement element)Canvas.SetTop(UIElement element, double length )Canvas.GetTop(UIElement element)
Use the set methods to make the pig move on Key.Right, Key.Left, Key.Up, Key.Down
Questions:How would you make the pig go backwards?Think of an way to have the pig facing the direction it going to
25E. I. Teodorescu
UNIVERSITY of GREENWICH
26E. I. Teodorescu
UNIVERSITY of GREENWICH
Creating a moving background
26E. I. Teodorescu
UNIVERSITY of GREENWICH
27E. I. Teodorescu
UNIVERSITY of GREENWICH
Creating a moving background
Before creating a Silverlight application,You need to design a background
Dimensions 1280 x 480 why these dimensions?
Note: you can use Expression Designany other package
to design your bg. or an image
27E. I. Teodorescu
UNIVERSITY of GREENWICH
28E. I. Teodorescu
UNIVERSITY of GREENWICH
Background
28E. I. Teodorescu
UNIVERSITY of GREENWICH
29E. I. Teodorescu
UNIVERSITY of GREENWICH
Exporting the background as png
29E. I. Teodorescu
UNIVERSITY of GREENWICH
30E. I. Teodorescu
UNIVERSITY of GREENWICH
Create the moving background Application
Set the game dimensions:In the aspx test page in the Web folder
change Width="640" Height="480“ for the <OBJECT>
In the MainPage.xamlchange Width="640" Height="480“ for the main UserControlWhy ?
30E. I. Teodorescu
UNIVERSITY of GREENWICH
31E. I. Teodorescu
UNIVERSITY of GREENWICH
Create the moving background Application
add the images to the applicationPlace the image(s) in the folderAdd them to the Silverlight project.Place it in the folder “ClientBin” of the Web file and add it to the “ClientBin
31E. I. Teodorescu
UNIVERSITY of GREENWICH
32E. I. Teodorescu
UNIVERSITY of GREENWICH
MainPage.xaml<UserControl x:Class="MovingBackground.MainPage" .... Width="640" Height="480">
<Canvas x:Name="LayoutRoot" Background="White"> <Image Source="/MovingBackground;component/background.png" Name="bg" Canvas.Left="0”/> </Canvas></UserControl>
Change the attached property Canvas.Left to 0.Change the top to 0, as well
32E. I. Teodorescu
UNIVERSITY of GREENWICH
33E. I. Teodorescu
UNIVERSITY of GREENWICH
Moving background
Use CompositionTarget ClassThe purpose of this class is as the host of the Rendering event, which can be used as a per-frame callback for complex layout or composition scenarios.
the CompositionTarget.Rendering event fires once every frame
Why use this event?As we need the background to move continuously, this event is the right one for us
33E. I. Teodorescu
UNIVERSITY of GREENWICH
34E. I. Teodorescu
UNIVERSITY of GREENWICH
The rendering event for the backgkound
Declare it in the constructor. Why?
What are the above? Explain each line.What code needs to be written next?
public MainPage() { InitializeComponent(); CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering); }
void CompositionTarget_Rendering(object sender, EventArgs e) {
}What code will be here?.
34E. I. Teodorescu
UNIVERSITY of GREENWICH
35E. I. Teodorescu
UNIVERSITY of GREENWICH
Finally- moving background
if (Canvas.GetLeft(bg) < -(this.bg.ActualWidth - this.Width)) { Canvas.SetLeft(bg, 0); } Canvas.SetLeft(bg, Canvas.GetLeft(bg) - 1);
Explain the code. for every frame, the background will scroll off screen to the left by one pixel.
Qs: Who is bg? Where was it declared?what is ActualWidth?what is this.Width?
35E. I. Teodorescu
UNIVERSITY of GREENWICH
36E. I. Teodorescu
UNIVERSITY of GREENWICH
moving background
When the application is running, the background will flicker on a set interval.
Why?How could we fix this?
36E. I. Teodorescu
UNIVERSITY of GREENWICH
37E. I. Teodorescu
Enumerations
E. I. Teodorescu
UNIVERSITY of GREENWICH
38E. I. Teodorescu
UNIVERSITY of GREENWICH
Enumerations in C#
Syntax: enum <type> { const1, const2,…}
a distinct type consisting of a set of named constants
By default, the first enumerator has the value 0, and the value of each successive enumerator is increased by 1. The underlying type can be any integral type except char
38E. I. Teodorescu
UNIVERSITY of GREENWICH
39E. I. Teodorescu
UNIVERSITY of GREENWICH
Enumerations in CExamples
Creating an enum:enum Days {Sat, Sun, Mon, Tue, Wed, Thu, Fri};
Declaring a variable of type enum:Days day = Days.Mon;
39E. I. Teodorescu
UNIVERSITY of GREENWICH
40E. I. Teodorescu
UNIVERSITY of GREENWICH
Converting Enumerations in C
converting from enum type to an integral typean explicit cast is needed
int x = (int)Days.Sun;Days d = (Days)x;
we can retrieve the literal as a string from the numeric constant
string myDay = Days.Mon.ToString();
40E. I. Teodorescu
UNIVERSITY of GREENWICH
41E. I. Teodorescu
UNIVERSITY of GREENWICH
EnumExample application
Create a new application and add a combobox and 2 textblocks to it
E. I. Teodorescu 41
UNIVERSITY of GREENWICH
42E. I. Teodorescu
UNIVERSITY of GREENWICH
Example XAML<UserControl x:Class="EnumExample.MainPage"......"> <Grid x:Name="LayoutRoot" Background="White" > <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="100" /> <RowDefinition /> </Grid.RowDefinitions> <ComboBox HorizontalAlignment="Center" Name="cbDays"
Height="35" Width="44" Grid.Row="1" /> <TextBlock Height="31" HorizontalAlignment="Center"
Name="textBlock1" Text="Choose day number:" Grid.Row="0" Width="217" FontSize="20" />
<TextBlock Height="32" HorizontalAlignment="Center" Name="tbOutput" Text="output"
VerticalAlignment="Top" Width="516" Grid.Row="2" Margin="0,0,-116,0" FontSize="20" /> </Grid></UserControl>
42E. I. Teodorescu
What is this?
Notice meaningful name. Why?
UNIVERSITY of GREENWICH
43E. I. Teodorescu
UNIVERSITY of GREENWICH
EnumExample application
add a code file to the application and call it Enums
43E. I. Teodorescu
UNIVERSITY of GREENWICH
44E. I. Teodorescu
UNIVERSITY of GREENWICH
Declaring 2 enumerations in the new file
public enum Days { Monday, Tuesday, Wednesday, Thursday, Friday,
Saturday, Sunday }
public enum DayColours{ Red, Orange, Yellow, Green, Blue, Magenta, Violet}
44E. I. Teodorescu
UNIVERSITY of GREENWICH
45E. I. Teodorescu
UNIVERSITY of GREENWICH
Creating an event when we choose something from the combobox
How do you create an event?Event properties panel
What event will be appropriate for the combobox ?
SelectionChanged
E. I. Teodorescu 45
<ComboBox Name="cbDays" Height="35" Width="44“ HorizontalAlignment="Center“ Grid.Row="1" SelectionChanged="cbDays_SelectionChanged" />
UNIVERSITY of GREENWICH
46E. I. Teodorescu
UNIVERSITY of GREENWICH
Example c# for the MainPage
public partial class MainPage : UserControl {
public MainPage() { InitializeComponent(); for (int i = 1; i < 8; i++) { cbDays.Items.Add(i.ToString()); } }
private void cbDays_SelectionChanged(object sender,
SelectionChangedEventArgs e){......
} }
46E. I. Teodorescu
Who is cbDays?
What is Items?
UNIVERSITY of GREENWICH
47E. I. Teodorescu
UNIVERSITY of GREENWICH
Example c# for the event handler private void cbDays_SelectionChanged(object sender,
SelectionChangedEventArgs e){
int enumNo = cbDays.SelectedIndex; tbOutput.Text = "Today is " + ((Days)enumNo).ToString() + ". I feel “ + ((DayColours)enumNo).ToString();
Random x = new Random(); byte r = (byte)x.Next(255); byte g = (byte)x.Next(255); byte b = (byte)x.Next(255); LayoutRoot.Background = new
SolidColorBrush(Color.FromArgb(255, r, g, b)); }
47E. I. Teodorescu
Who is Days?
What is DayColours?
Where is LayoutRoot declared?
UNIVERSITY of GREENWICH
48E. I. Teodorescu
UNIVERSITY of GREENWICH
48E. I. Teodorescu
UNIVERSITY of GREENWICH
49E. I. Teodorescu
The end
E. I. Teodorescu