What is XAML in WPF? Explained with Simple Examples

Image
In this article, we’ll dive into one of the core building blocks of WPF — XAML. We’ll explore how it works and why it plays such an important role in building modern desktop applications. What is XAML? XAML stands for eXtensible Application Markup Language. It’s a markup language used to design the user interface in WPF applications. XAML allows developers and designers to work separately, making the code cleaner and easier to manage. Think of it as HTML for WPF apps. XAML Syntax XAML uses XML-style syntax. Every UI element is an XML tag. Attributes define properties like height, width, and content. You can also nest elements inside others to create more complex layouts. For example, placing a TextBlock inside a Grid layout. <Grid>     <TextBlock Text="Hello, WPF World!"                 Width="200"                 Height="50"              ...

Building Your First WPF Application with C#

  • Click on File > New > Project menu option
  • one dialog box will be displayed.
  • here in left panel you have to choose c#.
  • in middle panel you have to choose WPF Application.
  • Give the project a name in the name field and click the OK button. Bydefault two files are created,one is the XAML file which is Mainwindiw.xaml and the other is the CS file which is Mainwindow.cs.
  • In mainwindow.xaml, you will see two sub-windows, one is the design window and the other one is the source window.
  • In WPF application, there are two ways to design an UI for your application. One is to simply drag and drop UI elements from the toolbox to the Design Window. The second way is to design your UI by writing XAML tags .
  • In mainwindow.xaml file, the following XAML tags are written by default.
<Window x: Class="ProjectName.MainWindow" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" Title = "MainWindow" Height = "350" Width = "604"> <Grid> </Grid> </Window>
  • Let’s go to the toolbox and drag a TextBlock to the design window inside grid.
  • When you look at the source window, you will see that Visual Studio has generated the XAML code of the TextBlock for you.
  • Now change Text property to Welcome to WPF World.
  • <TextBlock Text="Welcome to WPF World."/>
  • now if you run this program you will get the Welcome to WPF World. on your application.

Comments

Popular posts from this blog

Filter DataGrid and ListView in wpf using ICollectionView

Pagination of DataGrid in WPF using MVVM

How to Create TabControl using Prism Region