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)

        {

        }

    }

}