Window App Lab@home 5

1.Sam, a Windows Store app developer, wants to create a simple piano app for children. He expects the interface of the piano to look like the one shown in the following figure. The Expected Interface of the App

Sam, a Windows Store app developer, wants to create a simple piano app for children. He expects
the interface of the piano to look like the one shown in the following figure.
The Expected Interface of the App
Sam has created the desired interface of the app.
Now, he wants to include the basic music notes in the piano. In addition, he intends to implement
certain functionality in the piano, which plays a music note when a piano button is pressed.
Help Sam create the preceding app.

Solution::::

XAML Code:

<Page
    x:Class="Piano.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Piano"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="400"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Image Grid.Row="0" Grid.Column="0" Source="Assets/Background.jpg" Stretch="UniformToFill" Margin="-2,0,2,120"/>
        <Rectangle Grid.Column="0" Height="20" Margin="0,260,0,120">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFF7F7EB" Offset="1"/>
                    <GradientStop Color="#FFEDF70D"/>
                </LinearGradientBrush>
            </Rectangle.Fill>

        </Rectangle>
        <Grid Grid.Column="0" Margin="0,280,0,0" Grid.RowSpan="3">
            <Grid x:Name="grdChordButtons" Tapped="grdChordButtons_Tapped">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Button Background="White" x:Name="C" FontSize="60" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="White" x:Name="D" FontSize="60" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="White" x:Name="E" FontSize="60" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="White" x:Name="F" FontSize="60" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="White" x:Name="G" FontSize="60" Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="White" x:Name="A" FontSize="60" Grid.Column="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="White" x:Name="B" FontSize="60" Grid.Column="6" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="White" x:Name="c" FontSize="60" Grid.Column="7" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
            </Grid>
            <Grid x:Name="grdBlackChordButtons" Height="320" VerticalAlignment="Top" Margin="95,0,86,0">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition ></ColumnDefinition>
                    <ColumnDefinition ></ColumnDefinition>
                    <ColumnDefinition ></ColumnDefinition>
                    <ColumnDefinition ></ColumnDefinition>
                    <ColumnDefinition ></ColumnDefinition>
                    <ColumnDefinition ></ColumnDefinition>
                    <ColumnDefinition ></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Rectangle Fill="Black" Width="100" Stroke="Black" StrokeThickness="2" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
                <Rectangle Fill="Black" Width="100" Stroke="Black" StrokeThickness="2" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
                <Rectangle Fill="Black" Width="100" Stroke="Black" StrokeThickness="2" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
                <Rectangle Fill="Black" Width="100" Stroke="Black" StrokeThickness="2" Grid.Column="3" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
                <Rectangle Fill="Black" Width="100" Stroke="Black" StrokeThickness="2" Grid.Column="4" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
                <Rectangle Fill="Black" Width="100" Stroke="Black" StrokeThickness="2" Grid.Column="5" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
                <Rectangle Fill="Black" Width="100"  Stroke="Black" StrokeThickness="2" Grid.Column="6" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
                <Rectangle Fill="Black" Width="100" Stroke="Black" StrokeThickness="2" Grid.Column="7" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
                <Button Background="Black" x:Name="bC" FontSize="60" Width="100" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="Black" x:Name="bD" FontSize="60" Width="100" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="Black" x:Name="bE" FontSize="60" Width="100" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="Black" x:Name="bF" FontSize="60" Width="100" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="Black" x:Name="bG" FontSize="60" Width="100" Grid.Column="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="Black" x:Name="bA" FontSize="60" Width="100" Grid.Column="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
                <Button Background="Black" x:Name="bB" FontSize="60" Width="100" Grid.Column="6" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>

            </Grid>

        </Grid>
        <MediaElement  x:Name="pianoChordPlayer" HorizontalAlignment="Left" Height="100" Margin="1084,257,0,0" VerticalAlignment="Top" Width="100" Balance="0.5" Stereo3DVideoRenderMode="Stereo" Tapped="grdChordButtons_Tapped" />
    </Grid>

