Упражнение №5 - WPF и .NET MAUI

Table of contents

Въведение

Цел на упражнението

Запознаване с WPF, неговите възможности за потребителски интерфейс и връзката му с база данни чрез Data Binding.

Задачите в упражнението изграждат:

• Малка студентска информационна система

В това упражнение:

• Десктоп приложение, което работи с база данни
• Създаване на DataGrid за визуализиране на потребители
• Работа с Bindings и XAML

Очакван резултат

Ще създадем интерфейс, който визуализира списъка с потребителите, създадени в предишните упражнения.

Задачи за домашна работа

1. Добавяне на опция за скриване на паролата чрез Binding Converter.
2. Добавяне на нов прозорец, който визуализира Logger-а.
3. Промяна на Logger-a, така че в списъка да се вижда само датата на събитието, а при двоен клик да се отваря детайлно съобщение.

Важни концепции

• WPF (Windows Presentation Foundation)
• XAML
• Data Binding
• MAUI (Multi-platform App UI)

Зареждане на проект в Visual Studio

1. Отворете Visual Studio.
2. Заредете Solution-а от предишните упражнения.
3. Създайте нов проект с име UI.

• Типът на проекта трябва да бъде WPF App (C#).

4. Добавете референция към DataLayer:

• Десен бутон върху Dependencies на UI → Add Project Reference…
• Изберете DataLayer.

Разширяване на проекта UI

Създаване на папки

1. В Solution Explorer → десен бутон върху UI → Add → New Folder.
2. Създайте следните папки:

• Windows
• Extras
• Components

Подреждане на съществуващ код

1. Преместете MainWindow.xaml в Windows.
2. Отворете App.xaml и коригирайте StartupUri:

   <Application x:Class="UI.App" StartupUri="Windows/MainWindow.xaml">

Създаване на StudentsList.xaml (Компонент)

1. Десен бутон върху Components → Add → New Item… → UserControl (WPF) → StudentsList.xaml.
2. Добавете DataGrid с Binding:

   <DataGrid Name="students" ItemsSource="{Binding}" AutoGenerateColumns="True" />

Промяна на StudentsList.xaml.cs

1. Отворете StudentsList.xaml.cs и добавете следния код:

   using System.Linq;
   using System.Windows.Controls;

   public partial class StudentsList : UserControl
   {
       public StudentsList()
       {
           InitializeComponent();
           using (var db = new DatabaseContext())
           {
               students.DataContext = db.Users.ToList();
           }
       }
   }

Връзка на StudentsList с MainWindow.xaml

1. Отворете MainWindow.xaml и добавете StudentsList в Grid:

   <local2:StudentsList x:Name="studentsList" Padding="2" />

2. Добавете WindowStartupLocation за центриране на прозореца:

   <Window Title="List of all students" WindowStartupLocation="CenterScreen">

Настройка на визуализацията на таблицата

1. Отворете StudentsList.xaml и променете DataGrid:

   <DataGrid AutoGenerateColumns="False">
       <DataGrid.Columns>
           <DataGridTextColumn Header="Username" Binding="{Binding Username}" IsReadOnly="True" />
           <DataGridTextColumn Header="Role" Binding="{Binding Role}" IsReadOnly="True" />
       </DataGrid.Columns>
   </DataGrid>

Въведение в .NET MAUI

.NET MAUI (Multi-platform App UI) е кросплатформена технология за създаване на приложения за Windows, macOS, iOS и Android.

Разлика между WPF и MAUI

Кога да използваме MAUI?

• Когато искаме едно приложение за всички платформи.
• Когато използваме модерна технология с поддръжка от Microsoft.
• Когато искаме лесно интегриране на мобилни и уеб технологии.

Инсталиране на .NET MAUI

1. Инсталирайте .NET SDK 7+.
2. В Visual Studio активирайте MAUI Workload от Tools > Get Tools and Features.

Заключение

След изпълнението на тези стъпки ще имаме WPF приложение, което работи с база данни и визуализира потребителите, като допълнително разгледахме .NET MAUI като съвременен заместител.

Бележка: В следващи упражнения ще разширим функционалността с по-сложни UI елементи и навигация.