Visual Application Development

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

2. Dependency vs Attached properties E. I. Teodorescu

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

4. 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. <TextBlock Height="32"HorizontalAlignment="Center" Name="tbOutput" Text="output"VerticalAlignment="Top" Width="516"Grid.Row="2" Margin="0,0,-116,0"FontSize="20" /> E. I. Teodorescu

5. 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:                <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] E. I. Teodorescu

6. 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; } intGetDock(DependencyObject o); void SetDock(DependencyObject o, int value); E. I. Teodorescu

7. Defining a dependency property exampleoptional • property • dependency property • Brush myBackground; public Brush MyBackground { get { return myBackground; } set { myBackground = value; } } public static readonlyDependencyPropertyMyBackgroundProperty = DependencyProperty.Register(“MyBackground", typeof(Brush), typeof(Scheduler), null); • public Brush ScheduleBackground { • get { return (Brush)GetValue(ScheduleBackgroundProperty); } • set { SetValue(ScheduleBackgroundProperty, value); } • } E. I. Teodorescu

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

9. 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) • changeWidth="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> E. I. Teodorescu

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

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

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

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

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

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

16. Making the pig fly • Create the KeyDown event of the UserControlfrom the properties or in the XAML file. E. I. Teodorescu

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

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

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

20. Explaining the event handler private void UserControl_KeyDown(object sender, KeyEventArgs e) { } 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” E. I. Teodorescu

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

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

23. 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); } 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. checks the Key property of the KeyEventArgs to determine which key the user pressed. Q: Who is flyingPig? Where was it declared? E. I. Teodorescu

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

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

26. Creating a moving background E. I. Teodorescu

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

28. Background E. I. Teodorescu

29. Exporting the background as png E. I. Teodorescu

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

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

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

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

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

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

36. moving background • When the application is running, the background will flicker on a set interval. • Why? • How could we fix this? E. I. Teodorescu

37. Enumerations E. I. Teodorescu

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

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

40. 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(); E. I. Teodorescu

41. EnumExample application • Create a new application and add a combobox and 2 textblocks to it E. I. Teodorescu

42. Example XAML <UserControl x:Class="EnumExample.MainPage" ......"> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="100" /> <RowDefinition /> </Grid.RowDefinitions> • <ComboBoxHorizontalAlignment="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> What is this? Notice meaningful name. Why? E. I. Teodorescu

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

44. Declaring 2 enumerations in the new file publicenumDays { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday } publicenumDayColours { Red, Orange, Yellow, Green, Blue, Magenta, Violet } E. I. Teodorescu

45. 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 <ComboBox Name="cbDays" Height="35" Width="44“ HorizontalAlignment="Center“ Grid.Row="1" SelectionChanged="cbDays_SelectionChanged" /> E. I. Teodorescu

46. Example c# for the MainPage publicpartialclassMainPage : UserControl { publicMainPage() { InitializeComponent(); for (inti = 1; i < 8; i++) { cbDays.Items.Add(i.ToString()); } } privatevoidcbDays_SelectionChanged(object sender, SelectionChangedEventArgs e){ ...... } } Who is cbDays? What is Items? E. I. Teodorescu

47. Example c# for the event handler privatevoidcbDays_SelectionChanged(object sender, SelectionChangedEventArgs e){ intenumNo = cbDays.SelectedIndex; tbOutput.Text = "Today is " + ((Days)enumNo).ToString() + ". I feel “ + ((DayColours)enumNo).ToString(); Random x = newRandom(); byte r = (byte)x.Next(255); byte g = (byte)x.Next(255); byte b = (byte)x.Next(255); LayoutRoot.Background = newSolidColorBrush(Color.FromArgb(255, r, g, b)); } Who is Days? What is DayColours? Where is LayoutRoot declared? E. I. Teodorescu

48. E. I. Teodorescu

49. The end E. I. Teodorescu