Создание нового проекта
Создайте новый проект «Приложение WPF» и назовите его «Users». Это имя подходит, поскольку приложение будет включать регистрацию, авторизацию и личный кабинет пользователя, а также стильный дизайн.
Добавление библиотеки Material Design
Для упрощения процесса дизайна и улучшения результата, добавим библиотеку Material Design.
- В обозревателе решений щелкните правой кнопкой мыши по проекту и выберите «Управление пакетами NuGet».
- На вкладке «Обзор» найдите библиотеку MaterialDesignThemes.
- Установите библиотеку, нажав кнопку «Установить». При появлении уведомления, нажмите «Больше не показывать» и «OK».
После установки, откройте файл App.xaml и добавьте код подключения библиотеки из официальной документации Material Design (найдите её через поиск в Google «WPF Material Design») в раздел <Application.Resources>. Сохраните файл (Ctrl+S).
Настройка дизайна в XAML
Подключение библиотеки в окне
В файле MainWindow.xaml укажите использование библиотеки Material Design. Можно скопировать соответствующую строку из файла App.xaml.
Размеры и заголовок окна
Установите размеры окна: высота – 600 пикселей, ширина – 1000 пикселей. Заголовок окна измените на «Приложение для пользователей». Цвет фона выберите с помощью сервиса подбора цветов (например, colors.ru или онлайн-инструменты Google по запросу «color picker») или используйте готовый HEX-код (#<шестнадцатеричный код>).
Центральная панель
Создайте центральную панель с помощью элемента <Border>. Для адаптивности используйте свойства MinWidth (например, 400 пикселей) и MaxWidth (например, 550 пикселей). Добавьте внешние отступы (Margin) – 15 пикселей со всех сторон, внутренние отступы (Padding) – 30 пикселей, задний фон (Background) – белый (#FFF или White), вертикальное выравнивание (VerticalAlignment="Center") и скругленные углы (CornerRadius, например, 20 пикселей).
Добавление тени
Добавьте тень с помощью <Border.Effect>, <DropShadowEffect>. Настройте параметры: BlurRadius (например, 30 пикселей), Color (например, LightGray), ShadowDepth (например, 0).
Размещение элементов
Используйте <StackPanel> для вертикального размещения элементов внутри панели. Добавьте заголовок с помощью <TextBlock>: текст, размер шрифта (например, 30 пикселей), жирный шрифт (FontWeight="Bold"), отступы (Margin).
Сетка и кнопки
Для размещения кнопок используйте <Grid>. Создайте две кнопки с помощью <Button> и атрибутом Content для текста. Для первой кнопки (HorizontalAlignment="Left") используйте текст «Регистрация». Для второй (HorizontalAlignment="Right") – «Авторизация». Для второй кнопки добавьте стиль из библиотеки Material Design, используя Style, StaticResource и MaterialDesignFlatMidButton.
Текстовые поля
С помощью <TextBox> создайте текстовые поля для ввода логина, пароля, подтверждения пароля и email. Используйте materialDesign:HintAssist.Hint для подсказок и стили MaterialDesignFloatingHintTextBox и MaterialDesignFlatAndHandTextBox (для PasswordBox).
Кнопка «Зарегистрироваться»
Внизу добавьте кнопку «Зарегистрироваться» с помощью <Button>, Content и Margin.
Запуск и тестирование
Запустите приложение и протестируйте дизайн.
Библиотека Material Design значительно упрощает создание привлекательного дизайна в WPF. Дополнительную информацию и стили можно найти на официальном сайте библиотеки.