1 / 49

Visual Application Development

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.

jake
Télécharger la présentation

Visual Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related