</Page>

========================================================================

CS Code:

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace Piano

{

    /// <summary>

    /// An empty page that can be used on its own or navigated to within a Frame.

    /// </summary>

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

      private void grdChordButtons_Tapped(ojject sender, TappedRowtedEventArgs e)

     {

       UIelement controls = e.OriginalSource as UIElement;

       Button bttnChord = null;

       while(controls != null && controls != sender as UIElement)

        {

            if (controls isButton)

             {

               bttnChord = controls as Button;

               Break;

             }

             if (bttnChord != null)

             {

               pianoChordPlayer.Source = New Uri("ms-appx:///Assets/"+bttnChord.".wav");

               pianoChordPlayer.Play();

             }

        }

     }

        /// <summary>

        /// Invoked when this page is about to be displayed in a Frame.

        /// </summary>

        /// <param name="e">Event data that describes how this page was reached.  The Parameter

        /// property is typically used to configure the page.</param>

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        }

    }

}

2.John is developing a Windows Store app for viewing images. He has created the UI of the app, as shown in the following figure.

John is developing a Windows Store app for viewing images. He has created the UI of the app, as
shown in the following figure.
The UI of the App
Now, he has to add the functionalities to the app so that:
The users are able to select an image from the Image List section.
Once the user selects the image from the Image List section, the preview of the selected image
is displayed in the Image Preview section.
The preview of the selected image uniformly fits in the defined area.
Help John to add the preceding functionalities to the app.

Solution::::

XAML Code:

<Page
    x:Class="ImageViewer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImageViewer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Viewbox>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button Content="Image List" HorizontalAlignment="Left" Margin="10,10,0,0" BorderThickness="0" FontSize="24" Background="Blue" VerticalAlignment="Top" Width="315"/>
            <ListBox  HorizontalAlignment="Left" Height="697" Margin="10,61,0,0" VerticalAlignment="Top" Width="315" SelectionChanged="IstBoxPictureList_SelectionChanged"/>

            <Button Content="Image Preview"  HorizontalAlignment="Left" Margin="346,10,0,0" BorderThickness="0" FontSize="24" Background="Blue" VerticalAlignment="Top" Width="1010"/>
            <Button IsEnabled="False" HorizontalAlignment="Left" Height="697" Margin="346,61,0,0" VerticalAlignment="Top" Width="1010">
                <Image x:Name="Imgpreview" Source="Assets/1.jpg" Stretch="Uniform"></Image>
            </Button>


        </Grid>
    </Viewbox>

</Page>

========================================================================

CS Code:

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

using Windows.UI.Xaml.Media.Imaging;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace ImageViewer

{

    /// <summary>

    /// An empty page that can be used on its own or navigated to within a Frame.

    /// </summary>

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }

         public void loadPictureList()

        {

         if(int i=1; i<9; i++)

           {

            IstboxPictureList.Iteme.Add(1 + ".jpg");

           }

           IstboxPictureList.SelectedIndex = 0;

         }

        private void IstboxPictureList_SeletionChanged(object sender, SeletionChanged e)

        {

         imgPrivate.Sourcr = New BitmapImage(New Uri("ms-appx:///Assers/"+ lstboxPictureList.SelectedValue));

        }

        /// <summary>

        /// Invoked when this page is about to be displayed in a Frame.

        /// </summary>

        /// <param name="e">Event data that describes how this page was reached.  The Parameter

        /// property is typically used to configure the page.</param>

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

           loadPictureList(); 

        }

    }

}

3.William works as a Windows Store app developer at WegaApps Co. He has a new assignment for creating a basic paint app.

