Lab Manual

CS411 – Visual Programing

Prepared by
Bilal Bin Umar, Tutor/Instructor

Department of Computer Science, Virtual University of Pakistan

Week No. Lab Topic Page No.

1 Learn to read text files in C++. 2

2 Learn about arrays and for each loop in C#. 3
3 Classes and Objects in C#. 4

4 How to create WPF application in Visual Studio. Basic study of 5

Buttons and MessageBox.
5 More about WPF controls. Generate layout in WPF using 6
StackPanel.
6 More study of WPF layouts and elements. 7

7 Study of WPF Events and Event handlers. 9

8 Study of WPF canvas on Touch Enabled devices. 11

Mid Term

9 Learn to add copy, cut and paste functions in WPF controls. 13

10 Create a wpf application in C# XAML, with 2 textBoxes , one button 15

and one progress bar.

11 Create a wpf application in C# XAML, with one button and one Text 17
Box, The Text box must have vertical scroll bars attached to it.

12 Create a html web page, use CSS to style the webpage, then 19
implement fade in function using Jquery.

1|Visual Programing
 Lab 1
Problem Statement:

Write a C++ console program which reads the text file named VU.txt and prints all the text on
the console character by character.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect .

Solution:

#include <iostream>

#include <fstream>

int main() {

char a = '-';

do {

std::ifstream f("test.txt", std::ifstream::in);

if (f.good() && a != f.peek()) {

a = f.get();

std::cout << a << std::endl;

f.close();

} while (a!='x');

return 0;

2|Visual Programing
 Lab 2
Problem Statement:

Write a C# program in Visual Studio: create an array of String type and initialize it with some
names, then print all the names on the console using for each loop.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect.

Solution:

{
class Program
{
static void Main(string[] args)
{
string[] myarray = new string[]{ "Bilal", "Asad", "Saad",
"kamran" };

foreach (String name in myarray ) {

Console.WriteLine("Name is:"+ name);
}

Console.ReadKey();
}
}
}

3|Visual Programing
 Lab 3
Problem Statement:

Write a program in C# using Visual Studio: First create a Person class with Name and Age
properties, make another class named Student and inherit student class from person.

Student class has Student_Id and Student_Semester properties. Now create an instance of
student class in main and set all the properties then print it on the console.

Note: Create get set properties using C# language feature of creating properties.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect.

Solution:

class Person {
private int m_id;
public int id {
get { return m_id; } set { m_id = value; }
}
private string m_name;
public string name {
get { return m_name; } set { m_name = value; }
}
}
class Student:Person {
private int s_id;
public int stdentid {
get { return s_id; }
set { s_id = value; }
}
private int s_semester;
public int semester {
get { return s_semester; } set { s_semester = value; }
} }
class Program
{
static void Main(string[] args)
{
Student s1 = new Student();
s1.id = 1;
s1.name = "Umar";
s1.stdentid = 10;
s1.semester = 3;
Console.WriteLine("ID:{0},Name:{1},Student ID:{2},Semester:{3}",
s1.id,s1.name,s1.stdentid,s1.semester);
Console.ReadKey();
} }

4|Visual Programing
 Lab 4
Problem Statement:

Write a Program in WPF using Visual Studio: Which have two buttons Button 1 and Button 2 .

Clicking Button 1 will show a MessageBox printing Button 1 is clicked same for Button 2
MessageBox will be shown with button 2 cliked Message.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect.

Solution:

XAML:

<Grid>
<Button x:Name="button" Content="Button 1" HorizontalAlignment="Left"
Margin="92,54,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<Button x:Name="button1" Content="Button 2" HorizontalAlignment="Left"
Margin="295,54,0,0" VerticalAlignment="Top" Width="75" Click="button1_Click"/>

</Grid>

C#:

private void button_Click(object sender, RoutedEventArgs e)

{
MessageBox.Show("Button 1 is cliked");
}

private void button1_Click(object sender, RoutedEventArgs e)

{
MessageBox.Show("Button 2 is cliked");
}

5|Visual Programing
 Lab 5
Problem Statement:

Design the following Layout in WPF XAML using StackPanel. With TextBlock at the top and 4
Buttons after the TextBlock.

Solution:

XAML:

<StackPanel>
<TextBlock Margin="10" FontSize="20">In which University Do you Study?
</TextBlock>
<Button Margin="10">Virtual University of Pakistan </Button>
<Button Margin="10">UET lahore</Button>
<Button Margin="10">Punjab University</Button>
<Button Margin="10">Comsats</Button>
</StackPanel>

Lab 6

6|Visual Programing
Problem Statement:

Design the following Layout in WPF XAML using StackPanel With 6 buttons in it.

Clicking Collapse button will set the visibility of button 2 to collapse. Same for the hidden and
visible button these buttons will set the visibility of button2.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect.

Solution:

XAML:

<StackPanel>
<Button x:Name="button" Content="Button 1" />
<Button x:Name="button1" Content="Button 2"/>
<Button x:Name="button2" Content="Button 3"/>
<Button x:Name="button3" Content="Collapse" Click="button3_Click"/>
<Button x:Name="button4" Content="Hidden" Click="button4_Click"/>
<Button x:Name="button5" Content="Visible" Click="button5_Click"/>
</StackPanel>

C# Code:

private void button3_Click(object sender, RoutedEventArgs e)

{
button2.Visibility = Visibility.Collapsed;

7|Visual Programing
 }

private void button4_Click(object sender, RoutedEventArgs e)

{
button2.Visibility = Visibility.Hidden;
}

private void button5_Click(object sender, RoutedEventArgs e)

{
button2.Visibility = Visibility.Visible;
}

Lab 7

8|Visual Programing
Problem Statement:

Design the following layout in WPF with one listBox and one Button.

Now create a single Event Handler for Both the controls, clicking the button will show a
messageBox that button is clicked and clicking a list item will show a MessageBox with selected
list item content.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect.

Solution:

XAML:

<Grid>
<ListBox x:Name="listBox" HorizontalAlignment="Left" Height="100"
Margin="113,69,0,0" VerticalAlignment="Top" Width="100" SelectionChanged="EventHandler">
<ListBoxItem Content="First"/>
<ListBoxItem Content="Second" />
<ListBoxItem Content="Third"/>
<ListBoxItem Content="Fourth"/>
</ListBox>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left"
Margin="113,206,0,0" VerticalAlignment="Top" Width="75"
RenderTransformOrigin="0.024,0.436" Click="EventHandler"/>

</Grid>

C# code:

private void EventHandler(object sender, RoutedEventArgs e)

{
if (e.RoutedEvent == Button.ClickEvent) {

9|Visual Programing
 MessageBox.Show("Button is CLicked");
} else if (e.RoutedEvent==ListBox.SelectionChangedEvent) {
SelectionChangedEventArgs sce = (SelectionChangedEventArgs)e;
if (sce.AddedItems.Count > 0) {
MessageBox.Show("Selected item is" + sce.AddedItems[0]);
}
}

10 | V i s u a l P r o g r a m i n g
 Lab 8

Problem Statement:

Create a wpf application in C# and XAML, add an image on the canvas in xaml. Now handle
move, rotate and zoom events in c# using Delta manipulation on Touch Enabled devices.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect.

Solution:

XAML:

<Canvas Name="canvas" IsManipulationEnabled="True">

<Image Name="photo" Source="Y:\VS\lab8\image.jpeg">
<Image.RenderTransform>
<MatrixTransform/>
</Image.RenderTransform>

</Image>
</Canvas>

11 | V i s u a l P r o g r a m i n g
C# Code:

public partial class MainWindow : Window

{
public MainWindow()
{
InitializeComponent();
canvas.ManipulationDelta += Canvas_ManipulationDelta;
}
void Canvas_ManipulationDelta(object sender,ManipulationDeltaEventArgs e) {
MatrixTransform transform = photo.RenderTransform as MatrixTransform;
if (transform !=null) {
Matrix matrix = transform.Matrix;
matrix.Translate(e.DeltaManipulation.Translation.X,
e.DeltaManipulation.Translation.Y);
matrix.RotateAt(e.DeltaManipulation.Rotation,
e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
matrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.Y,
e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
transform.Matrix = matrix;
e.Handled = true;

}
}
}

12 | V i s u a l P r o g r a m i n g
 Lab 9

Problem Statement:

Create a wpf application in XAML, First add 5 buttons and one TextBox inside a Stackpanel
Horizontally.

Now use TextBox’s built in command bindings to implement cut, copy , paste ,redo and undo
Commands.

Note: No C# code will be written, only write code in XAML file to implements the commands.

Solution :

<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF CommandBindings" Height="300" Width="400">

<Grid>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
HorizontalAlignment="Center">

<Button Content="Cut" Command="ApplicationCommands.Cut" />

<Button Content="Copy" Command="ApplicationCommands.Copy" />
<Button Content="Paste" Command="ApplicationCommands.Paste" />
<Button Content="Undo" Command="ApplicationCommands.Undo" />
<Button Content="Redo" Command="ApplicationCommands.Redo" />

<TextBox Text="Type here..." Width="200" Margin="10">

<TextBox.CommandBindings>
<CommandBinding Command="ApplicationCommands.Cut"
Executed="CutCommand_Executed" />
<CommandBinding Command="ApplicationCommands.Copy"
Executed="CopyCommand_Executed" />
<CommandBinding Command="ApplicationCommands.Paste"
Executed="PasteCommand_Executed" />
<CommandBinding Command="ApplicationCommands.Undo"
Executed="UndoCommand_Executed" />
<CommandBinding Command="ApplicationCommands.Redo"
Executed="RedoCommand_Executed" />
</TextBox.CommandBindings>
</TextBox>
</StackPanel>
</Grid>
</Window>

13 | V i s u a l P r o g r a m i n g
14 | V i s u a l P r o g r a m i n g
 Lab 10

Problem Statement:

Create a wpf application in C# XAML, with 2 textBoxes , one button and one progress bar.

Clicking update button will start updating the progress bar 1 % per second i.e. it will take 100
seconds for progress bar to reach 100. But the other UI elements two textboxes for example
must remain responsive in between the process.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect.

Solution:

XAML:

<Grid>
<TextBox x:Name="textBox" HorizontalAlignment="Left" Height="23"
Margin="251,77,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"
Width="120"/>
<TextBox x:Name="textBox1" HorizontalAlignment="Left" Height="23"
Margin="251,124,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"
Width="120"/>
<Button x:Name="button" Content="Update" HorizontalAlignment="Left"
Margin="251,178,0,0" VerticalAlignment="Top" Width="120" Click="button_Click"/>
<ProgressBar Name="progressbar" HorizontalAlignment="Left" Height="16"
Margin="251,218,0,0" VerticalAlignment="Top" Width="120" />

</Grid>

C# code:

15 | V i s u a l P r o g r a m i n g
 private void button_Click(object sender, RoutedEventArgs e)
{
updateProgressbar();
}
public async void updateProgressbar() {
for (int i = 0; i <= 100; i++)
{
progressbar.Value = i;
await Task.Delay(1000);
} }

16 | V i s u a l P r o g r a m i n g
 Lab 11

Problem Statement:

Create a wpf application in C# XAML, with one button and one Text Box, The Text box must
have vertical scroll bars attached to it.

Clicking Start Button will start the loop which will write the loop values in the Text Box. And
scroll bar will automatically scroll down to latest values.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect.

Solution:

XAML:

<Grid>
<Button x:Name="button" Content="Start" HorizontalAlignment="Left"
Margin="208,263,0,0" VerticalAlignment="Top" Width="76" Click="button_Click"/>
<TextBox Name="myTextBox"
Width="120" Height="150"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True">
</TextBox>
</Grid>

17 | V i s u a l P r o g r a m i n g
C# Code:

private void button_Click(object sender, RoutedEventArgs e)

{
startloop();
}
public async void startloop()
{
for (int i = 0; i <= 100; i++)
{
myTextBox.AppendText("Loop Values is:"+i.ToString()+'\n');
myTextBox.ScrollToEnd();
await Task.Delay(100);
}

18 | V i s u a l P r o g r a m i n g
 Lab 12

Problem Statement:

Create a html web page, use CSS to style the webpage, then implement fade in function using
Jquery.

Mechanism to Conduct Lab:

Students and teacher communicate through Skype/Adobe Connect.

Solution:

HTML:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-color:black;
color :white;
}
h1{
color:yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h1").click(function(){
$("body").hide().fadeIn(3000);
});
});
</script>
</head>
<body>

19 | V i s u a l P r o g r a m i n g
<h1>If you click on me, Everything will fade in</h1>
<div>
The iPhone 7 and 7 Plus are deeply unusual devices. They are full of aggressive breaks from
convention while wrapped in cases that look almost exactly like their two direct predecessors. Even that
continuity of design is a break from convention; after almost a decade of Apple’s steady two-year iPhone
update pattern, merely retaining the same design for a third straight year plays against expectations.

Inside that case, everything else about the iPhone 7 is a decisive statement about the future. The dual
cameras on the iPhone 7 Plus promise to usher in a new era in mobile photography. The iconic iPhone
home button is no longer a physical button, but instead a sophisticated ballet of pressure sensors and
haptic vibration motors that simulate the feel of a button. The new A10 Fusion processor blends two
high-power cores that rival laptop performance with two low-power cores that combine with a much
larger battery to extend run time by up to two hours.

And, yes, Apple has removed the headphone jack.

</div>

</body>
</html>

20 | V i s u a l P r o g r a m i n g