Форум программистов, компьютерный форум, киберфорум
anomal6
Форум программистов и сисадминов Киберфорум > Блоги > anomal6
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  

Winforstrap или красявый дизайн своими руками на HTML+JS+Winform­s

Запись от anomal6 размещена 04.03.2025 в 21:50
Показов 3427 Комментарии 0
Сидел тут вечером ковырял проект на MAUI, и как же глупо создаются пакеты MSIX и система обновлений пакета публикации, но не об этом.

Бывает нужен современный дизайн программы а писать на MAUI, так не прост в освоении.
Всякие Guna Metro и подобные фреймворки не дают такого дизайна, и зачастую какой-нибудь issue висит не закрытый пару лет с проблемой Label.
Wpf? писать дизайн на Wpf нууууу, я бы за такое не взялся.
Есть ELECTRON.NET но нам мультиплатформенное приложение не нужно.

Моя задача была в том, чтобы быстро написать приложение для Windows с современным адаптивным дизайном.
Winforms вполне годно, но вот не хватает в нём анимашек и эффектов всяких, а писать дополнительно к рендеру отрисовки или использовать не GDI слишком усложняет задачу и растягивает срок, да и проблемы с двойной буферизацией когда дело доходит для Transparent.

Выбрал я значит использовать подход рендера html с js. Как рендерить?
WebView2.
Минусы конечно есть + Огромный размер файлов библиотек, но дизайн наше всё.

Нужно конечно разбираться не только c# в но и базово в html + css , но Bootstrap половину проблем решает.

Подключаем библиотеку кидаем WebView на форму и немого покодим.

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

 
 public Form1()
 {
     InitializeComponent();
     InitializeWebView();
 }
 
private async void InitializeWebView()
 {
     await webView21.EnsureCoreWebView2Async();
     // Загрузим локальный HTML-файл
     string htmlPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "index.html");
     webView21.CoreWebView2.Navigate(htmlPath);
 
     // Регистрируем объект C# для взаимодействия с JavaScript
     webView21.CoreWebView2.AddHostObjectToScript("myCsharpObject", new MyCsharpObject());
 }
 
  private async void тёмнаяТемаToolStripMenuItem1_Click(object sender, EventArgs e)
  {
      var currentTheme = await webView21.CoreWebView2.ExecuteScriptAsync("document.documentElement.getAttribute('data-bs-theme');");
      currentTheme = currentTheme.Trim('"');
 
      string newTheme = "dark";
      await webView21.CoreWebView2.ExecuteScriptAsync($"document.documentElement.setAttribute('data-bs-theme', '{newTheme}');");
  }
 
  private async void светлаяТемаToolStripMenuItem_Click(object sender, EventArgs e)
  {
      var currentTheme = await webView21.CoreWebView2.ExecuteScriptAsync("document.documentElement.getAttribute('data-bs-theme');");
      currentTheme = currentTheme.Trim('"');
 
      string newTheme = "light";
      await webView21.CoreWebView2.ExecuteScriptAsync($"document.documentElement.setAttribute('data-bs-theme', '{newTheme}');");
  }
 
//Класс который мы регистрируем для вызова из JS
public class MyCsharpObject
{
    public void Execute()
    {
        MessageBox.Show("Button clicked in C#!");
    }
}
Создадим html
и добавим обработчики для взаимодействия с c#
JavaScript
1
2
3
4
5
6
7

<script>
    // Обработчик события кнопки
    document.getElementById('myButton').addEventListener('click', function () {
        // Вызов метода C# через host object
        window.chrome.webview.hostObjects.myCsharpObject.Execute();
    });
</script>
Нажмите на изображение для увеличения Название: 111.png Просмотров: 461 Размер: 18.1 Кб ID: 10314

Нажмите на изображение для увеличения Название: 222.png Просмотров: 390 Размер: 18.9 Кб ID: 10315

Нажмите на изображение для увеличения Название: 2025-03-04 22-40-57.gif Просмотров: 412 Размер: 859.0 Кб ID: 10316


Из плюсов мы получаем:
Современный дизайн
html можно редактировать отдельно от логики

Про минусы помолчим

