{"id":485554,"date":"2026-06-30T02:34:52","date_gmt":"2026-06-30T02:34:52","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=485554"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=485554","title":{"rendered":"\u0422\u0435\u043f\u043b\u044b\u0435 \u0438 \u0432\u043b\u0430\u0436\u043d\u044b\u0435 \u041f\u043b\u0438\u0442\u043a\u0438 \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 C#: \u043d\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041d\u0435 \u201c\u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a\u201d, \u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e-\u0442\u043e \u0431\u043b\u0438\u0436\u0435 \u043a COSMOS (\u043e\u0442 Waves)-\u043f\u043e\u0434\u0445\u043e\u0434\u0443, \u0433\u0434\u0435 \u0444\u0430\u0439\u043b\u044b \u0436\u0438\u0432\u0443\u0442 \u043f\u043b\u0438\u0442\u043a\u0430\u043c\u0438, \u0438\u043c\u0435\u044e\u0442 \u0432\u0435\u0441, \u0446\u0432\u0435\u0442, \u043f\u0440\u0435\u0432\u044c\u044e, \u0442\u0435\u0433\u0438, \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u044e.<\/p>\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442. :?*(*%:%=)<\/p>\n<p>\u041d\u0438\u0436\u0435 \u0440\u0430\u0437\u0431\u043e\u0440, \u043a\u0430\u043a \u043c\u044b \u0448\u043b\u0438 \u043e\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445, \u043d\u043e \u0442\u044f\u0436\u0451\u043b\u044b\u0445 \u043f\u043b\u0438\u0442\u043e\u043a \u043a \u0431\u043e\u043b\u0435\u0435 \u0436\u0438\u0432\u043e\u043c\u0443 \u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443 \u043d\u0430 C#<br \/>\u0418 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441 \u043f\u043b\u0438\u0442\u043a\u0430\u043c\u0438 (\u0422\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e \u043f\u043b\u0438\u0442\u043a\u0430\u0445)<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d4d\/f6a\/c7f\/d4df6ac7fc3a3166e53a2f7add9f2d72.png\" alt=\"\u041f\u0430\u0440\u043e\u0434\u0438\u044f \u043d\u0430 COSMOS \u041e\u0422 WAVES (\u041d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c - \u0438 \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0435\u0439 \u0437\u0430 \u044d\u0442\u043e)\" title=\"\u041f\u0430\u0440\u043e\u0434\u0438\u044f \u043d\u0430 COSMOS \u041e\u0422 WAVES (\u041d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c - \u0438 \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0435\u0439 \u0437\u0430 \u044d\u0442\u043e)\" width=\"1672\" height=\"941\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/d4d\/f6a\/c7f\/d4df6ac7fc3a3166e53a2f7add9f2d72.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d4d\/f6a\/c7f\/d4df6ac7fc3a3166e53a2f7add9f2d72.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0430\u0440\u043e\u0434\u0438\u044f \u043d\u0430 COSMOS \u041e\u0422 WAVES (\u041d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c &#8212; \u0438 \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0435\u0439 \u0437\u0430 \u044d\u0442\u043e)<\/figcaption><\/div>\n<\/figure>\n<h2>\u041f\u043b\u0438\u0442\u043a\u0438 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u043d\u0443\u0436\u043d\u044b \u043d\u0435 \u0434\u043b\u044f \u043a\u0440\u0430\u0441\u043e\u0442\u044b. \u0418\u0445 \u0441\u043c\u044b\u0441\u043b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u043d\u0438\u043c, \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044f \u0444\u0430\u0439\u043b. <\/h2>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0443\u0442 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432, \u0432\u043e\u0442 \u0441\u0440\u0430\u0437\u0443 1 \u0434\u043e\u0431\u0430\u0432\u0438\u043c, \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e \u0434\u0435\u043b\u0443. \u042d\u0442\u043e \u043a\u0440\u0443\u0442\u0430\u044f \u0438\u0433\u0440\u043e\u0432\u0430\u044f C# \u0421\u0442\u0430\u0442\u044c\u044f. \u041f\u0440\u043e\u0441\u0442\u043e \u0447\u0438\u0442\u0430\u0439\u0442\u0435, \u043e\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f. <\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a89\/076\/782\/a8907678208ee27152e48a5524ac14e9.jpg\" alt=\"\u041f\u043b\u0438\u0442\u043a\u0438, \u0432\u0441\u0435 \u043f\u043b\u0438\u0442\u043a\u0438, \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043b\u0438\u0442\u043a\u0438\" title=\"\u041f\u043b\u0438\u0442\u043a\u0438, \u0432\u0441\u0435 \u043f\u043b\u0438\u0442\u043a\u0438, \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043b\u0438\u0442\u043a\u0438\" width=\"2018\" height=\"1177\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a89\/076\/782\/a8907678208ee27152e48a5524ac14e9.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a89\/076\/782\/a8907678208ee27152e48a5524ac14e9.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u043b\u0438\u0442\u043a\u0438, \u0432\u0441\u0435 \u043f\u043b\u0438\u0442\u043a\u0438, \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043b\u0438\u0442\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0439 \u043b\u0438\u0441\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043a\u0442\u043e-\u0442\u043e \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041d\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u044e\u0442 \u043f\u043e\u043c\u043e\u0433\u0430\u0442\u044c. <code>scan_001.pdf<\/code>, <code>\u0434\u043e\u0433\u043e\u0432\u043e\u0440_final_2.docx<\/code>, <code>\u043e\u0442\u0447\u0435\u0442_\u043d\u043e\u0432\u044b\u0439.xlsx<\/code>, <code>image_25.png<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u043e\u0434\u0438\u043d \u0437\u0430 \u0434\u0440\u0443\u0433\u0438\u043c, \u0442\u0435\u0440\u044f\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438 \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p>\u041f\u043b\u0438\u0442\u043a\u0430 \u0440\u0435\u0448\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443: \u043e\u043d\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0432 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a\u0435, \u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u043e\u0439 \u0441 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u0430\u043c\u0438: \u043f\u0440\u0435\u0432\u044c\u044e, \u0442\u0438\u043f, \u0434\u0430\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0440, \u0442\u0435\u0433\u0438, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a, \u0441\u0442\u0430\u0442\u0443\u0441, \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c. \u0427\u0435\u043b\u043e\u0432\u0435\u043a \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430, \u0430 \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432.<\/p>\n<p>\u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a, \u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u043b\u0438\u0442\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u043a \u043a\u0430\u0440\u0442\u0443: \u0433\u0434\u0435 \u0441\u0432\u0435\u0436\u0435\u0435, \u0433\u0434\u0435 \u0441\u0442\u0430\u0440\u043e\u0435, \u0433\u0434\u0435 PDF, \u0433\u0434\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0433\u0434\u0435 \u043f\u043e\u0434\u043e\u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b, \u0433\u0434\u0435 \u0442\u043e, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438.<\/p>\n<p>\u041d\u043e \u0443 \u043f\u043b\u0438\u0442\u043e\u043a \u0435\u0441\u0442\u044c \u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c: \u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0442\u0440\u0438\u043d\u0443 \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0432\u043e\u0437\u0434\u0443\u0445\u043e\u043c. \u0415\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c\u0438, \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043f\u0440\u0435\u0432\u044c\u044e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043b\u0438\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439. \u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438: \u043f\u0440\u0435\u0432\u044c\u044e, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u043f\u0443\u0442\u044c, \u0442\u0435\u0433\u0438, \u0434\u0430\u0442\u0443, \u0440\u0430\u0437\u043c\u0435\u0440. \u0421\u0440\u0435\u0434\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0433\u043b\u0430\u0432\u043d\u043e\u0435. \u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u043f\u0435\u0447\u0430\u0442\u043e\u043a, \u0442\u0438\u043f \u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0438\u043c\u044f.<\/p>\n<p>\u0422\u0430\u043a \u043f\u043b\u0438\u0442\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0430 \u0447\u0430\u0441\u0442\u044c\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0420\u0430\u0437\u043c\u0435\u0440, \u0446\u0432\u0435\u0442, \u043f\u0440\u0435\u0432\u044c\u044e \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u043e\u0435. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043f\u043b\u0438\u0442\u043a\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u201c\u0447\u0442\u043e \u044d\u0442\u043e?\u201d \u0434\u043e \u043a\u043b\u0438\u043a\u0430. \u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u043f\u043b\u0438\u0442\u043a\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0435\u0449\u0451 \u0438 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u201c\u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u043d\u0435 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e?\u201d.<\/p>\n<h2>C# + WPF\/XAML<\/h2>\n<p>\u041a\u0430\u043a \u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043b\u0438\u0442\u043a\u0438? <\/p>\n<p>\u041f\u0435\u0440\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u043b\u0438\u0442\u043e\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u043d\u0435 \u043a\u0430\u043a \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0430 \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f. \u0426\u0435\u043b\u044c \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f: \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0443\u0434\u043e\u0431\u043d\u043e \u043b\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0441\u043f\u0438\u0441\u043a\u043e\u043c, \u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438.<\/p>\n<p>\u0412 WPF \u043f\u043b\u0438\u0442\u043a\u0430 \u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 XAML-\u0431\u043b\u043e\u043a\u043e\u0432: <code>Border<\/code>, <code>Grid<\/code>, <code>Image<\/code>, <code>TextBlock<\/code>, <code>ItemsControl<\/code>. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430, \u0433\u0434\u0435 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u0430\u044f \u043c\u0435\u0442\u0430\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f.<\/p>\n<pre><code class=\"cs\">&lt;Border Padding=\"10\"        CornerRadius=\"8\"        BorderThickness=\"1\"        BorderBrush=\"#D9DEE6\"        Background=\"White\"&gt;    &lt;Grid&gt;        &lt;Grid.ColumnDefinitions&gt;            &lt;ColumnDefinition Width=\"96\" \/&gt;            &lt;ColumnDefinition Width=\"*\" \/&gt;        &lt;\/Grid.ColumnDefinitions&gt;        &lt;Border Width=\"88\"                Height=\"64\"                CornerRadius=\"6\"                Background=\"#EEF1F4\"&gt;            &lt;Image Source=\"{Binding PreviewImage}\"                   Stretch=\"UniformToFill\" \/&gt;        &lt;\/Border&gt;        &lt;StackPanel Grid.Column=\"1\"                    Margin=\"12,0,0,0\"&gt;            &lt;TextBlock Text=\"{Binding Name}\"                       FontSize=\"16\"                       FontWeight=\"SemiBold\"                       TextTrimming=\"CharacterEllipsis\" \/&gt;            &lt;TextBlock Text=\"{Binding MetaLine}\"                       Margin=\"0,6,0,0\"                       FontSize=\"13\"                       Foreground=\"#687386\"                       TextTrimming=\"CharacterEllipsis\" \/&gt;        &lt;\/StackPanel&gt;    &lt;\/Grid&gt;&lt;\/Border&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 C# \u0443 \u043f\u043b\u0438\u0442\u043a\u0438 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u043d\u0430 \u0431\u0435\u0440\u0451\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u0430 \u0438 \u0433\u043e\u0442\u043e\u0432\u0438\u0442 \u0438\u0445 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u0438\u0434\u0435: \u0438\u043c\u044f, \u0442\u0438\u043f, \u0434\u0430\u0442\u0443, \u0440\u0430\u0437\u043c\u0435\u0440, \u043f\u0443\u0442\u044c, \u0442\u0435\u0433\u0438 \u0438 \u043f\u0440\u0435\u0432\u044c\u044e.  <\/p>\n<pre><code class=\"cs\">public sealed class DocumentCardViewModel{    public string Name { get; }    public string TypeLabel { get; }    public string MetaLine { get; }    public string FullPath { get; }    public IReadOnlyList&lt;string&gt; Tags { get; }    public ImageSource? PreviewImage { get; set; }    public DocumentCardViewModel(DocumentFile document)    {        Name = document.Name;        TypeLabel = document.Kind;        FullPath = document.FullPath;        Tags = document.Tags;        MetaLine = $\"{document.Kind} \u00b7 {document.ModifiedAt:dd MMM} \u00b7 {FormatSize(document.SizeBytes)}\";    }    private static string FormatSize(long bytes)    {        if (bytes &lt; 1024)        {            return $\"{bytes} B\";        }        if (bytes &lt; 1024 * 1024)        {            return $\"{bytes \/ 1024.0:0.#} KB\";        }        return $\"{bytes \/ 1024.0 \/ 1024.0:0.#} MB\";    }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0442\u0435\u0433\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e: \u043f\u043b\u0438\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c, \u0430 \u0440\u0430\u0431\u043e\u0447\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0422\u0435\u0433\u0438 \u0434\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0437\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438.  <\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/77c\/f1b\/401\/77cf1b401cdee23e173a858d86cf7791.jpg\" alt=\"&quot;\u041f\u043b\u0438\u0442\u043a\u0430&quot;  !=  C#\" title=\"&quot;\u041f\u043b\u0438\u0442\u043a\u0430&quot;  !=  C#\" width=\"472\" height=\"211\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/77c\/f1b\/401\/77cf1b401cdee23e173a858d86cf7791.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/77c\/f1b\/401\/77cf1b401cdee23e173a858d86cf7791.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>&#171;\u041f\u043b\u0438\u0442\u043a\u0430&#187;  !=  C#<\/figcaption><\/div>\n<\/figure>\n<pre><code class=\"xml\">&lt;ItemsControl ItemsSource=\"{Binding Tags}\"              Margin=\"0,10,0,0\"&gt;    &lt;ItemsControl.ItemsPanel&gt;        &lt;ItemsPanelTemplate&gt;            &lt;WrapPanel \/&gt;        &lt;\/ItemsPanelTemplate&gt;    &lt;\/ItemsControl.ItemsPanel&gt;    &lt;ItemsControl.ItemTemplate&gt;        &lt;DataTemplate&gt;            &lt;Border Background=\"#F1F5F9\"                    CornerRadius=\"10\"                    Padding=\"8,3\"                    Margin=\"0,0,6,6\"&gt;                &lt;TextBlock Text=\"{Binding}\"                           FontSize=\"12\"                           Foreground=\"#64748B\" \/&gt;            &lt;\/Border&gt;        &lt;\/DataTemplate&gt;    &lt;\/ItemsControl.ItemTemplate&gt;&lt;\/ItemsControl&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<h2>\u04229 \u043c\u043e\u0433 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0432\u043e \u00abUI\u00bb (\u044e\u0430\u0439 \/ \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441), \u00abUWP\u00bb \u0438\u043b\u0438 \u00ab\u0443\u043c\u0435\u00bb (\u0432 \u043c\u043e\u0435\u043c \u0443\u043c\u0435 \/ \u0432 \u043a\u043e\u0434\u0435) \u0432 \u0441\u043b\u043e\u0432\u043e \u00ab\u044e\u043c\u043e\u0440\u00bb.  <\/h2>\n<p>\u0422\u0443\u0442 \u043d\u0435 \u0441\u043c\u0435\u0435\u043c\u0441\u044f)<\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u043d\u0430\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043c\u043e\u0433\u043b\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a: \u0435\u0441\u0442\u044c <code>ItemsControl<\/code>, \u0432\u043d\u0443\u0442\u0440\u0438 <code>WrapPanel<\/code>, \u0430 \u043a\u0430\u0436\u0434\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u0449\u0438\u0439 \u043f\u043e\u0442\u043e\u043a. <\/p>\n<pre><code class=\"xml\">&lt;ItemsControl ItemsSource=\"{Binding Documents}\"&gt;    &lt;ItemsControl.ItemsPanel&gt;        &lt;ItemsPanelTemplate&gt;            &lt;WrapPanel \/&gt;        &lt;\/ItemsPanelTemplate&gt;    &lt;\/ItemsControl.ItemsPanel&gt;&lt;\/ItemsControl&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u044d\u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0433\u0443\u0434. \u0414\u043b\u044f \u0437\u0440\u0435\u043b\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0443\u043c\u0430\u044e \u043d\u0435 \u043e\u0447. <code>WrapPanel<\/code> \u043d\u0435 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u0435\u0441\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u044b\u0441\u044f\u0447\u0430, WPF \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0442\u044b\u0441\u044f\u0447\u0443 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e 20.  <br \/>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0443\u0448\u043b\u0438 \u043e\u0442 \u201c\u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c \u043f\u043b\u0438\u0442\u043a\u0438 \u0432 <strong>WrapPanel<\/strong>\u201d \u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0435. \u0412\u043c\u0435\u0441\u0442\u043e \u0445\u0430\u043e\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0438, \u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0438\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.<br \/><strong><br \/>\u041f\u0440\u0438\u043a\u0438\u043d\u0443\u043b:<\/strong><\/p>\n<pre><code class=\"cs\">public sealed class DocumentRowViewModel{    public IReadOnlyList&lt;DocumentCardViewModel&gt; Items { get; }    public DocumentRowViewModel(IReadOnlyList&lt;DocumentCardViewModel&gt; items)    {        Items = items;    }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0443\u0436\u0435 \u043d\u0435 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u043f\u0440\u043e\u0441\u0442\u044b\u043d\u044e \u043f\u043b\u0438\u0442\u043e\u043a, \u0430 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0440\u043e\u043a:<\/p>\n<pre><code class=\"xml\">&lt;ListBox ItemsSource=\"{Binding FilteredRows}\"         ScrollViewer.CanContentScroll=\"True\"         VirtualizingPanel.IsVirtualizing=\"True\"         VirtualizingPanel.VirtualizationMode=\"Recycling\"&gt;    &lt;ListBox.ItemTemplate&gt;        &lt;DataTemplate&gt;            &lt;ItemsControl ItemsSource=\"{Binding Items}\"&gt;                &lt;ItemsControl.ItemsPanel&gt;                    &lt;ItemsPanelTemplate&gt;                        &lt;UniformGrid Rows=\"1\" \/&gt;                    &lt;\/ItemsPanelTemplate&gt;                &lt;\/ItemsControl.ItemsPanel&gt;            &lt;\/ItemsControl&gt;        &lt;\/DataTemplate&gt;    &lt;\/ListBox.ItemTemplate&gt;&lt;\/ListBox&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u042d\u0442\u043e \u0443\u0436\u0435 \u0431\u043b\u0438\u0436\u0435 \u043a \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435. <code>ListBox<\/code> \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0438, \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u043b\u0435\u0436\u0438\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043b\u0438\u0442\u043e\u043a. \u0422\u043e \u0435\u0441\u0442\u044c WPF \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u043d \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435 \u0432\u0441\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0441\u0435\u0442\u043a\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439. \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043b\u0438\u0442\u043e\u043a \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438. \u0415\u0441\u043b\u0438 \u043e\u043a\u043d\u043e \u0448\u0438\u0440\u043e\u043a\u043e\u0435, \u043f\u043b\u0438\u0442\u043e\u043a \u0431\u043e\u043b\u044c\u0448\u0435. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0436\u0430\u043b \u043f\u0440\u0430\u0432\u0443\u044e \u0438\u043b\u0438 \u043b\u0435\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c, \u0441\u0435\u0442\u043a\u0430 \u043f\u0435\u0440\u0435\u0441\u0447\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n<pre><code class=\"cs\">private int CalculateColumns(double availableWidth){    const double minTileWidth = 220;    const int minColumns = 2;    const int maxColumns = 8;    var columns = (int)(availableWidth \/ minTileWidth);    return Math.Clamp(columns, minColumns, maxColumns);}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u0432\u0438\u0434\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u0443\u0441\u0442\u0443\u0435\u0442. \u041f\u043b\u0438\u0442\u043a\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043b\u043e\u0442\u043d\u0435\u0435.<\/p>\n<p>\u041d\u043e \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u0431\u0438\u0432\u0430\u0442\u044c \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043b\u0438\u0442\u043a\u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438. \u0423 \u043d\u0435\u0451 \u0435\u0441\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e. \u0415\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u044f\u0442\u0441\u044f \u0432 \u0448\u0443\u043c.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433: \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"cs\">public enum DocumentViewMode{    Cosmos,    Compact,    List}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><code>Cosmos<\/code> \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430: \u043a\u0440\u0443\u043f\u043d\u0435\u0435 \u043f\u0440\u0435\u0432\u044c\u044e, \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430, \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0443\u0437\u043d\u0430\u0432\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0433\u043b\u0430\u0437\u0430\u043c\u0438.<\/p>\n<p><code>Compact<\/code> \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043f\u043b\u043e\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b: \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u043e\u0437\u0434\u0443\u0445\u0430, \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p><code>List<\/code> \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f: \u043f\u0443\u0442\u044c, \u0434\u0430\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0440, \u0442\u0438\u043f, \u0441\u0442\u0430\u0442\u0443\u0441\u044b.<\/p>\n<p>\u0422\u0430\u043a \u043f\u043b\u0438\u0442\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u044e\u0442 \u0431\u044b\u0442\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041e\u043d\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0440\u0435\u0436\u0438\u043c\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0440\u043e\u0448 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430. \u0410 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u0430 \u0431\u0443\u0445\u0433\u0430\u043b\u0442\u0435\u0440\u0441\u043a\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c, \u043e\u043d \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a. <\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/148\/87e\/c60\/14887ec60b4783d3317f9932e27d08c3.jpg\" alt=\"\u041f\u043b\u0438\u0442\u043a\u0438\" title=\"\u041f\u043b\u0438\u0442\u043a\u0438\" width=\"1687\" height=\"867\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/148\/87e\/c60\/14887ec60b4783d3317f9932e27d08c3.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/148\/87e\/c60\/14887ec60b4783d3317f9932e27d08c3.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u043b\u0438\u0442\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h2>\u041a\u0430\u043a \u043b\u0435\u0447\u044c \u043f\u043e\u0434 \u043f\u043b\u0438\u0442\u043a\u0443?<\/h2>\n<p>\u041f\u043b\u0438\u0442\u043a\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0435 \u0440\u043e\u0434\u0438\u043b\u0438\u0441\u044c \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438\u0434\u0435\u044e: \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a\u0435, \u0430 \u043a\u0430\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u044b \u043d\u0430\u0431\u0440\u043e\u0441\u0430\u043b\u0438 \u043d\u0430 <code>C# + WPF\/XAML<\/code>: \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e Windows-\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u0431\u043e\u043a\u043e\u0432\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438, \u043f\u0440\u0435\u0432\u044c\u044e \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<p>\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0430\u044f \u043f\u043b\u0438\u0442\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;Border Padding=\"10\"        CornerRadius=\"8\"        BorderThickness=\"1\"        BorderBrush=\"#D9DEE6\"        Background=\"White\"&gt;    &lt;Grid&gt;        &lt;Grid.ColumnDefinitions&gt;            &lt;ColumnDefinition Width=\"96\" \/&gt;            &lt;ColumnDefinition Width=\"*\" \/&gt;        &lt;\/Grid.ColumnDefinitions&gt;        &lt;Image Source=\"{Binding PreviewImage}\"               Width=\"88\"               Height=\"64\"               Stretch=\"UniformToFill\" \/&gt;        &lt;StackPanel Grid.Column=\"1\"                    Margin=\"12,0,0,0\"&gt;            &lt;TextBlock Text=\"{Binding Name}\"                       FontSize=\"16\"                       FontWeight=\"SemiBold\"                       TextTrimming=\"CharacterEllipsis\" \/&gt;            &lt;TextBlock Text=\"{Binding MetaLine}\"                       FontSize=\"13\"                       Foreground=\"#687386\" \/&gt;        &lt;\/StackPanel&gt;    &lt;\/Grid&gt;&lt;\/Border&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p> \u0410 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043d\u0435\u0451 \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 <code>ViewModel<\/code>:  <\/p>\n<pre><code class=\"cs\">public sealed class DocumentCardViewModel{    public string Name { get; }    public string MetaLine { get; }    public string FullPath { get; }    public ImageSource? PreviewImage { get; set; }    public DocumentCardViewModel(DocumentFile document)    {        Name = document.Name;        FullPath = document.FullPath;        MetaLine = $\"{document.Kind} \u00b7 {document.ModifiedAt:dd MMM} \u00b7 {FormatSize(document.SizeBytes)}\";    }    private static string FormatSize(long bytes)    {        if (bytes &lt; 1024)        {            return $\"{bytes} B\";        }        if (bytes &lt; 1024 * 1024)        {            return $\"{bytes \/ 1024.0:0.#} KB\";        }        return $\"{bytes \/ 1024.0 \/ 1024.0:0.#} MB\";    }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u043e \u044d\u0442\u043e \u0431\u044b\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f, \u0430 \u043d\u0435 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430.<\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 C# + WPF \u0432 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435 \u043d\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430 \u043d\u0451\u043c \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c: \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0448\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u201cCOSMOS \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432\u201d, \u0431\u044b\u0441\u0442\u0440\u043e \u0443\u043f\u0438\u0440\u0430\u0435\u0448\u044c\u0441\u044f \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<p>\u041f\u043b\u0438\u0442\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u043c\u0438. \u0421\u043a\u0440\u043e\u043b\u043b \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0436\u0434\u0430\u0442\u044c \u043f\u0440\u0435\u0432\u044c\u044e. \u041d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u0434\u0432\u0435\u0448\u0438\u0432\u0430\u0442\u044c UI. \u041f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0438\u043a\u0441\u0435\u043b\u0435. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0437\u0430\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043b\u0438\u0441\u0442\u0430\u0435\u0442 \u0442\u044b\u0441\u044f\u0447\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0436\u0438\u0432\u044b\u043c.<\/p>\n<p>\u0412 WPF \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0434\u043e\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c: \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, recycling, \u043b\u0435\u043d\u0438\u0432\u044b\u0435 \u043f\u0440\u0435\u0432\u044c\u044e, <code>Dispatcher.Yield<\/code>, \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0431\u0438\u043d\u0434\u0438\u043d\u0433\u0430\u043c\u0438. \u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043e\u0449\u0443\u0449\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0431\u043e\u0440\u044c\u0431\u0430 \u0441 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u043b\u043e\u0433\u0438\u0447\u043d\u0435\u0435 \u043d\u0430 <code>Rust + egui<\/code> \u0438 \u0441\u0432\u043e\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043f\u043b\u0438\u0442\u043e\u043a.<\/p>\n<p>\u0422\u0430\u043c \u043f\u043b\u0438\u0442\u043a\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435 XAML-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u0435\u0440\u0435\u0432\u043e\u043c, \u0430 \u043b\u0451\u0433\u043a\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u044f\u043c\u044b\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c:<\/p>\n<pre><code class=\"cs\">pub struct DocumentTile {    pub id: DocumentId,    pub name: String,    pub kind: DocumentKind,    pub modified_at: DateTime&lt;Utc&gt;,    pub size_bytes: u64,    pub tags: Vec&lt;String&gt;,    pub preview: Option&lt;TextureId&gt;,}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p> \u0420\u0435\u043d\u0434\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u0434 \u0441\u0432\u043e\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c:  <\/p>\n<pre><code class=\"cs\">fn draw_tile(ui: &amp;mut egui::Ui, tile: &amp;DocumentTile, rect: egui::Rect) -&gt; egui::Response {    let response = ui.allocate_rect(rect, egui::Sense::click());    let painter = ui.painter();    painter.rect_filled(rect, 8.0, egui::Color32::from_rgb(255, 255, 255));    painter.rect_stroke(        rect,        8.0,        egui::Stroke::new(1.0, egui::Color32::from_rgb(217, 222, 230)),    );    if let Some(texture) = tile.preview {        let preview_rect = egui::Rect::from_min_size(            rect.min + egui::vec2(10.0, 10.0),            egui::vec2(96.0, 72.0),        );        painter.image(            texture,            preview_rect,            egui::Rect::from_min_max(egui::Pos2::ZERO, egui::pos2(1.0, 1.0)),            egui::Color32::WHITE,        );    }    painter.text(        rect.min + egui::vec2(118.0, 14.0),        egui::Align2::LEFT_TOP,        &amp;tile.name,        egui::FontId::proportional(16.0),        egui::Color32::from_rgb(31, 39, 51),    );    response}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418 \u0434\u0430\u043b\u044c\u0448\u0435 \u0443\u0436\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043b\u0438\u0442\u043e\u043a: \u0441 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c layout engine, \u043a\u044d\u0448\u0435\u043c \u043f\u0440\u0435\u0432\u044c\u044e, \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u043f\u043b\u043e\u0442\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u043e\u0439, \u043f\u0440\u0430\u0432\u044b\u043c \u043a\u043b\u0438\u043a\u043e\u043c, hover-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438, \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d\u043e\u043c \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u043c \u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442\u043e\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438.<\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c WPF \u0431\u044b\u043b \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a: \u043e\u043d \u043f\u043e\u043c\u043e\u0433 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043b\u0438\u0442\u043a\u0438 \u043d\u0443\u0436\u043d\u044b, \u043a\u0430\u043a \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f, \u0433\u0434\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0433\u0434\u0435 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442 \u0441\u043a\u0440\u043e\u043b\u043b, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u044b \u043f\u0440\u0435\u0432\u044c\u044e, \u0442\u0435\u0433\u0438 \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>\u041d\u043e \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u044b\u0441\u043b\u044c \u0442\u0430\u043a\u0430\u044f: \u0435\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0449\u0443\u0449\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u043a\u043e\u0441\u043c\u043e\u0441, \u0430 \u043d\u0435 \u043a\u0430\u043a \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a, \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043f\u0440\u0438\u0440\u0443\u0447\u0430\u0442\u044c \u0447\u0443\u0436\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0430. \u041b\u0443\u0447\u0448\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043b\u043e\u0439 \u043f\u043b\u0438\u0442\u043e\u043a: <code>Rust + egui + \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430<\/code>, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0438\u043a\u0441\u0435\u043b\u044c, \u043a\u0430\u0436\u0434\u044b\u0439 hover \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e\u0434 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u042f \u043d\u0435\u043d\u0430\u0432\u0438\u0436\u0443 \u0448\u0430\u0440\u043f.<\/h2>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e C# \u043f\u043b\u043e\u0445\u043e\u0439. \u0418 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043f\u0440\u043e \u0442\u043e, \u0447\u0442\u043e WPF \u043f\u043b\u043e\u0445\u043e\u0439. \u0414\u043b\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u043e\u043d\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0438\u0441\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b: \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c \u043e\u043a\u043d\u043e, \u043f\u043b\u0438\u0442\u043a\u0438, \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u0431\u043e\u043a\u043e\u0432\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438, \u043f\u0440\u0435\u0432\u044c\u044e \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0436\u0438\u0437\u043d\u044c \u0432 \u0438\u0434\u0435\u0435 \u201cCOSMOS \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432\u201d.<\/p>\n<p><strong>\u041d\u043e \u043b\u0438\u0447\u043d\u043e \u044f C# \u043d\u0435 \u043b\u044e\u0431\u043b\u044e.<\/strong><\/p>\n<p>\u041d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430 \u043d\u0451\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041c\u043e\u0436\u043d\u043e (\u043c\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u043e\u043d \u043e\u0434\u0438\u043d \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445). \u041f\u0440\u043e\u0441\u0442\u043e \u0432 \u0437\u0430\u0434\u0430\u0447\u0430\u0445, \u0433\u0434\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u043c, \u043f\u043b\u043e\u0442\u043d\u044b\u043c \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c, \u044f \u043d\u0435 \u0445\u043e\u0447\u0443 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0441\u043f\u043e\u0440\u0438\u0442\u044c \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c. \u042f \u043d\u0435 \u0445\u043e\u0447\u0443 \u0434\u0443\u043c\u0430\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430, \u0430 \u0437\u0430\u0432\u0442\u0440\u0430 \u043d\u0435\u0442. \u041f\u043e\u0447\u0435\u043c\u0443 \u0441\u043a\u0440\u043e\u043b\u043b \u043f\u043e\u0434\u0432\u0438\u0441\u0430\u0435\u0442 \u0438\u0437-\u0437\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430. \u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u0438\u043d\u0434\u0438\u043d\u0433 \u043f\u043e\u0442\u044f\u043d\u0443\u043b \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043b\u0438\u0448\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u0441\u0447\u0451\u0442. \u041f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u043f\u043b\u0438\u0442\u043a\u0430 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u044f\u0436\u0451\u043b\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c. (\u042f \u0417\u0430\u043d\u0443\u0434\u0430 \u0440\u0435\u0431\u044f\u0442, \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 <strong>software <\/strong>\u043a\u0430\u0434\u0440 \u0432\u044b\u043b\u0435\u0437\u0430\u0442\u044c)<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 C# \u0431\u044b\u043b \u043d\u0443\u0436\u0435\u043d \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043b\u0435\u0441\u0430. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430: \u043a\u0430\u043a\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u043b\u0438\u0442\u043a\u0438, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0432\u044c\u044e, \u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u043d\u044b \u0442\u0435\u0433\u0438, \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u0430\u0436\u043d\u0430 \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d, \u0433\u0434\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u0440\u043c\u043e\u0437\u0430 \u0438 \u0447\u0442\u043e \u0431\u0435\u0441\u0438\u0442 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u0437\u0430\u0431\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, \u043f\u0440\u043e-\u0442\u043e \u043a\u0430\u043a \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u043f\u043b\u0438\u0442\u043a\u0443, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044f \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442.<\/p>\n<p>C# \u043f\u043e\u043c\u043e\u0433 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0449\u0443\u043f\u0430\u0442\u044c \u0438\u0434\u0435\u044e. <\/p>\n<p>\u041c\u043e\u0439 \u0441\u043e\u0432\u0435\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0432, C# \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043f\u043b\u0438\u0442\u043a\u0443, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0432\u0448\u0438\u0441\u044c \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043b\u0443\u0447\u0448\u0438\u043c\u0438.<\/p>\n<p>\u0427\u0435\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u044f \u043d\u0435 \u043b\u044e\u0431\u043b\u044e C# \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0441 \u043f\u043e\u0434\u043e\u0437\u0440\u0435\u043d\u0438\u0435\u043c \u043e\u0442\u043d\u043e\u0448\u0443\u0441\u044c \u043a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u044f\u044e\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u0438. \u041d\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u0437\u043d\u0430\u0442\u044c: \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0444\u043b\u0430\u0433\u043c\u0430\u043d\u0441\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f Windows-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0441 \u0441\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0438, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u0442\u044c macOS, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u043e\u0434\u043d\u0438\u043c\u0438 \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043b\u0438\u0442\u043e\u0447\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439, \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0434\u0435\u0442\u0430\u043b\u0438 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438.<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1053696\/\">https:\/\/habr.com\/ru\/articles\/1053696\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041d\u0435 \u201c\u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a\u201d, \u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e-\u0442\u043e \u0431\u043b\u0438\u0436\u0435 \u043a COSMOS (\u043e\u0442 Waves)-\u043f\u043e\u0434\u0445\u043e\u0434\u0443, \u0433\u0434\u0435 \u0444\u0430\u0439\u043b\u044b \u0436\u0438\u0432\u0443\u0442 \u043f\u043b\u0438\u0442\u043a\u0430\u043c\u0438, \u0438\u043c\u0435\u044e\u0442 \u0432\u0435\u0441, \u0446\u0432\u0435\u0442, \u043f\u0440\u0435\u0432\u044c\u044e, \u0442\u0435\u0433\u0438, \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u044e.\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442. :?*(*%:%=)\u041d\u0438\u0436\u0435 \u0440\u0430\u0437\u0431\u043e\u0440, \u043a\u0430\u043a \u043c\u044b \u0448\u043b\u0438 \u043e\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445, \u043d\u043e \u0442\u044f\u0436\u0451\u043b\u044b\u0445 \u043f\u043b\u0438\u0442\u043e\u043a \u043a \u0431\u043e\u043b\u0435\u0435 \u0436\u0438\u0432\u043e\u043c\u0443 \u0438 \u0431\u044b\u0441\u0442\u0440\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443 \u043d\u0430 C#\u0418 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441 \u043f\u043b\u0438\u0442\u043a\u0430\u043c\u0438 (\u0422\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e \u043f\u043b\u0438\u0442\u043a\u0430\u0445)\u041f\u0430\u0440\u043e\u0434\u0438\u044f \u043d\u0430 COSMOS \u041e\u0422 WAVES (\u041d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u044c &#8212; \u0438 \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0435\u0439 \u0437\u0430 \u044d\u0442\u043e)\u041f\u043b\u0438\u0442\u043a\u0438 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u043d\u0443\u0436\u043d\u044b \u043d\u0435 \u0434\u043b\u044f \u043a\u0440\u0430\u0441\u043e\u0442\u044b. \u0418\u0445 \u0441\u043c\u044b\u0441\u043b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u043d\u0438\u043c, \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044f \u0444\u0430\u0439\u043b. \u0421\u0440\u0430\u0437\u0443 \u0441\u043a\u0430\u0436\u0443, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0443\u0442 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432, \u0432\u043e\u0442 \u0441\u0440\u0430\u0437\u0443 1 \u0434\u043e\u0431\u0430\u0432\u0438\u043c, \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e \u0434\u0435\u043b\u0443. \u042d\u0442\u043e \u043a\u0440\u0443\u0442\u0430\u044f \u0438\u0433\u0440\u043e\u0432\u0430\u044f C# \u0421\u0442\u0430\u0442\u044c\u044f. \u041f\u0440\u043e\u0441\u0442\u043e \u0447\u0438\u0442\u0430\u0439\u0442\u0435, \u043e\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f. \u041f\u043b\u0438\u0442\u043a\u0438, \u0432\u0441\u0435 \u043f\u043b\u0438\u0442\u043a\u0438, \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043b\u0438\u0442\u043a\u0438\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0439 \u043b\u0438\u0441\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043a\u0442\u043e-\u0442\u043e \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041d\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u044e\u0442 \u043f\u043e\u043c\u043e\u0433\u0430\u0442\u044c. scan_001.pdf, \u0434\u043e\u0433\u043e\u0432\u043e\u0440_final_2.docx, \u043e\u0442\u0447\u0435\u0442_\u043d\u043e\u0432\u044b\u0439.xlsx, image_25.png \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u043e. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u043e\u0434\u0438\u043d \u0437\u0430 \u0434\u0440\u0443\u0433\u0438\u043c, \u0442\u0435\u0440\u044f\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438 \u0432\u0440\u0435\u043c\u044f.\u041f\u043b\u0438\u0442\u043a\u0430 \u0440\u0435\u0448\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443: \u043e\u043d\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0432 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a\u0435, \u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u043e\u0439 \u0441 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u0430\u043c\u0438: \u043f\u0440\u0435\u0432\u044c\u044e, \u0442\u0438\u043f, \u0434\u0430\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0440, \u0442\u0435\u0433\u0438, \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a, \u0441\u0442\u0430\u0442\u0443\u0441, \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u044c. \u0427\u0435\u043b\u043e\u0432\u0435\u043a \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430, \u0430 \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432.\u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a, \u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u043b\u0438\u0442\u043a\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u043a \u043a\u0430\u0440\u0442\u0443: \u0433\u0434\u0435 \u0441\u0432\u0435\u0436\u0435\u0435, \u0433\u0434\u0435 \u0441\u0442\u0430\u0440\u043e\u0435, \u0433\u0434\u0435 PDF, \u0433\u0434\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0433\u0434\u0435 \u043f\u043e\u0434\u043e\u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0434\u0443\u0431\u043b\u0438\u043a\u0430\u0442\u044b, \u0433\u0434\u0435 \u0442\u043e, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438.\u041d\u043e \u0443 \u043f\u043b\u0438\u0442\u043e\u043a \u0435\u0441\u0442\u044c \u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c: \u0435\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438, \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0442\u0440\u0438\u043d\u0443 \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0432\u043e\u0437\u0434\u0443\u0445\u043e\u043c. \u0415\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c\u0438, \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043f\u0440\u0435\u0432\u044c\u044e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043b\u0438\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439. \u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438: \u043f\u0440\u0435\u0432\u044c\u044e, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u043f\u0443\u0442\u044c, \u0442\u0435\u0433\u0438, \u0434\u0430\u0442\u0443, \u0440\u0430\u0437\u043c\u0435\u0440. \u0421\u0440\u0435\u0434\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0433\u043b\u0430\u0432\u043d\u043e\u0435. \u041c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u043f\u0435\u0447\u0430\u0442\u043e\u043a, \u0442\u0438\u043f \u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0438\u043c\u044f.\u0422\u0430\u043a \u043f\u043b\u0438\u0442\u043a\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0430 \u0447\u0430\u0441\u0442\u044c\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0420\u0430\u0437\u043c\u0435\u0440, \u0446\u0432\u0435\u0442, \u043f\u0440\u0435\u0432\u044c\u044e \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u043e\u0435. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043f\u043b\u0438\u0442\u043a\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u201c\u0447\u0442\u043e \u044d\u0442\u043e?\u201d \u0434\u043e \u043a\u043b\u0438\u043a\u0430. \u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u043f\u043b\u0438\u0442\u043a\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0435\u0449\u0451 \u0438 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u201c\u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u043d\u0435 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e?\u201d.C# + WPF\/XAML\u041a\u0430\u043a \u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043b\u0438\u0442\u043a\u0438? \u041f\u0435\u0440\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043f\u043b\u0438\u0442\u043e\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u043d\u0435 \u043a\u0430\u043a \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0430 \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f. \u0426\u0435\u043b\u044c \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f: \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0443\u0434\u043e\u0431\u043d\u043e \u043b\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u0441\u043f\u0438\u0441\u043a\u043e\u043c, \u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438.\u0412 WPF \u043f\u043b\u0438\u0442\u043a\u0430 \u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 XAML-\u0431\u043b\u043e\u043a\u043e\u0432: Border, Grid, Image, TextBlock, ItemsControl. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430, \u0433\u0434\u0435 \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0435\u0432\u044c\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u0430\u044f \u043c\u0435\u0442\u0430\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f.&lt;Border Padding=&#187;10&#8243;        CornerRadius=&#187;8&#8243;        BorderThickness=&#187;1&#8243;        BorderBrush=&#187;#D9DEE6&#8243;        Background=&#187;White&#187;&gt;    &lt;Grid&gt;        &lt;Grid.ColumnDefinitions&gt;            &lt;ColumnDefinition Width=&#187;96&#8243; \/&gt;            &lt;ColumnDefinition Width=&#187;*&#187; \/&gt;        &lt;\/Grid.ColumnDefinitions&gt;        &lt;Border Width=&#187;88&#8243;                Height=&#187;64&#8243;                CornerRadius=&#187;6&#8243;                Background=&#187;#EEF1F4&#8243;&gt;            &lt;Image Source=&#187;{Binding PreviewImage}&#187;                   Stretch=&#187;UniformToFill&#187; \/&gt;        &lt;\/Border&gt;        &lt;StackPanel Grid.Column=&#187;1&#8243;                    Margin=&#187;12,0,0,0&#8243;&gt;            &lt;TextBlock Text=&#187;{Binding Name}&#187;                       FontSize=&#187;16&#8243;                       FontWeight=&#187;SemiBold&#187;                       TextTrimming=&#187;CharacterEllipsis&#187; \/&gt;            &lt;TextBlock Text=&#187;{Binding MetaLine}&#187;                       Margin=&#187;0,6,0,0&#8243;                       FontSize=&#187;13&#8243;                       Foreground=&#187;#687386&#8243;                       TextTrimming=&#187;CharacterEllipsis&#187; \/&gt;        &lt;\/StackPanel&gt;    &lt;\/Grid&gt;&lt;\/Border&gt;\u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 C# \u0443 \u043f\u043b\u0438\u0442\u043a\u0438 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u043d\u0430 \u0431\u0435\u0440\u0451\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u0430 \u0438 \u0433\u043e\u0442\u043e\u0432\u0438\u0442 \u0438\u0445 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u0438\u0434\u0435: \u0438\u043c\u044f, \u0442\u0438\u043f, \u0434\u0430\u0442\u0443, \u0440\u0430\u0437\u043c\u0435\u0440, \u043f\u0443\u0442\u044c, \u0442\u0435\u0433\u0438 \u0438 \u043f\u0440\u0435\u0432\u044c\u044e.  public sealed class DocumentCardViewModel{    public string Name { get; }    public string TypeLabel { get; }    public string MetaLine { get; }    public string FullPath { get; }    public IReadOnlyList&lt;string&gt; Tags { get; }    public ImageSource? PreviewImage { get; set; }    public DocumentCardViewModel(DocumentFile document)    {        Name = document.Name;        TypeLabel = document.Kind;        FullPath = document.FullPath;        Tags = document.Tags;        MetaLine = $&#187;{document.Kind} \u00b7 {document.ModifiedAt:dd MMM} \u00b7 {FormatSize(document.SizeBytes)}&#187;;    }    private static string FormatSize(long bytes)    {        if (bytes &lt; 1024)        {            return $&#187;{bytes} B&#187;;        }        if (bytes &lt; 1024 * 1024)        {            return $&#187;{bytes \/ 1024.0:0.#} KB&#187;;        }        return $&#187;{bytes \/ 1024.0 \/ 1024.0:0.#} MB&#187;;    }}\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0442\u0435\u0433\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e: \u043f\u043b\u0438\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u043c, \u0430 \u0440\u0430\u0431\u043e\u0447\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0422\u0435\u0433\u0438 \u0434\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0437\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438.  &#171;\u041f\u043b\u0438\u0442\u043a\u0430&#187;  !=  C#&lt;ItemsControl ItemsSource=&#187;{Binding Tags}&#187;              Margin=&#187;0,10,0,0&#8243;&gt;    &lt;ItemsControl.ItemsPanel&gt;        &lt;ItemsPanelTemplate&gt;            &lt;WrapPanel \/&gt;        &lt;\/ItemsPanelTemplate&gt;    &lt;\/ItemsControl.ItemsPanel&gt;    &lt;ItemsControl.ItemTemplate&gt;        &lt;DataTemplate&gt;            &lt;Border Background=&#187;#F1F5F9&#8243;                    CornerRadius=&#187;10&#8243;                    Padding=&#187;8,3&#8243;                    Margin=&#187;0,0,6,6&#8243;&gt;                &lt;TextBlock Text=&#187;{Binding}&#187;                           FontSize=&#187;12&#8243;                           Foreground=&#187;#64748B&#187; \/&gt;            &lt;\/Border&gt;        &lt;\/DataTemplate&gt;    &lt;\/ItemsControl.ItemTemplate&gt;&lt;\/ItemsControl&gt;\u04229 \u043c\u043e\u0433 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0432\u043e \u00abUI\u00bb (\u044e\u0430\u0439 \/ \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441), \u00abUWP\u00bb \u0438\u043b\u0438 \u00ab\u0443\u043c\u0435\u00bb (\u0432 \u043c\u043e\u0435\u043c \u0443\u043c\u0435 \/ \u0432 \u043a\u043e\u0434\u0435) \u0432 \u0441\u043b\u043e\u0432\u043e \u00ab\u044e\u043c\u043e\u0440\u00bb.  \u0422\u0443\u0442 \u043d\u0435 \u0441\u043c\u0435\u0435\u043c\u0441\u044f)\u041f\u0435\u0440\u0432\u0430\u044f \u043d\u0430\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043c\u043e\u0433\u043b\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a: \u0435\u0441\u0442\u044c ItemsControl, \u0432\u043d\u0443\u0442\u0440\u0438 WrapPanel, \u0430 \u043a\u0430\u0436\u0434\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u0449\u0438\u0439 \u043f\u043e\u0442\u043e\u043a. &lt;ItemsControl ItemsSource=&#187;{Binding Documents}&#187;&gt;    &lt;ItemsControl.ItemsPanel&gt;        &lt;ItemsPanelTemplate&gt;            &lt;WrapPanel \/&gt;        &lt;\/ItemsPanelTemplate&gt;    &lt;\/ItemsControl.ItemsPanel&gt;&lt;\/ItemsControl&gt;\u0414\u043b\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u044d\u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0433\u0443\u0434. \u0414\u043b\u044f \u0437\u0440\u0435\u043b\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u0443\u043c\u0430\u044e \u043d\u0435 \u043e\u0447. WrapPanel \u043d\u0435 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u0435\u0441\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u044b\u0441\u044f\u0447\u0430, WPF \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0442\u044b\u0441\u044f\u0447\u0443 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e 20.  \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0443\u0448\u043b\u0438 \u043e\u0442 \u201c\u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c \u043f\u043b\u0438\u0442\u043a\u0438 \u0432 WrapPanel\u201d \u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0435. \u0412\u043c\u0435\u0441\u0442\u043e \u0445\u0430\u043e\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0438, \u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0438\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.\u041f\u0440\u0438\u043a\u0438\u043d\u0443\u043b:public sealed class DocumentRowViewModel{    public IReadOnlyList&lt;DocumentCardViewModel&gt; Items { get; }    public DocumentRowViewModel(IReadOnlyList&lt;DocumentCardViewModel&gt; items)    {        Items = items;    }}\u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0443\u0436\u0435 \u043d\u0435 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u043f\u0440\u043e\u0441\u0442\u044b\u043d\u044e \u043f\u043b\u0438\u0442\u043e\u043a, \u0430 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0440\u043e\u043a:&lt;ListBox ItemsSource=&#187;{Binding FilteredRows}&#187;         ScrollViewer.CanContentScroll=&#187;True&#187;         VirtualizingPanel.IsVirtualizing=&#187;True&#187;         VirtualizingPanel.VirtualizationMode=&#187;Recycling&#187;&gt;    &lt;ListBox.ItemTemplate&gt;        &lt;DataTemplate&gt;            &lt;ItemsControl ItemsSource=&#187;{Binding Items}&#187;&gt;                &lt;ItemsControl.ItemsPanel&gt;                    &lt;ItemsPanelTemplate&gt;                        &lt;UniformGrid Rows=&#187;1&#8243; \/&gt;                    &lt;\/ItemsPanelTemplate&gt;                &lt;\/ItemsControl.ItemsPanel&gt;            &lt;\/ItemsControl&gt;        &lt;\/DataTemplate&gt;    &lt;\/ListBox.ItemTemplate&gt;&lt;\/ListBox&gt;\u042d\u0442\u043e \u0443\u0436\u0435 \u0431\u043b\u0438\u0436\u0435 \u043a \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435. ListBox \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0438, \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u043b\u0435\u0436\u0438\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043b\u0438\u0442\u043e\u043a. \u0422\u043e \u0435\u0441\u0442\u044c WPF \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u043d \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435 \u0432\u0441\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b.\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0441\u0435\u0442\u043a\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439. \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043b\u0438\u0442\u043e\u043a \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438. \u0415\u0441\u043b\u0438 \u043e\u043a\u043d\u043e \u0448\u0438\u0440\u043e\u043a\u043e\u0435, \u043f\u043b\u0438\u0442\u043e\u043a \u0431\u043e\u043b\u044c\u0448\u0435. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0436\u0430\u043b \u043f\u0440\u0430\u0432\u0443\u044e \u0438\u043b\u0438 \u043b\u0435\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c, \u0441\u0435\u0442\u043a\u0430 \u043f\u0435\u0440\u0435\u0441\u0447\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f.private int CalculateColumns(double availableWidth){    const double minTileWidth = 220;    const int minColumns = 2;    const int maxColumns = 8;    var columns = (int)(availableWidth \/ minTileWidth);    return Math.Clamp(columns, minColumns, maxColumns);}\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u0432\u0438\u0434\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0438 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u0443\u0441\u0442\u0443\u0435\u0442. \u041f\u043b\u0438\u0442\u043a\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043b\u043e\u0442\u043d\u0435\u0435.\u041d\u043e \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0443\u0431\u0438\u0432\u0430\u0442\u044c \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043b\u0438\u0442\u043a\u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438. \u0423 \u043d\u0435\u0451 \u0435\u0441\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e. \u0415\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u044f\u0442\u0441\u044f \u0432 \u0448\u0443\u043c.\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433: \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.public enum DocumentViewMode{    Cosmos,    Compact,    List}Cosmos \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430: \u043a\u0440\u0443\u043f\u043d\u0435\u0435 \u043f\u0440\u0435\u0432\u044c\u044e, \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430, \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0443\u0437\u043d\u0430\u0432\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0433\u043b\u0430\u0437\u0430\u043c\u0438.Compact \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043f\u043b\u043e\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b: \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u043e\u0437\u0434\u0443\u0445\u0430, \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.List \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f: \u043f\u0443\u0442\u044c, \u0434\u0430\u0442\u0430, \u0440\u0430\u0437\u043c\u0435\u0440, \u0442\u0438\u043f, \u0441\u0442\u0430\u0442\u0443\u0441\u044b.\u0422\u0430\u043a \u043f\u043b\u0438\u0442\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u044e\u0442 \u0431\u044b\u0442\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041e\u043d\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0440\u0435\u0436\u0438\u043c\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u043e\u0440\u043e\u0448 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0441\u043a\u0430. \u0410 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0443\u0436\u043d\u0430 \u0431\u0443\u0445\u0433\u0430\u043b\u0442\u0435\u0440\u0441\u043a\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c, \u043e\u043d \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a. \u041f\u043b\u0438\u0442\u043a\u0438\u041a\u0430\u043a \u043b\u0435\u0447\u044c \u043f\u043e\u0434 \u043f\u043b\u0438\u0442\u043a\u0443?\u041f\u043b\u0438\u0442\u043a\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0435 \u0440\u043e\u0434\u0438\u043b\u0438\u0441\u044c \u043a\u0430\u043a \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438\u0434\u0435\u044e: \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u0438\u043a\u0435, \u0430 \u043a\u0430\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u044b \u043d\u0430\u0431\u0440\u043e\u0441\u0430\u043b\u0438 \u043d\u0430 C# + WPF\/XAML: \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e Windows-\u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430, \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u0431\u043e\u043a\u043e\u0432\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438, \u043f\u0440\u0435\u0432\u044c\u044e \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0430\u044f \u043f\u043b\u0438\u0442\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:&lt;Border Padding=&#187;10&#8243;        CornerRadius=&#187;8&#8243;        BorderThickness=&#187;1&#8243;        BorderBrush=&#187;#D9DEE6&#8243;        Background=&#187;White&#187;&gt;    &lt;Grid&gt;        &lt;Grid.ColumnDefinitions&gt;            &lt;ColumnDefinition Width=&#187;96&#8243; \/&gt;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-485554","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/485554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=485554"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/485554\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=485554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=485554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=485554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}