Windows App Lab@Home 2

Philip has been assigned the task to develop a gaming app that asks random questions to the user. In addition, the app displays a grid containing letters, as shown in the following figure.

Philip has been assigned the task to develop a gaming app that asks random questions to the
user. In addition, the app displays a grid containing letters, as shown in the following figure.
The Expected UI of the Gaming App
To mark an answer, the user needs to click the alphabets that form the answer, and then click the
SUBMIT button.
Before proceeding with the development of the fully functional app, Philip wants to get an approval
for the UI of the app. Therefore, he plans to create the UI of the app.
Help Philip to develop the expected UI of the app.

Solution;

<TextBlock x:Name="txtblkResult" HorizontalAlignment="Center" FontSize="50"/>
<ToggleButton Content="K" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="I" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="T" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="E" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="G" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="A" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="N" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="L" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="S" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="M" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="B" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="S" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="S" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="C" Width="173" FontSize="60" Background="Blue" BorderThick/>
<ToggleButton Content="Y" Width="173" FontSize="60" Background="Blue" BorderThick/>

<Button Content="SUBMIT" Width="529" FontSize="60" Background="BlueViolet"/>

Susan has recently joined as a UI designer at InfoPath Solutions. She has been allocated a task to create an app.

Susan has recently joined as a UI designer at InfoPath Solutions. She has been allocated a task to
create an app. This app should display an image on the interface and allow the user to zoom in or
zoom out the image with the help of a slider. When the image is zoomed in, it should be displayed,
as shown in the following figure.
The Zoomed In View of the Image
However, when the image is zoomed out, it should be displayed, as shown in the following figure.
The Zoomed Out View of the Image
As an initial step, Susan has to develop the UI of the app. Help Susan to accomplish the task.

Solution;
XAML CODE

<Image x:Name="imgContainter" NorizontalAlignment="Center" Meight="100"  VerticalAlignmen/>

<slider x:Name="sldr" HorizontalAlignment="Left" Margin="25,695,0,0" VerticalAlignment />

Kristin is working as a UI Designer at GlobalTech Inc. She has been assigned the task to design the UI of a Calculator app, which should appear, as shown in the following figure.

Kristin is working as a UI Designer at GlobalTech Inc. She has been assigned the task to design
the UI of a Calculator app, which should appear, as shown in the following figure.
The Expected UI of the Calculator App
Help Kristin to accomplish the preceding task.

Solution;

XAML CODE

<Button Content="7" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="8" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="9" Width="173" FontSize="60" Background="Blue" BorderThick/>
                
<Button Content="4" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="5" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="6" Width="173" FontSize="60" Background="Blue" BorderThick/>
                
<Button Content="1" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="2" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="3" Width="173" FontSize="60" Background="Blue" BorderThick/>

<Button Content="." Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="0" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="Clear" Width="173" FontSize="60" Background="Blue" BorderThick/>
        
<Button Content="+" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="-" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="*" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="/" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="?" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="1/x" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="+_" Width="173" FontSize="60" Background="Blue" BorderThick/>
<Button Content="=" Width="173" FontSize="60" Background="Blue" BorderThick/>

<TextBlock x:Name="txtlkResult" HorizontalAlignment="Center" FontSize="80"/>

Parker has recently started learning Windows Store apps development. He has learned creating UI of apps by adding UI elements.

Parker has recently started learning Windows Store apps development. He has learned creating
UI of apps by adding UI elements. Now, he has been assigned a task to develop the UI of the
Registration page. The UI of the app will contain the following fields:
User name
First name
Last name
Password
Confirm password
Date of birth
Gender
Receive notifications through email
Accept terms and conditions
In addition, the Register button should be provided on the interface. After adding the UI elements,
the UI should appear, as shown in the following figure.
The Expected UI of the Registration Page
Help Parker to accomplish the preceding task.


Solution;

XAML FILE

<TextBlock HorizontalAignment="Left" Margin="96,103,0,0" Text="User Name" VerticalAlignment/>
<TextBlock HorizontalAignment="Left" Margin="96,103,0,0" Text="First Name" VerticalAlignment/>
<TextBlock HorizontalAignment="Left" Margin="96,103,0,0" Text="Last Name"VerticalAlignment/>
<TextBlock HorizontalAignment="Left" Margin="96,103,0,0" Text="Password" VerticalAlignment/>
<TextBlock HorizontalAignment="Left" Margin="96,103,0,0" Text="Confirm Password" VerticalAlignment/>
<TextBlock HorizontalAignment="Left" Margin="96,103,0,0" Text="Date of Birth" VerticalAlignment/>
<TextBlock HorizontalAignment="Left" Margin="96,103,0,0" Text="Gender" VerticalAlignmen/>
<TextBlock HorizontalAignment="Left" Margin="96,103,0,0" Text="Receive notifications through email" VerticalAlignment/>
<TextBlock HorizontalAignment="Left" Margin="96,103,0,0" Text="Accept terms and conditions" VerticalAlignment/>
<PasswordBox Margin="585,303,0,0"HorizontalAlignment="Left"VerticalAlignment/>
<PasswordBox Margin="585,303,0,0"HorizontalAlignment="Left"VerticalAlignment/>
<ComboBox HorizontaiAlignment="Left" Margin="585,353,0,0" VerticalAlignment  />
<ComboBox HorizontaiAlignment="Left" Margin="762,353,0,0" VerticalAlignment/>
<ComboBox HorizontaiAlignment="Left" Margin="939,353,0,0" VerticalAlignment/>
<ToggleSwitch HorizontailAlignment="Left" Margin="585,441,0,0"VerticalAlignment/>
<CheckBox HorizontaiAlignment="Left" margin="585,503,0,0"VerticalAlignment/>                                                                                       
<RadioButton content="Male" HorizontalAlignment="Left" margin="585,403,0,0" verticalAlignment/>

<RadioButton content="Female" HorizontalAlignment="Left" margin="681,553,0,0" verticalAlignment/>