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

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.

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