Скачать скомпилированное приложение можно по ссылке https://disk.yandex.ru/d/2Qq5Wi31dGGz7A

исходники прикрепляю MULTYForms.7z

P.S. странички html если вдруг кто захочет скомпилировать проект. Подкинуть их к exe файлу
index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>Demo WinForms & WebView2 for cyberforum!</h1>
 
<div class="demo">
<button type="button" class="btn btn-outline-info" id="myButton">WinForms</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>
 
<button class="btn btn-success" id="hoverButton">Mouse Hover over me</button>
</div></p>
 
<p><button type="button" class="btn btn-outline-warning" onclick="window.location.href='demo.html'">GoTo nextpage</button></p>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
 
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
     id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Try scrolling the rest of the page to see this option in action.</p>
    </div>
</div>
<script>
    // Обработчик события кнопки
    document.getElementById('myButton').addEventListener('click', function () {
        // Вызов метода C# через host object
        window.chrome.webview.hostObjects.myCsharpObject.Execute();
    });
</script>
 
<script>
    // Обработчик события наведения мыши
    document.getElementById('hoverButton').addEventListener('mouseover', function () {
        // Открываем offcanvas-панель
        const offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasScrolling'));
        offcanvas.show();
    });
</script>
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>


demo.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Components Example</title>
    <!-- Подключаем Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">Bootstrap Components</h1>
 
        <!-- 1. Кнопка -->
        <div class="mb-3">
            <button type="button" class="btn btn-primary">Primary Button</button>
        </div>
 
        <!-- 2. Выпадающий список -->
        <div class="mb-3">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown Button
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>
        </div>
 
        <!-- 3. Навигационная панель -->
        <div class="mb-3">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Features</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Pricing</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
 
        <!-- 4. Карточка -->
        <div class="mb-3">
            <div class="card" style="width: 18rem;">
                <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card Title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
 
        <!-- 5. Форма -->
        <div class="mb-3">
            <form>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
 
        <!-- 6. Аккордеон -->
        <div class="mb-3">
            <div class="accordion" id="accordionExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Accordion Item #1
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            This is the first item's accordion body.
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Accordion Item #2
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                        <div class="accordion-body">
                            This is the second item's accordion body.
                        </div>
                    </div>
                </div>
            </div>
        </div>
 
        <!-- 7. Прогресс-бар -->
        <div class="mb-3">
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
            </div>
        </div>
 
        <!-- 8. Спиннер -->
        <div class="mb-3">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
 
        <!-- 9. Таблица -->
        <div class="mb-3">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">First</th>
                        <th scope="col">Last</th>
                        <th scope="col">Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                </tbody>
            </table>
        </div>
 
        <!-- 10. Оповещение -->
        <div class="mb-3">
            <div class="alert alert-warning" role="alert">
                This is a warning alert!
            </div>
        </div>
    </div>
 
    <!-- Подключаем Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
Метки .net, c#, html, javascript, webview, winforms
Размещено в Без категории
« PHP & C# [простой пример реализации входа в личный кабинет]     Главная страница
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 0
Комментарии
 
Новые блоги и статьи
Был там один разговор по поводу свободы в материальном мире.
kumehtar 19.08.2026
Суть: рассматривается живое существо, оказавшееся внутри довольно странной системы (этого мира) и пытающееся обустроить в ней свой кусок пространства. Жизнь действительно предъявляет каждому. . .
Когда логика программы не спасает от человеческих ошибок
Maks 18.08.2026
В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .
Лето уходит
kumehtar 17.08.2026
 Мысли в слух
kumehtar 17.08.2026
Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .
Перемещение строк из ТЧ в другой документ с учетом текущего пробега
Maks 17.08.2026
Реализация из решения ниже выполнена на примере нетипового документа "Автозапчасти", с ТЧ "Шины". За основу взят алгоритм отсюда: https:/ / www. cyberforum. ru/ blogs/ 359708/ 10838. html Задача: . . .
Саморегулирующийся социальный контракт для сервера cross-section.
Hrethgir 14.08.2026
С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .
Часы электронные
Uhbif79 12.08.2026
Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .
Часы с будильником на основе класса QLCDNumber
Uhbif79 12.08.2026
Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru