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

Запись от anomal6 размещена 04.03.2025 в 21:50

Метки .net, c#, html, javascript, webview, winforms

Сидел тут вечером ковырял проект на 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

Комментарии

Новые блоги и статьи Все статьи Все блоги /
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))	Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .

Сообщение форума

Отменить изменения

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

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