William works as a Windows Store app developer at WegaApps Co. He has a new assignment for
creating a basic paint app.
The paint app should have the following features:
Paint area: A full screen area for drawing lines and shapes.
Drawing toolbar: A toolbar that allows drawing an ellipse, a rectangle, and a straight line. In
addition, the toolbar should contain a button for clearing the screen.
Color toolbar: A toolbar that allows selecting a color for stroke and fill of the shapes with the
help of the various color buttons. In addition, a toggle button allows to switch between the stroke
and fill colors. To select a stroke/fill color, first the toggle button needs to be clicked, and then a
color needs to be selected by clicking a color. Further, the app allows the user to change the
stroke thickness from 1 to 100.
Both the toolbars should be displayed to the user on demand.
The interface of the app should look like the one shown in the following figure.
The Expected Interface of the App
Help William accomplish the preceding task.

Solution::::

XAML Code:

<AppBar n:Name="appBarColors" HorizontalAlignment="Right" Background="Black" Width="1250">
<GridView SelectionMode="None" Tapped="1boxColors_Tapped" x:Name="1boxColors" HorizontalAlignment="Center" Width="1250">
VerticalAlignment="Center" Background="Black" ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="10,0,7,210"

<Button Background="Aqua" Heigh="300" Width="300"></Button>
<Button Background="Black" Heigh="300" Width="300"></Button>
<Button Background="Blue" Heigh="300" Width="300"></Button>
<Button Background="Chocolate" Heigh="300" Width="300"></Button>
<Button Background="Crimson" Heigh="300" Width="300"></Button>
<Button Background="Cyan" Heigh="300" Width="300"></Button>
<Button Background="DarkGreen" Heigh="300" Width="300"></Button>
<Button Background="DarkMagenge" Heigh="300" Width="300"></Button>
<Button Background="DarkOrange" Heigh="300" Width="300"></Button>
<Button Background="DarkRad" Heigh="300" Width="300"></Button>
<Button Background="ForestGreen" Heigh="300" Width="300"></Button>
<Button Background="Fuchsia" Heigh="300" Width="300"></Button>
<Button Background="Gold" Heigh="300" Width="300"></Button>
<Button Background="Gray" Heigh="300" Width="300"></Button>
<Button Background="Green" Heigh="300" Width="300"></Button>
<Button Background="GreenYellow" Heigh="300" Width="300"></Button>
<Button Background="HotPink" Heigh="300" Width="300"></Button>
<Button Background="Indigo" Heigh="300" Width="300"></Button>
<Button Background="LavenderBlush" Heigh="300" Width="300"></Button>
<Button Background="LightBlue" Heigh="300" Width="300"></Button>
<Button Background="LightPink" Heigh="300" Width="300"></Button>
<Button Background="Lime" Heigh="300" Width="300"></Button>
<Button Background="LimeGreen" Heigh="300" Width="300"></Button>
<Button Background="Magenta" Heigh="300" Width="300"></Button>
<Button Background="Maroon" Heigh="300" Width="300"></Button>
<Button Background="OrangeRed" Heigh="300" Width="300"></Button>
<Button Background="Pink" Heigh="300" Width="300"></Button>
<Button Background="Purple" Heigh="300" Width="300"></Button>
<Button Background="Red" Heigh="300" Width="300"></Button>
<Button Background="RosyBrown" Heigh="300" Width="300"></Button>
<Button Background="RoyalBlue" Heigh="300" Width="300"></Button>
<Button Background="SandyBrown" Heigh="300" Width="300"></Button>
<Button Background="Silver" Heigh="300" Width="300"></Button>
<Button Background="SkyBlue" Heigh="300" Width="300"></Button>
<Button Background="Tomato" Heigh="300" Width="300"></Button>
<Button Background="Violet" Heigh="300" Width="300"></Button>
<Button Background="White" Heigh="300" Width="300"></Button>
<Button Background="Yellow" Heigh="300" Width="300"></Button>
<Button Background="YellowGreen" Heigh="300" Width="300"></Button>

