1. UNIVERSITY of GREENWICH 1E. I. Teodorescu Dependency/Attached properties Enumerations Starting a game – flying pig Visual Application Development E. I. Teodorescu

2. UNIVERSITY of GREENWICH 2E. I. Teodorescu Dependency vs Attached properties E. I. Teodorescu

3. 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 3 E. I. Teodorescu

4. 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. 4 E. I. Teodorescu

5. UNIVERSITY of GREENWICH 5E. I. Teodorescu UNIVERSITY of GREENWICH Dependency/ attached properties What 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 differences Different specialists use either of the 2 terms “ When you write: 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] “ When you write: 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] 5 E. I. Teodorescu

6. UNIVERSITY of GREENWICH 6E. I. Teodorescu UNIVERSITY of GREENWICH Property vs Dependency property Property: Get method – void, no parameters Set method – return type and 1 parameter for the value Dependency property GetValue method – void, 1 parameter= the obhect that you set it for SetValue 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); 6 E. I. Teodorescu

7. UNIVERSITY of GREENWICH 7E. I. Teodorescu UNIVERSITY of GREENWICH Defining a dependency property example optional 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 ); } } 7 E. I. Teodorescu

8. 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 application 8 E. I. Teodorescu

9. UNIVERSITY of GREENWICH 9E. I. Teodorescu UNIVERSITY of GREENWICH Setting the game dimensions on the web page important, otherwise the game doesn’t have boundaries In 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 9 E. I. Teodorescu

10. UNIVERSITY of GREENWICH 10E. I. Teodorescu UNIVERSITY of GREENWICH Setting the game dimensions in the Silverlight application Open the MainPage.xaml On the UserControl tag change Width and Height Either in the xaml: <UserControl...... Height="480" Width="640"> Or in the properties of the UserControl 10 E. I. Teodorescu

11. UNIVERSITY of GREENWICH 11E. I. Teodorescu UNIVERSITY of GREENWICH Adding an image for the game Save the image in the main folder Add 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. 11 E. I. Teodorescu

12. 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"> Use a canvas as a RootLayout Change the grid layout called LayoutRoot into a Canvas Change the grid layout to Canvas 12 E. I. Teodorescu

13. UNIVERSITY of GREENWICH 13E. I. Teodorescu UNIVERSITY of GREENWICH Adding an image control on the canvas in 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 13 E. I. Teodorescu

14. UNIVERSITY of GREENWICH 14E. I. Teodorescu UNIVERSITY of GREENWICH MainPage.xaml <Image Name="flyingPig" Canvas.Left="185" Canvas.Top="203" Stretch="Fill" Width="101" Height="76" Source="/FlyingPigNoBackground;component/FlyingPig.png" /> Change the attached property Canvas.Left to 10 14 E. I. Teodorescu

15. 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 For the flying pig to move in response to keyboard input events, the UserControl class will need a key event handler 15 E. I. Teodorescu

16. 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. 16 E. I. Teodorescu

17. UNIVERSITY of GREENWICH 17E. I. Teodorescu UNIVERSITY of GREENWICH MainPage.xaml The 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“> <Image Canvas.Left="12" Canvas.Top="123" Height="76" Name="flyingPig" Stretch="Fill" Width="101" Source="/FlyingPigNoBackground;component/FlyingPig.png" /> 17 E. I. Teodorescu

18. 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.Top 18 E. I. Teodorescu

19. 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. 19 E. I. Teodorescu

20. 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) { } 20 E. I. Teodorescu

21. UNIVERSITY of GREENWICH 21E. I. Teodorescu UNIVERSITY of GREENWICH Using attached properties We 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 method 21 E. I. Teodorescu

22. 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. 22 E. I. Teodorescu

23. 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? 23 E. I. Teodorescu

24. UNIVERSITY of GREENWICH 24E. I. Teodorescu UNIVERSITY of GREENWICH Running the application Click on the application to set the focus on it Click on the right key and see the pig flying … 24 E. I. Teodorescu

25. 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 25 E. I. Teodorescu

26. UNIVERSITY of GREENWICH 26E. I. Teodorescu UNIVERSITY of GREENWICH Creating a moving background 26 E. I. Teodorescu

27. 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 Design any other package to design your bg. or an image 27 E. I. Teodorescu

28. UNIVERSITY of GREENWICH 28E. I. Teodorescu UNIVERSITY of GREENWICH Background 28 E. I. Teodorescu

29. UNIVERSITY of GREENWICH 29E. I. Teodorescu UNIVERSITY of GREENWICH Exporting the background as png 29 E. I. Teodorescu

30. 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 In the MainPage.xaml change Width="640" Height="480“ for the main UserControl Why ? 30 E. I. Teodorescu

31. UNIVERSITY of GREENWICH 31E. I. Teodorescu UNIVERSITY of GREENWICH Create the moving background Application add the images to the application Place the image(s) in the folder Add them to the Silverlight project. Place it in the folder “ClientBin” of the Web file and add it to the “ClientBin 31 E. I. Teodorescu

32. UNIVERSITY of GREENWICH 32E. I. Teodorescu UNIVERSITY of GREENWICH MainPage.xaml <UserControl x:Class="MovingBackground.MainPage".... Width="640" Height="480"> Change the attached property Canvas.Left to 0. Change the top to 0, as well 32 E. I. Teodorescu

33. UNIVERSITY of GREENWICH 33E. I. Teodorescu UNIVERSITY of GREENWICH Moving background Use CompositionTarget Class The 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 33 E. I. Teodorescu

34. 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); } public MainPage() { InitializeComponent(); CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering); } void CompositionTarget_Rendering(object sender, EventArgs e) { } void CompositionTarget_Rendering(object sender, EventArgs e) { } What code will be here?. 34 E. I. Teodorescu

35. 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? 35 E. I. Teodorescu

36. 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? 36 E. I. Teodorescu

37. UNIVERSITY of GREENWICH 37E. I. Teodorescu Enumerations E. I. Teodorescu

38. UNIVERSITY of GREENWICH 38E. I. Teodorescu UNIVERSITY of GREENWICH Enumerations in C# Syntax: enum { 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 38 E. I. Teodorescu

39. UNIVERSITY of GREENWICH 39E. I. Teodorescu UNIVERSITY of GREENWICH Enumerations in C Examples Creating an enum: enum Days { Sat, Sun, Mon, Tue, Wed, Thu, Fri }; Declaring a variable of type enum: Days day = Days.Mon; 39 E. I. Teodorescu

40. UNIVERSITY of GREENWICH 40E. I. Teodorescu UNIVERSITY of GREENWICH Converting Enumerations in C converting from enum type to an integral type an 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(); 40 E. I. Teodorescu

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

42. UNIVERSITY of GREENWICH 42E. I. Teodorescu UNIVERSITY of GREENWICH Example XAML <UserControl x:Class="EnumExample.MainPage"......"> 42 E. I. Teodorescu What is this? Notice meaningful name. Why?

43. UNIVERSITY of GREENWICH 43E. I. Teodorescu UNIVERSITY of GREENWICH EnumExample application add a code file to the application and call it Enums 43 E. I. Teodorescu

44. 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 } 44 E. I. Teodorescu

45. 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" />

46. 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){...... } 46 E. I. Teodorescu Who is cbDays? What is Items?

47. 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)); } 47 E. I. Teodorescu Who is Days? What is DayColours? Where is LayoutRoot declared?

48. UNIVERSITY of GREENWICH 48E. I. Teodorescu UNIVERSITY of GREENWICH 48 E. I. Teodorescu

49. UNIVERSITY of GREENWICH 49E. I. Teodorescu The end E. I. Teodorescu