UNIVERSITY of GREENWICH 1E. I. Teodorescu Dependency/Attached properties Enumerations Starting a...

UNIVERSITY of GREENWICH

1E. I. Teodorescu

Dependency/Attached properties

Enumerations

Starting a game – flying pig

Visual Application Development

E. I. Teodorescu


2E. I. Teodorescu

Dependency vs Attached properties

E. I. Teodorescu


3E. I. Teodorescu


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


4E. I. Teodorescu


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


5E. I. Teodorescu


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

http://jesseliberty.com/2007/09/19/dependency-properties-or-attached-properties/




6E. I. Teodorescu


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


7E. I. Teodorescu


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


8E. I. Teodorescu


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

8E. I. Teodorescu


9E. I. Teodorescu


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


10E. I. Teodorescu


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


11E. I. Teodorescu


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


12E. I. Teodorescu


<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


13E. I. Teodorescu


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


14E. I. Teodorescu


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


15E. I. Teodorescu


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


16E. I. Teodorescu


Making the pig fly

Create the KeyDown event of the UserControl from the properties or in the XAML file.

16E. I. Teodorescu


17E. I. Teodorescu


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


18E. I. Teodorescu


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


19E. I. Teodorescu


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


20E. I. Teodorescu


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


21E. I. Teodorescu


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


22E. I. Teodorescu


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


23E. I. Teodorescu


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


24E. I. Teodorescu


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


25E. I. Teodorescu


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


26E. I. Teodorescu


Creating a moving background

26E. I. Teodorescu


27E. I. Teodorescu


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


28E. I. Teodorescu


Background

28E. I. Teodorescu


29E. I. Teodorescu


Exporting the background as png

29E. I. Teodorescu


30E. I. Teodorescu


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


31E. I. Teodorescu


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


32E. I. Teodorescu


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


33E. I. Teodorescu


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


34E. I. Teodorescu


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


35E. I. Teodorescu


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


36E. I. Teodorescu


moving background

When the application is running, the background will flicker on a set interval.

Why?How could we fix this?

36E. I. Teodorescu


37E. I. Teodorescu

Enumerations

E. I. Teodorescu


38E. I. Teodorescu


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


39E. I. Teodorescu


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


40E. I. Teodorescu


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


41E. I. Teodorescu


EnumExample application

Create a new application and add a combobox and 2 textblocks to it

E. I. Teodorescu 41


42E. I. Teodorescu


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?


43E. I. Teodorescu


EnumExample application

add a code file to the application and call it Enums

43E. I. Teodorescu


44E. I. Teodorescu


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


45E. I. Teodorescu


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


46E. I. Teodorescu


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?


47E. I. Teodorescu


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?


48E. I. Teodorescu


48E. I. Teodorescu


49E. I. Teodorescu

The end

E. I. Teodorescu

UNIVERSITY of GREENWICH 1E. I. Teodorescu Dependency/Attached properties Enumerations Starting a...

Documents

Transcript of UNIVERSITY of GREENWICH 1E. I. Teodorescu Dependency/Attached properties Enumerations Starting a...