<ToggleButton Background="Blue" x:Name="tglBtnStrokeFill" Content="Stroke" FontSize="70" Tapped="tglBtnStrokeFill_Tapped" Wigth="300" Height="300"/>
<Slider x:Name="sldrstrokeThickness" Orientation="Vertical" Minimum="1" Maximum="100" Height="250" ValueChanged="sldrStrokeThickness_ValueChanged"/>
<TextBlock Text="Thickness" FontSize="70" Height="300" Width="300"/>
</GridView>
</AppBar>

========================================================================

CS Code

privare void 1boxColors_Tapped(object sender, TappedRoutedEventArgs e)
{
UIElement controls = e.OriginalSource as UIElement;
while (controls != null && controls !=sender as UIElement)
{
if (controls is Button)
{
Button bttn = controls as Button;
if (tglBtnStrokeFill.Content.ToString() == "Stroke")
strokeColor = (SolidColorBrush) bttn.Background;
else
fillColor = (SolidColorBrush)bttn.Background;
break;
}
controls  = VisulTreeHelper.GetParent(controls) as UIElement;
}
}
private void tglBtnStrokeFill_Tapped(object sender, TappedRoutedEventArgs e)
{
if (tglBtnStrokeFill.Content.ToString() == "Stroke")
{
tglBtnStrokeFill.Content = "Fill";
}
else
{
tglBtnStrokeFill.Content = "Stroke";
}
}

Read More »

Window App Lab@home 3

1.Steve has to develop a windows Store app for displaying the various dishes available in a restaurant. The expected interfece of the app is shown in the following figure.

1. Steve has to develop a windows Store app for displaying the various dishes available in
   a restaurant. The expected interfece of the app is shown in the following figure.

Solution::::

(XAML Code)

      <Grid Background="#FFD007F0">
          <ListView x:Name="lst" HorizontalAlignment="Left" Height="688" Margin="64,46,0,0" VerticalAlignment="Top" Width="337" FontSize="24" SelectionChanged="lst_SelectionChanged">
      
          </ListView>
          <Viewbox>
              <StackPanel x:Name="stk" Orientation="Vertical" Margin="722,10,100,34" Width="458">
                  <Image X:Name="img" Source="" HorizontalAlignment="Left" Margin="20,20,0,20" VerticalAlignment="Top"/>

    ======================================================================


(CCS Code)


     Privete void lst_SelectionChanged(object sender, SelectionChangedEventArgs)
      {
           if (lst.SelectedItem.ToString()=="Burger")
           {
               img.Source = new BitmapImage(New Uri("as-appx:///Assets/Burger.jpg"));
               head.Text = "Burger";
               para.Text = "Fresh juicy ham burgers at a pocket-friendly price of";
           }
           else if (lst.SelectedItem.ToString()=="Cheese Sandwich")
           {
              
               img.Source = new BitmapImage(New Uri("as-appx:///Assets/Cheese Sandwich.jpg"));
               head.Text = "Cheese Sandwich";
               para.Text = "Mouth-watering Cheese Sandwichs at a price of 2$";
           }
           else if (lst.SelectedItem.ToString()=="Noodles")
            {
              
               img.Source = new BitmapImage(New Uri("as-appx:///Assets/Noodles.jpg"));
               head.Text = "Noodles";
               para.Text = "Traditional Asian Noodles at a price of 3$";
           }
            else if (lst.SelectedItem.ToString()=="pasta salad")
            {
              
               img.Source = new BitmapImage(New Uri("as-appx:///Assets/Pasta salad.jpg"));
               head.Text = "Pasta salad";
               para.Text = "Zesty summary Pasta salad at a very low price of 2$";
           }
             else if (lst.SelectedItem.ToString()=="Pizze")
             {
              
               img.Source = new BitmapImage(New Uri("as-appx:///Assets/Pizze.jpg"));
               head.Text = "Pizze";
               para.Text = "Lip amacking classic Pizze at a rate of 5$";
           }
      }

 2.Sam,a Windows store app developer, wants to create a simple app for children. He expects the interface of the piano to look

 like the one shown in following figure.

2. sam,a Windows store app developer, wants to create a simple app for children. He expects
   the interface of the piano to look like the one shown in following figure.

