Every application needs some kind of UI so that the user can interact with the application easily. In WPF, you can add various controls to create your application's UI. As we have already created our first WPF project and become familiar with the project structure and XAML designer, let's add a button control on the UI, as follows:

1. To do this, open MainPage.xaml and, inside the Grid panel, add the Button tag with its content and dimensions, as shown in the following screenshot:

 Once this is done, the UI will show you a preview in the designer view.

2. Now, let's add some color to the button. You can either do this by writing XAML attributes for the button in the XAML view, or you can utilize the Visual Studio property window from the designer view.
3. Let's add the color from the Properties window and we'll see how the Visual Studio editor adds the XAML attributes. To do this, select the button in the designer view and open the Properties window. Here, you will see a category called Brush. Under this, you will be able to change the color of the selected UI element. First, select the Background and move the color slider to select red. Then, select Foreground and choose the color white. You will notice that the preview in the designer view automatically updates with the selected colors:

Here's the XAML code for your reference:

<Grid> 
    <Button Content="Click Here" Width="100" Height="26"  
            Background="Red" Foreground="#FFEEE5E5" /> 
</Grid>

4. Now, when you build and run the app, you will see a button with a red background and white-colored text on the screen. If you click on that button, there will be no action, as we have not added any event handler to it.
5. To do this, go to the design view, select the button control, navigate to the Properties window, and click on the Navigate Event Handler icon present in the right-hand corner, as shown in the following screenshot:

6. Here, you will find an input box called Click. Double-click on it to create the click handler of the button in the associated code file and register it in the XAML page.
7. Alternatively, you can write Click="Button_Click" in the XAML against the Button tag to register the event first, and then press the F12 keyboard shortcut on the event name to generate the associated event handler in the backend code.
8. Now, navigate to the event handler implementation and add a message box to be shown when you click on the button:

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
    MessageBox.Show("Hello WPF Message Box"); 
} 

Let's build and run the code. If the build succeeds, it will show you the following window onscreen with the button. Clicking on the button will show you this message:

As you are now comfortable with adding controls to the application window and customizing the controls, let's jump into the next section to explore the various layouts that are available in WPF.