HCI - Lab

UI Framework With C#

HCI – Lab >>> Lecture 1

ADEL AHMED ALHAJJ

UI with C# >>Example 1 2
UI with C# >>Example 1 3

The Control The Properties The Value

Form 1 FormBorderStyle None

StartPostion CenterScreen

BackgroundImage Any - image

Panel1 Size 396;433

Label1 Text Login

BackColor Transparent

ForeColor DarkOrange

Font Tahoma –Bold -30

Label2 Text UserName

Label3 Text Password

Label2 & Label3 ForeColor DarkOrange

Font Tahoma –Bold -12

BackColor Transparent
 UI with C# >>Example 1 4

The Control The Properties The Value

Button1 Text Ok

BackColor Moccasin

ForeColor DarkOrange

Font Tahoma –Bold -12

FlatStyle Flat

FlatAppearance - BorderColor DarkOrange

FlatAppearance - BorderSize 2

FlatAppearance-MouseDownBackColor Yellow

FlatAppearance-MouseOverBackColor Pink
 UI with C# >>Example 1 5

The Control The Properties The Value

TextBox1 & TextBox2 TextAlign Center

BackColor Pink

ForeColor Black

Font Tahoma –Bold -12

Write Code >>>

UI with C# >>Example 2 6
UI with C# >>Example 2 7

The Control The Properties The Value

Form 1 FormBorderStyle None

StartPostion CenterScreen

Panel1 Size 323;536

BackColor Highlight

Panel2 Size 410;536

BackColor Control
 UI with C# >>Example 2 8

The Control The Properties The Value

PictureBox1 image Any - image

Label1 Text Welcome to the

Label2 Text Modern Framework

Label3 Text Design

Label1 & Label2 & Label3 ForeColor White

Font Century Gothic - 15

BackColor Highlight
UI with C# >>Example 2 9

The Control The Properties The Value

Label4 Text Develop By

Label5 Text Adel.A.Alhajj T e c h

Label4 & Label5 ForeColor White

Font Century Gothic - 9

BackColor Highlight

Label6 Text Login to your account

ForeColor DeepSkyBlue

Font Century Gothic - 16

BackColor Control

Panel3 & Panel4 Size 410;41

BackColor White
UI with C# >>Example 2 10

The Control The Properties The Value

PictureBox2 image user

PictureBox3 image password

TextBox1 & TextBox2 TextAlign Center

BackColor White

ForeColor LightSkyBlue

Font Century Gothic - 12

Button1 Text X

ForeColor Highlight

Font Century Gothic - 16

BackColor Control
UI with C# >>Example 2 11

The Control The Properties The Value

Button2 Text Login

BackColor Highlight

ForeColor White

Font Century Gothic - 12

Button3 Text Forget Password ?

BackColor Control

ForeColor DeepSkyBlue

Font Century Gothic – 10

FlatAppearance - BorderSize 0
 UI with C# >>Example 2 12

Write Code >>>

 UI with C# >>Example 2 13

Write Code >>>

UI with C# >>Example 3 14
 UI with C# >>Example 3 15

 Add Reference to Mp3

 UI with C# >>Example 3 16

 Select COM >> Windows Media player (wmp.dll)

 UI with C# >>Example 3 17

 To Add Files Mp3 To Project

 Open bin >> Copy Files Mp3

Into Debug
UI with C# >>Example 3 18

The Control The Properties The Value

Form 1 FormBorderStyle None

StartPostion CenterScreen

Size 803; 498

Panel 1 Dock Top

Size 803; 33

BackColor 255; 192; 192

pictureBox 1 Size 31; 33

Image Img - Close

SizeMode StretchImage
UI with C# >>Example 3 19

The The Properties The Value

Control

Panel 2 Dock Left

Size 232; 465

BackColor Black

Button 1 Size 233; 52

BackColor Transparent
Button 2
Font Century Gothic; 12pt

ForeColor 192; 0; 192

Button 3
FlatStyle Flat
Button 4 FlatApp–BorderSize 0
UI with C# >>Example 3 20

The The Properties The Value

Control

Button 1 Text Media Player

Location 0; 92

MouseDownBackColor 255; 255; 192

MouseOverBackColor 255; 255; 192

Button 2 Text Slide Show

Location 0; 171

MouseDownBackColor 192; 192; 255

MouseOverBackColor 192; 192; 255

UI with C# >>Example 3 21

The The Properties The Value

Control

Button 3 Text Color GRB

Location 0; 257

MouseDownBackColor BurlyWood

MouseOverBackColor BurlyWood

Button 4 Text Collection

Location 0; 335

MouseDownBackColor DarkSeaGreen

MouseOverBackColor DarkSeaGreen
UI with C# >>Example 3 22

The The Properties The Value

Control

FlatStyle Flat
Button 5 ForeColor 192; 0; 192

FlatApp–BorderSize 1
Button 6
MouseDownBackColor Black

Size 232; 32

Button 5 Text Play

Dock Top

MouseOverBackColor 128; 255; 128

Button 6 Text Pause

Dock Bottom

MouseOverBackColor 255; 192; 128

UI with C# >>Example 3 23

The Control The Properties The Value

Panel 3 Location 0; 93

Size 10; 53

BackColor 255; 192; 192

Label 1 Text Welcome

Font Century Gothic; 26.25pt

Label 2 Text To Demo Framework

Font Century Gothic; 26.25pt

pictureBox 2 Size 173; 138

Image Any- img

SizeMode StretchImage

TextBox 1 Text 1.mp3

Visible False
 UI with C# >>Example 3 24

 Write Code for Set Location

 UI with C# >>Example 3 25

 Write Code >> Play

 Write Code >> Pause

 UI with C# >>Example 3 26

 Write Code >> In button1 MouseMove

 After that Set Value For

( button2 MouseMove and button3 MouseMove and button4 MouseMove )

equals >>> button1_MouseMove

 UI with C# >>Example 3 27

Write Code For

( button 1_MouseLeave and button 2_MouseLeave and button 3_MouseLeave

and button 4_MouseLeave)