Solution::::

(XAML Code)


      <Grid.RowDefinitions>
        <RowDefinition height="400"></RowDefinition>
        <RowDefinition height=""></RowDefinition>
      <Grid Grid.Column="0" margin="0,280,0,0" Grid.RowSpan="3">
       <Grid X:Name="grdChordButtons" Tapped="grdChordButtons_Tapped">
           <Grid.RowDefinitions>
             <RowDefinition></RowDefinition>
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
             <ColumnDefinition></ColumnDefinition>
             <ColumnDefinition></ColumnDefinition>
             <ColumnDefinition></ColumnDefinition>
             <ColumnDefinition></ColumnDefinition>
             <ColumnDefinition></ColumnDefinition>
             <ColumnDefinition></ColumnDefinition>
             <ColumnDefinition></ColumnDefinition>
             <ColumnDefinition></ColumnDefinition>
             </Grid.ColumnDefinitions>
             <Button Background="White" x:Name="C" fontSize="60" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
             <Button Background="White" x:Name="D" fontSize="60" Grid.Column="1"HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
             <Button Background="White" x:Name="E" fontSize="60" Grid.Column="2"HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
             <Button Background="White" x:Name="F" fontSize="60" Grid.Column="3"HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
             <Button Background="White" x:Name="G" fontSize="60" Grid.Column="4"HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
             <Button Background="White" x:Name="A" fontSize="60" Grid.Column="5"HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
             <Button Background="White" x:Name="B" fontSize="60" Grid.Column="6"HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
             <Button Background="White" x:Name="C" fontSize="60" Grid.Column="7"HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0"></Button>
         </Grid>
         <Grid x:Name="grdBlackChordButtons" Height="320" VerticalAlignment="Top" Margin="95,0,86,0" Tapped="grdBlackChordButtons_Tapped">
         <Grid.RowDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>


========================================================================


(CCS Code)

    privete void grdChordButtons_Tapped(object sender, TappedRoutedEventArgs e)
    {
       UIElement controls = e.OriginalSource as UIEement;
       Button bttnChord = null;
       While (controls != null && controls !=sender as UIEement)
    }
        if(controls is Button)
         {
             bttnChord = controls as Button;
             break;
         }
         controls = VisualTreeHelper.GetParent(controls) as UIEement;
    }
     if (bttnChord !=null)
    {
     PianoChordPlayer.Source new Uri("as-appx:///Assets/" + bttnChord.Name + "wav");
     PianoChordPlayer.Play();
    }
}

privete void grdChordButtons_Tapped(object sender, TappedRoutedEventArgs e)
    {
       UIElement controls = e.OriginalSource as UIEement;
       Button bttnChord = null;
       While (controls != null && controls !=sender as UIEement)
    }
        if(controls is Button)
         {
             bttnChord = controls as Button;
             break;
         }
         controls = VisualTreeHelper.GetParent(controls) as UIEement;
    }
     if (bttnChord !=null)
    {
     string bttnName = bttnChord.Name;
     PianoChordPlayer.Source new Uri("as-appx:///Assets/" + bttnChord.Name + "wav");
     PianoChordPlayer.Play();
    }
} 

3.Rhea has designeed an app that should convet the temperature specified in Celsius to the corresponding temperature in Fahrenheit and vice versa. The interface of the app is shown in the following figure.

3. Rhea has designeed an app that should convet the temperature specified in Celsius to the
   corresponding temperature in Fahrenheit and vice versa. The interface of the app is shown in the
   following figure.

Solution::::

 (XAML Code)
  
       <Viewbox>
         <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Height="900" Width="1600">
         <TextBlock Text="Celsius" FontSize="100" margin="122,122,1002,668"></Textbox>
         <TextBox X:Name="txtDegreeCelsius" FontSize="70" Margin="122,257,121,654" KeyUp="tetDegreeCelsius_KeyUp"></TextBox>
         <TextBlock Text="Fahreenheit" FontSize="100" margin="122,463,931,326"/>
         <TextBox X:Name="txtDegreeFahreenheit" FontSize="70" Margin="122,257,121,209"KeyUp="tetDegreeFahrenheit_KeyUp"/>
     </Grid>
