Adding controls in XAML

Let's add a button control on the UI of our WPF application. To do this, open the MainPage.xaml file and inside the Grid panel, add the Button tag with its content and dimension as shown in the following highlighted code snippet and it will show you a preview in the designer view:

<Window x:Class="Demo.WPF.FirstApp.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="MainWindow" Height="350" Width="525"> 
  <Grid> 
    <Button Content="Click Here" Width="100" Height="26" /> 
  </Grid> 
</Window> 

Now, let's add some color to the button. You can either do it by writing XAML attributes for the button in the XAML view or you can utilize the Visual Studio property window from the designer view.

Let's add the color from the property window and will 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. There you will see a category labeled as 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 an appropriate foreground/text color to white. You will notice that the preview in the designer view automatically gets updated 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> 

Now, when you build and run the app, you will see a button having red background and white text color on the screen. If you click on that button, there will be no action as we have not added any event handler to it. 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 at the right corner, as shown in the following screenshot:

Here, you will find an input box labeled 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.

Alternatively, you can write Click="Button_Click" in the XAML, against the button tag to register the event first and press the F12 keyboard shortcut on the event name to generate the associated event handler in the code behind:

Now, navigate to the event handler implementation and add a message box to show 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 on the screen with the button, clicking on which will display a message: