Xaml | Gui Development | Csharp Tutorial

Introduction to XAML

XAML (eXtensible Application Markup Language) is a declarative XML-based language used for initializing structured values and objects. It is primarily used in .NET for developing user interfaces in WPF (Windows Presentation Foundation), UWP (Universal Windows Platform), and Xamarin.Forms.

Basic Syntax

XAML is a markup language similar to HTML. It consists of elements, attributes, and properties.

<Window x:Class="WpfApp.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 Me" Width="100" Height="50" />
    </Grid>
</Window>

Common Controls

XAML provides a variety of controls such as Button, TextBox, and ListBox. Here are some examples:

<Window x:Class="WpfApp.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>
        <StackPanel>
            <TextBox Width="200" Height="30" />
            <Button Content="Submit" Width="100" Height="30" />
            <ListBox Width="200" Height="100">
                <ListBoxItem Content="Item 1" />
                <ListBoxItem Content="Item 2" />
            </ListBox>
        </StackPanel>
    </Grid>
</Window>

Data Binding

Data binding in XAML allows you to connect UI elements to data sources, such as properties, lists, or databases.

<Window x:Class="WpfApp.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">
    <Window.DataContext>
        <local:ViewModel />
    </Window.DataContext>
    <Grid>
        <TextBox Text="{Binding Name}" Width="200" Height="30" />
    </Grid>
</Window>

Event Handling

In XAML, you can handle events by defining event handlers in the code-behind file.

<Window x:Class="WpfApp.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 Me" Width="100" Height="50" Click="Button_Click" />
    </Grid>
</Window>

In the code-behind file (MainWindow.xaml.cs):

using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Button Clicked!");
        }
    }
}

Styles and Templates

Styles and templates allow you to define the look and feel of UI elements in XAML.

Example of a Style:

<Window x:Class="WpfApp.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">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightBlue" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Styled Button" Width="100" Height="50" />
    </Grid>
</Window>

Conclusion

This tutorial provided a comprehensive introduction to XAML, covering its basic syntax, common controls, data binding, event handling, and styles. XAML is a powerful tool for building rich user interfaces in .NET applications, and mastering it can greatly enhance your GUI development skills.

XAML Tutorial