========================================================================
      
(CCS Code)

       Privete void txtDegreeCelsius_KeyUp(object sender, KeyRoutedEventArgs e)
        {
            try
             {
                 if (!string.IsNullOrEmpty(txtDegreeCelsius.Text.Trim()))
                     txtDegreeFahreheit.Text = (Convert.Todouble(txtDegreeCelsius.Text.Trim()))
                 else
                     txtDegreeFahrenheit.Text = "";
             }
             catch (Exception ex)
             {
                  txtDegreeFahrenheit.Text = "Invalid input";
             }
        }
      
     
       Privete void txtDegreeCelsius_KeyUp(object sender, KeyRoutedEventArgs e)
        {
            try
             {
                 if (!string.IsNullOrEmpty(txtDegreeCelsius.Text.Trim()))
                     txtDegreeFahreheit.Text = (Convert.Todouble(txtDegreeCelsius.Text.Trim()))
                 else
                     txtDegreeFahrenheit.Text = "";
             }
             catch (Exception ex)
             {
                  txtDegreeFahrenheit.Text = "Invalid input";
             }
        }

4.John is developing a windows store Store app for viewing images. He has created the UI of the app, as shown in the following figure.

John is developing a windows store Store app for viewing images. He has created the UI of the app,
   as shown in the following figure.


Solution::::


(XAML Code)


     <ViewBox>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Content="Image List" HorizontalAlignment="Left" Mergin="10,10,0,0" BorderThickness="0" FontSize="24" Backround="Blue" VerticalAlignment="Top" Width="315"/>
                <ListBox N:Name="IstboxPictureList" HorizontalAlignment="Left" Height="697" Margin="10,61,0,0"  VerticalAlignment="Top" width="315" SelectionChanged="IstboxPictureList_SelectionChanged"/>

                <Button Content="Image Preview" HorizontalAlignment="Left" Mergin="346,10,0,0" BorderThickness="0" FontSize="24" Background="Blue"  VerticalAlignment="Top" Width="1010"/>
            <Button IsEnabled="False" HorizontalAlignment="Left" Height="697" Margin="346,10,0,0"  VerticalAlignment="Top" Width="1010" />
        <Image x:Name="imgPreview" Source="Assets/1.jpg"  Stretch="Uniform"></Image>
        </Button>
    </ViewBox>


========================================================================
(CCS Code)


using Windows.UI.Xaml.Media.Imaging;


/// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

private void InitializeComponent()
{
  throw new NotImplementedException();
}

        public void loadPictureList();
    {
        for (int i=1; i < 9; i++)
    {
        IstboxPictureList.SelectedIndexz = 0;
    }
    }
   ///////////////     private void IstboxPictureList_selectionChanged(object, SelectionChangedEventArgs);
    {
        imgPreview.Source = new BitmapImage("as-appx:///Assets/"+lst)
    }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
loadPictureList();
        }
    }
}

Read More »

Window App Lab@home 2

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

2.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 />

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

4.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/>

Read More »

Window App Lab@ home 1

1.Ultima Computers is a company with a reputation of providing quality financial software products. Having consistently made profits for the past five years, the company is diversifying into other areas.

Ultima Computers is a company with a reputation of providing quality financial software products.

Having consistently made profits for the past five years, the company is diversifying into other
areas. 

