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.

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 file 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>
"