Likes

Windows App Lab@Home 5

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)
        {
        }
    }
}









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(); 
        }
    }
}









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";
}
}

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)