UWP Development, Structure of XAML Sentences

XAML (Extensible Application Markup Language) plays a crucial role in defining user interfaces in UWP (Universal Windows Platform) development. XAML is an XML-based markup language that has also been used in WPF (Windows Presentation Foundation) and Silverlight. In this article, we will detail the components of XAML sentences and how they are utilized in UWP.

Basic Concepts of XAML

XAML allows you to declaratively define the elements that make up the UI. By using XAML, you can manage the visual structure and behavior of the UI separately from the code, making it easier to handle. In this process, each element related to the UI is represented as an object, and its style and behavior can be specified through various properties.

Structure of XAML Files

XAML files have the following format:

<Page
        x:Class="YourNamespace.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:YourNamespace"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">

    <Grid>
        <TextBlock Text="Hello, UWP!" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

    </Page>

Components of XAML Sentences

XAML sentences are primarily composed of the following components:

1. Tags: A XAML sentence consists of XML tags. Each UI element is declared with its corresponding tag.

   <Button Content="Click Me!" />

2. Attributes: Each element has various attributes. You can define the element’s color, size, position, and more through attributes.

   <TextBlock Text="Hello" FontSize="16" Foreground="Blue" />

3. Namespaces: Each UI element used in XAML belongs to a specific namespace. Namespaces allow you to identify and use these elements.

Example: Structure of a XAML Document

Here is an example of a simple UWP application’s XAML file.

<Page
        x:Class="MyApp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MyApp">

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <TextBlock Text="Welcome to UWP Development!" 
                       FontSize="30" 
                       HorizontalAlignment="Center" 
                       VerticalAlignment="Center" 
                       Foreground="DarkBlue"/>
            <Button Content="Click Me" Width="100" Height="50" 
                    HorizontalAlignment="Center" VerticalAlignment="Bottom"
                    Click="Button_Click"/>
        </Grid>

    </Page>

Event Handling

UI elements defined in XAML can handle events behind the scenes in C# code. For example, here is how you can handle the button click event in the above example.

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Code to execute when the button is clicked
    var dialog = new MessageDialog("The button has been clicked!");
    await dialog.ShowAsync();
}

XAML Design Patterns

When using XAML, it is common to apply the MVVM (Model-View-ViewModel) design pattern. Using the MVVM pattern increases code reusability and maintainability by separating the UI from the business logic.

Components of MVVM

The MVVM design pattern consists of three main components:

• Model: Responsible for the application’s data and business logic.
• View: The user interface, defined through XAML.
• ViewModel: Mediates interaction between the View and Model, using data binding to update the View.

Example: Implementing MVVM

Here is a simple example following the MVVM pattern.

public class MainViewModel : INotifyPropertyChanged
{
    private string _welcomeMessage;

    public string WelcomeMessage
    {
        get { return _welcomeMessage; }
        set
        {
            _welcomeMessage = value;
            OnPropertyChanged(nameof(WelcomeMessage));
        }
    }

    public MainViewModel()
    {
        WelcomeMessage = "Welcome to UWP with MVVM!";
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Data Binding in XAML

Here is how to connect the ViewModel defined above with XAML.

<Page.DataContext>
    <local:MainViewModel />
    </Page.DataContext>

    <TextBlock Text="{Binding WelcomeMessage}" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Conclusion

XAML is a powerful tool for defining user interfaces in UWP development. In this article, we have explored the basic components of XAML sentences, event handling, and data binding methods through the MVVM design pattern. Based on this foundational knowledge, we hope to assist you in creating more complex applications using XAML in UWP development.

We will continue to cover various XAML-related features and advanced techniques, so please stay tuned!