Add the following code to the XAML

Now with the images installed we can make some changes to the XAML code below the preview window.

This XAML code will be able to put all of the design elements for this game and we will make them interactive. The code below is the full chunk and will be explained further.

<Window x:Class="Flappy_Bird_Game.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Flappy_Bird_Game"
        mc:Ignorable="d"
        Title="Flappy Bird Game in WPF by Moo ICT" Height="490" Width="525" FocusManager.FocusedElement="{Binding ElementName=myCanvas}" KeyDown="Canvas_KeyisDown" KeyUp="Canvas_KeyisUp">

    <Canvas Name="MyCanvas" Focusable="True" Background="LightBlue">

        <Image Height="145" Width="207" Source="images/clouds.png" Canvas.Left="20" Canvas.Top="10" Tag="clouds"/>
        <Image Height="145" Width="207" Source="images/clouds2.png" Canvas.Left="300" Canvas.Top="96" Tag="clouds"/>

        <Image Height="389" Width="75" Source="images/pipeBottom.png"  Canvas.Left="107" Canvas.Top="283" Tag="obs1"/>
        <Image Height="387" Width="66" Source="images/pipeTop.png" Canvas.Left="107" Canvas.Top="-254" Tag="obs1"/>

        <Image Height="389" Width="75" Source="images/pipeBottom.png"  Canvas.Left="280" Canvas.Top="327" Tag="obs2"/>
        <Image Height="387" Width="66" Source="images/pipeTop.png" Canvas.Left="280" Canvas.Top="-182" Tag="obs2"/>

        <Image Height="389" Width="75" Source="images/pipeBottom.png"  Canvas.Left="451" Canvas.Top="224" Tag="obs3"/>
        <Image Height="387" Width="66" Source="images/pipeTop.png" Canvas.Left="451" Canvas.Top="-291" Tag="obs3"/>

        <Label Name="scoreText" FontSize="20" Content="Score: 0" />

        <Image Stretch="Fill" Name="flappyBird" Height="37" Width="50" Source="images/flappyBird.png" Canvas.Left="20" Canvas.Top="174" />

    </Canvas>
</Window>

This is the full XAML code for this flappy bird game.

Full Break Down –

Title=”Flappy Bird Game in WPF by Moo ICT” Height=”490″ Width=”525″ FocusManager.FocusedElement=”{Binding ElementName=myCanvas}” KeyDown=”Canvas_KeyisDown” KeyUp=”Canvas_KeyisUp”>

The code above is the title part of the flappy bird, inside the title we are stating that we want this window to have the title of “Flappy Bird Game in WPF by Moo ICT”. Height is 490 pixels and width is 525 pixels. Focus manager allows us to state which element in this application we want the most focus on. In this case we have a Canvas called myCanvas and we want to entire app to just focus on that element. After that tag we have key down and key up events tagged inside of it.

<Canvas Name="MyCanvas" Focusable="True" Background="LightBlue">

In the tag above we are starting the Canvas called my canvas and it will have a light blue background and set focusable to true.

<Image Height="145" Width="207" Source="images/clouds.png" Canvas.Left="20" Canvas.Top="10" Tag="clouds"/>

<Image Height="145" Width="207" Source="images/clouds2.png" Canvas.Left="300" Canvas.Top="96" Tag="clouds"/>

These two tags above are for the clouds image we will use, each of the tags will start with the image and then we declare the height and width of these images. Inside the source option we need to tell the app where this image is located. In our case we imported them into the images folder we made earlier so we can access the images easily such as images/clouds.png or images/clouds2.png

<Image Height="389" Width="75" Source="images/pipeBottom.png" Canvas.Left="107" Canvas.Top="283" Tag="obs1"/>

<Image Height="387" Width="66" Source="images/pipeTop.png" Canvas.Left="107" Canvas.Top="-254" Tag="obs1"/>

<Image Height="389" Width="75" Source="images/pipeBottom.png" Canvas.Left="280" Canvas.Top="327" Tag="obs2"/>

<Image Height="387" Width="66" Source="images/pipeTop.png" Canvas.Left="280" Canvas.Top="-182" Tag="obs2"/>

<Image Height="389" Width="75" Source="images/pipeBottom.png" Canvas.Left="451" Canvas.Top="224" Tag="obs3"/>

<Image Height="387" Width="66" Source="images/pipeTop.png" Canvas.Left="451" Canvas.Top="-291" Tag="obs3"/>

We have 3 separate sets of pipes for this game. In each set they have two pipes and they are laid out differently in this game. We have 3 groups of 2 pipes in this game and if you follow the correctly you should have the similar lay out to ours here. Notice that we have given these images tags to help us separate and animate them when the game runs. The group has a tag obs1 meaning obstacle 1 and second obs2 and third obs3. We will be using these tag names inside the C# when we are programming the logic for this game.

<Label Name="scoreText" FontSize="20" Content="Score: 0" />

<Image Stretch="Fill" Name="flappyBird" Height="37" Width="50" Source="images/flappyBird.png" Canvas.Left="20" Canvas.Top="174" />

These are last two tags for this canvas. First one is the score text label. Is a text label that’s for a big font and a name score text. We can change its value from the C# script we will make for this game. Second tag is the flappy bird picture. Add the stretch to fill the image corner to corner so it doesn’t look out of place and we also give it a name flappyBird so it can be identified later on.

With that done see below –

We are showing the indicator lines so each pipe is group together using the obs tag. This way we can keep track of where they are going and then use them to end the game or even to up the score.

If everything was put is properly you should see the window above, if this is not the case then check the XAML code and make sure you have spelled everything correctly.

To start adding events go to Page 3 from below.