App Studio – нова версія онлайн конструктора програм від Microsoft. Створення Windows-програм

💖 Подобається?Поділися з друзями посиланням

Створення віконної програми Visual Studio

Введення у створення віконних програм

Функції API для роботи з консоллю

Структура віконної програми

Елементи керування вікна

Графіка у віконних програмах

В операційній системі Windows можливі 3 типи структур програм:

  • діалогова (основне вікно – діалогове),
  • консольна, або безвіконна структура,
  • класична (віконна, каркасна) структура

Діалогові програми Windows мають мінімальний інтерфейс зв'язку з користувачем і передають інформацію користувачеві за допомогою стандартних діалогових вікон (наприклад, вікно повідомлення MessageBox() ). Робота програми відбувається «наосліп».

Невіконні (консольні) програмиє програмою, що працює в текстовому режимі. Робота консольної програми нагадує роботу програми MS-DOS. Але це лише зовнішнє враження. Консольний додаток забезпечується спеціальними функціями Windows. Консольні додатки є системою засобів взаємодії користувача з комп'ютером, засновану на використанні текстового (літерно-цифрового) режиму дисплея або аналогічних (командний рядок MS-DOS, Far). Консольні програми дуже компактні не тільки у відкомпілюваному вигляді, але й у текстовому варіанті, і мають такі ж можливості звертатися до ресурсів Windows за допомогою API-функцій, як і віконні програми.

Віконні (каркасні) програмибудуються на базі спеціального набору функцій API, що становлять графічний інтерфейскористувача (GUI, Graphic User Interface). Головним елементом такої програми є вікно. Вікно може містити елементи управління: кнопки, списки, вікна редагування та ін. Ці елементи, по суті, також є вікнами, але мають особливі властивості. Події, що відбуваються з цими елементами (і самим вікном), призводять до надходження повідомлень у процедуру вікна.

Різниця між віконними та консольними програмами Windows полягає в тому, з яким типом інформації вони працюють.