Ultima acquires a project from Sunny Hills Resorts, a company that owns and operates
resorts globally.
Sunny Hills Resorts wants Ultima to develop a web-based payroll application. Therefore, the
systems analyst of Ultima gathers the requirements from the Assistant Vice-President (Finance) at
Sunny Hills. The developers at Ultima apply their experience of developing financial software to
the development of the new product. The application is developed before the deadline, and it is
found to be bug-free during the internal testing. Further, the application is deployed over the
Internet so that the users from all the branches of Sunny Hills Resorts can access it.
After the initial use, the following feedback comes in from all branches of Sunny Hills:
The site can be viewed properly at most of the workstations in the company. However, several
old computers in remote branches do not display the Web pages in their entirety. The
investigation reveals that some computers can only support a 640x480 resolution. Because the
website was built with an assumption that computers supporting an 800x600 resolution would be
available, the pages on the website did not fit into the display area of the monitors.
The same old computers were found to be able to support only 16 colors. Because the color
palette used for building the site had 216 colors, colors appear frayed on these computers.
Users in many branches have complained that each page on the website takes two to five
minutes to load. Investigations reveal that 75 percent of the branches have a bandwidth of less
than 128 kbps, and there are several users, who often share the link during the day.
Most users of the application are unable to find the information related to leave data of the
employees. The few users who did find the link had to go through five screens to reach it.
Many users have said that they could never identify the buttons and links, which are active, and
the ones, which are inactive. As a result, they click the buttons and links repeatedly until they get
frustrated and give up.
To resolve these issues, Ultima has to rework to design a more user-friendly application. The
project cost increases by 50 percent and Ultima faces a heavy loss.
Identify the possible causes behind the problems in the application. In addition, state the problems
and justify how these problems could have been averted.

  

Solution:::::::::::::

The following table describes the problems in the application and their causes.

Problem	Cause
Difficulty in viewing the Web pages in entirety.	The possibility of a low screen resolution on the client monitor was not considered while designing the interface. If this possibility were considered, the Web pages in the site could have been viewed in entirety.
Appearance of frayed colors on the monitors	The infrastructure limitation was not considered while designing the application, which was designed by using a 216-color palette. In the case of applications that provide graphical user interface, it is wise to use the color palette in such a way that the colors do not appear frayed.
High download time for pages in remote locations	Bandwidth problems were not considered at the time of designing the website. While designing a website for areas with low bandwidth, the designer should ensure that the page does not contain many colors and graphics, which can make the page heavy to load.
Inaccessibility of functionalities	In the requirement analysis phase, the end users were not involved and their requirements were not gathered. In addition, the interaction was not designed in a way that could have helped users access the key functionalities on the home page or with 2-3 clicks.
User frustration due to repetitive clicks	The application does not disable the buttons or links that are not active at a particular point of time, thereby misleading the users to click them repetitively. Moreover, it does not give any feedback to the users if they click an inactive link or a button or not.

The Problems in the Application and Their Causes

To avoid the preceding problems, a systematic interaction design process should have been followed. The end users of the application should have been involved in all the phases of the development process. In addition, the requirements should have been gathered by studying the current system of the organization.

2.BookTreasure Inc. is a huge library containing more than 1 million books and more than 1000 members. Managing the records of these books and members manually is becoming a difficult task

BookTreasure Inc. is a huge library containing more than 1 million books and more than 1000
members. Managing the records of these books and members manually is becoming a difficult
task. Therefore, the management of library wants to automate the library management system.
The automated system should allow the members of the library to search a specific book and
check its availability by using an online catalogue. The system should also allow the library staff to
accomplish the following tasks:
Issue a book
Return a book
Add a member
Remove a member
Add a book
Remove a book
Generate reports
While developing the preceding application, Jim Brown, an application developer, divides the
application in the following modules:
Search for a book
Issue a book
Return a book
Add a book to the library database
Further, he creates the following interaction designs for the preceding modules:
Search for a book module.
The Interaction Design for the Search for a Book Module
Issue a Book module.
•
•
The Interaction Design for the Issue a Book Module
Return a Book.
The Interaction Design for the Return a Book Module
Add a Book module.
The Interaction Design for the Add a Book Module
Analyze the preceding designs and identify the problems. Further, suggest solutions for the
identified problems.

Solution::::

DOWNLOAD from here:

CLICK HERE

Read More »