Є думка, що в реальному житті смартфони з ОС від Microsoft зустрічаються так само часто, як люди з по батькові Артемович. Дивна (м'яко кажучи) політика «Корпорації зла» щодо сьомого та восьмого сімейств мобільного операційної системивідвернула безліч користувачів від експериментів з «віконцями» для смартфонів, і зараз корпорація всерйоз взялася за виправлення свого іміджу в цій ніші користувача. Як підпільний фанат Microsoft я сподіваюся, що у них все вийде – «десятка» крокує планетою, її головний козир – одне ядро ​​для всіх платформ, і тому у неї є всі шанси перетягнути на себе хорошу частину мобільного ринку. А як програміст я із задоволенням зроблю тобі вступну статтю з розробки під цю мобільну вісь, щоб ти завжди був готовий до зростання її популярності:).

Огляд архітектури

Завдяки загальному ядру та системі виконання додатків UWP одного разу написаний додаток буде працювати на всіх девайсах під керуванням Windows 10. До цього діапазону входять:

  • настільні комп'ютери;
  • серверні системи - ОС Windows Server 2016;
  • ноутбуки – MS Surface Book;
  • планшети – MS Surface Pro;
  • смартфони – Lumia;
  • ігрові приставки – Xbox One;
  • окуляри доповненої реальності – MS HoloLens;
  • настінні планшети – MS Surface Hub;
  • розумний годинник - MS Band 2.

Список значний. Крім того, UWP не обмежується виконанням прикладних програм, також вона на ядерному рівні підтримує роботу драйверів. Це дозволяє створювати драйвери, які функціонують на різних пристроях, за умови, що конкретний компонент, для якого призначений даний драйвер, один і той же.

UWP підтримує драйвери як рівня ядра, так і рівня користувача. Підсистема включає інтерфейси драйверів пристроїв (Device Driver Interface - DDI), серед яких драйвер для UWP може використовувати.

Але це все не позбавляє розробника від припасування інтерфейсу під певні платформи та дозволу екрану. У якихось особливих випадках, можливо, це не знадобиться.

Інструменти розробника

Для написання, налагодження, розгортання та тестування програм під Windows 10 Mobile тобі знадобиться Visual Studio 2015 (хто би сумнівався). Цього літа вийшов третій апдейт. Категорично рекомендую! Основний його багфікс - це зменшення споживання пам'яті в порівнянні з другим апдейтом.

Також тобі знадобиться Windows 10 Anniversary Update SDK: він включає всі необхідні інструменти для розробки програм під весь парк пристроїв, що працюють на Windows 10. Якщо ж використовується VS 2015 з третім оновленням, тоді до неї вже входить найновіший SDK.

Одне з головних новацій - це чорнило Windows (Windows Ink). За допомогою цього API можна двома рядками коду додати підтримку пера. Для цього існують два об'єкти управління: InkCanvas та InkToolbar.

Новий Cortana API полегшує реалізацію управління голосом. Компонент Cortana Actions у новому API дозволяє створювати нові фрази/вирази.

Біометрична автентифікація Windows Hello тепер стала доступною для веб-розробників у браузері Edge.

Засіб для моделювання інтерфейсів користувача Blend for Visual Studio 2015 надає розширені можливості побудови інтерфейсу в порівнянні з VS. З його допомогою на мові XAML можна створювати макети всіх програм, що підтримуються: прикладних, веб, універсальних, мобільних і так далі. Також він містить конструктори для додаткових завдань, Серед них створення анімації та управління поведінкою елементів.

Способи створення програм для Windows 10 Mobile

Основний спосіб створення програм для смартфонів з Windows 10 Mobile - це розробка універсальних (UWP) додатків(Суту Visual C# → Windows → Universal майстри створення проекту).

Однак він не єдиний. Як ти знаєш, у Visual Studio 2015 вбудований Xamarin, за його допомогою також можна створювати програми для Windows 10 Mobile, одночасно для Android та iOS, змінюючи інтерфейс та залишаючи програмну логіку на C# (Visual C# → Cross-Platform).

Крім мови Visual C#, рівнозначно можна вибрати Visual Basic або Visual C++. VS 2015 дозволяє створювати універсальні додатки з допомогою JavaScript(JavaScript → Windows → Універсальні програми). Їх також можна розгорнути на пристрої Windows 10 Mobile.

Інструменти для роботи з успадкованими проектами

За довгу історію операційної системи Windowsдля неї було створено колосальну кількість різних додатків. З виходом Windows 8 і WinRT (а пізніше Windows 10 і UWP) старі класичні програми залишилися в минулому, оскільки тільки в настільних Win 8 і Win 10 підтримуються класичні Win32-, COM-, .NET-програми. Від цього Microsoft стало сумно. Але хлопці збагнули, що можуть розробити конвертер, який перетворюватиме старі програми для нової просунутої UWP-підсистеми. З цього народився Desktop App Converter.

Перетворення Xcode-проекту виконується за два кроки. Спочатку треба додати підсвічування синтаксису мови Objective-C у Visual Studio: встановити розширення objc-syntax-highlighting.vsix із папки winobjc\bin. Потім за допомогою утиліти командного рядка vsimporter.exe треба перетворити проект на Xcode на проект на VS. Після цього отриманий sln файл можна відкрити в студії, де синтаксис Objective-C буде підсвічений. Можеш побудувати та запустити програму, вона буде виконуватися так само, як усі інші Windows-програми.

Побий мене грім, як це дивно - бачити в Visual Studio коректно підсвічений код Objective-C!

Для компіляції коду Obj-C використовується вільний компілятор Clang. Оскільки на виході виходить стандартний UWP-додаток, його можна запустити на мобільному пристроїв середовищі Windows 10 Mobile. В одній програмі може бути код C++ і на Obj-C.

Якщо у тебе є проект для минулого версії Windows Phone, тобто 8.1 (або 8.0), то коли ти його відкриєш в VS 2015, студія автоматично оновить проект, щоб він відповідав вимогам універсального програми Windows(UWP). Буде перетворена не тільки розмітка інтерфейсу користувача на XAML, але і разом з нею програмна логіка на JS/C++/C#/VB. Якщо в коді були виклики підсистеми WinRT, вони будуть перетворені на виклики UWP.

Є ще поширений тип додатків – ігри. iOS та Android візуалізують за допомогою низькорівневого інтерфейсу OpenGL. З іншого боку, на Windows 10 Mobile для виведення зображення в іграх використовується DirectX 11. Виходить несумісність. Але є рішення - відкритий проект ANGLE. ANGLE (Almost Native Graphics Layer Engine) – движок майже нативного графічного шару – дозволяє користувачам Windowsбезшовно запускати OpenGL ES програми на апаратурі, що працює з DirectX 11. Це досягається шляхом перетворення викликів із OpenGL ES API на DirectX 11 API. ANGLE повністю підтримує такі три типи додатків:

  • універсальні програми для Windows 10 (Universal Windows apps);
  • програми для Windows 8.1 та Windows Phone 8.1;
  • класичні програми для робітника столу Windows(Windows desktop applications).

Більш докладно питання розглядається в моїй книзі «Чарівність моменту обертання» (знову ти книгу свою піариш! Ну лаадно, заслужив. – Прим. ред.).

Продовження статті доступне лише передплатникам

Варіант 1. Оформи передплату на «Хакер», щоб читати всі статті на сайті

Підписка дозволить тобі протягом зазначеного терміну читати ВСІ платні матеріали сайту, включаючи цю статтю. Ми приймаємо оплату банківськими картками, електронними грошима та переказами з рахунків мобільних операторів.

У діалозі New Project Visual Studio виберемо Visual C#, Silverlight for Windows Phone та простий шаблон програми Windows Phone Application і назвемо його ExploringXAMLFeatures.


У діалозі вибору цільової операційної системи оберемо Windows Phone OS 7.1


Після створення проекту, вікно Visual Studio набуде наступного вигляду


Розглянемо структуру проекту у вікні Solution Explorer:

Назва файлу Призначення
AppManifest.xmlФайл маніфесту, необхідний для генерації файлу XAP, в який упаковується програма для розгортання на телефоні.
AssemblyInfo.csЩе один конфігураційний файл, в якому визначаються деякі метадані головного складання (Assembly) програми.
WMAppManifest.xmlФайл метаданих, який містить різноманітні налаштування програми: заголовок, завдання першої сторінки, шляхи до іконок, визначення необхідних системних можливостейі т.д.
App.xamlЦе файл ресурсів програми. Тут розташовуються глобальні ресурси (це буде розглянуто при використанні стилів) або глобальні події (при старті програми). Цей файл також є точкою входу програми.
App.xaml.csКод файлу (code-behind) для App.xaml. Тут можна обробляти події та помилки рівня програми, у тому числі його здобуття. Цю концепцію буде розглянуто пізніше, коли розглядатиметься багатозадачність.
ApplicationIcon.pngКартинка, яка буде піктограмою програми в телефоні. Це дійсно важливий файл, так як він є першим, що побачать користувачі під час роботи з програмою.
Background.pngЦя картинка використовується, коли програма закріплена на стартовому екрані телефону (start screen). По суті, це велика іконка програми. Розумно зробити її візуально схожою на ApplicationIcon.png.
MainPage.xamlЦе частина вибраного шаблону програми. Назва MainPaige не дуже вдала, але саме вона використовується шаблоном проекту за умовчанням. Ця сторінка представляє інтерфейс, який бачить користувач під час старту програми.
MainPage.xaml.csФайл коду MainPage.xaml.
SplashScreenImage.jpgЦя картинка відображається під час завантаження програми. Можна встановити зображення з анімацією, щоб поінформувати, що програма завантажується. Є техніка створення дуже динамічних сторінок завантаження на XNA, але вона виходить далеко за межі цього циклу статей.

Файли XAML визначають інтерфейс програми. Насправді це просто XML файлиіз мовою розмітки XAML.

Незважаючи, що це найпростіший проект, він містить усі ключові елементи, які містять усі інші шаблони та типи проектів.

Зверніть увагу, що частина налаштувань, представлених у вигляді конфігураційних файлів, можуть редагуватися у візуальному інтерфейсі редагування налаштувань програми.

Додавання елементів керування на сторінку XAML

Зверніть увагу, що Visual Studio відображає і дизайн, і XAML код сторінки.

Якщо ви переходили до перегляду інших файлів рішення, подвійним клацанням перейдіть на файл MainPage.xaml.

У XAML код файлу MainPage.xaml всередину елеметна Grid з ім'ям ContentPanel вставте елемент керування Button:

У вікні дизайну кнопка з'явиться приблизно в центрі інтерфейсу. Звернули увагу на атрибут Name? Це унікальний ідентифікатор елемента, який допомагає посилатися на нього код. Вважайте це ID атрибутом елемента керування. Давайте тепер додамо якісь дії при натисканні на цю кнопку. Є два способи прив'язати подію до кнопки Button (або будь-якого іншого елемента керування). У XAML, прямо у визначенні Button, можна додати атрибут Click і система InteliSense автоматично запитає, чи хочемо ми згенерувати новий обробник подій:


Можна пов'язати обробник подій безпосередньо в коді сторінки Home.xaml.cs, не вказуючи його в XAML файлі:

Public MainPage() ( InitializeComponent(); MyButton.Click +=new RoutedEventHandler(MyButton_Click); )

Обидва способи працюють. Можете використовувати будь-який із них. Для спрощення тут буде використовуватися визначення методу XAML. Тепер у функції MyButton_Click можна написати керований код, який змінюватиме інтерфейс або викликати інші функції. Завершимо наш приклад програми, додавши код, який змінюватиме текст у TextBlock PageTitle (PageTitle – це Name, так що можна посилатися на неї безпосередньо в коді) на «привіт wp7». Щоб зробити це допишемо наступний код у функцію:

Private void MyButton_Click(object sender, RoutedEventArgs e) ( PageTitle.Text = "привіт wp7"; )

Виберемо в налаштуваннях проекту Windows Device Emulator

І запустимо програму, натиснувши на зелений трикутник або копію F5. Після запуску програми та натискання на кнопку «Натисніть мене», вигляд екрана повинен бути аналогічним знімку екрана нижче:

Додавання нових сторінок до проекту

Тільки найпростіший додаток складається з однієї сторінки. Ми хочемо навчитися писати складні багатосторінкові програми. Ми можемо використовувати шаблони Pivot, Panorama, можемо використовувати патерн проектування MVVM (Model-View-ViewModel), а спочатку навчимося додавати нові сторінки в проект і переходити між ними.

У вікні Solution Explorer клацніть правою кнопкою миші по назві проекту, і в меню виберемо, Add, далі New Item, у діалоговому вікні виберемо Windows Phone Portrait Page і назвемо її SecondPage.xaml:


Тепер у нас є порожня сторінка XAML, точна копія сторінки MainPage.xaml до того, як ми її відредагували.

Щоб краще розрізняти сторінки, перейдемо до XAML коду сторінки SecondPage і в елементі TextBlock з Name PageTitle відредагуємо властивість Text, як показано нижче:

Навігація між сторінками програми

Отже, у проекті є дві сторінки, при запуску програми відображається сторінка MainPage.xaml. Як перейти зі сторінки MainPage.xaml на SecondPage.xaml?

Спробуємо два простих способу, як це зробити.

У XAML код файлу MainPage.xaml після доданого раніше коду Button, додамо код HyperlinkButton, як показано нижче:

Розповісти друзям