останнє оновлення: 26.05.2019

Xamarin.Forms візуальний інтерфейс складається зі сторінок. Сторінка є об'єктом класу Page , вона займає весь простір екрану. Тобто те, що ми бачимо на екрані мобільного пристрою- Це сторінка. Програма може мати одну або кілька сторінок.

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

Візьмемо створений у колишній темі проект HelloApp (або створимо новий). За замовчуванням весь інтерфейс створюється в класі App, який міститься у файлі App.xaml.cs і який представляє поточну програму:

Його код за замовчуванням:

Using System; using Xamarin.Forms; using Xamarin.Forms.Xaml; namespace HelloApp ( public partial class App: Application ( public App() ( InitializeComponent(); MainPage = new MainPage(); ) protected override void OnStart() ( // Handle when your app starts ) protected override void OnSleep() ( / / Handle when your app sleeps ) protected override void OnResume() ( // Handle when your app resumes ) ) )

Робота класу App починається з конструктора, де спочатку викликається метод InitializeComponent(), який виконує ініціалізацію об'єкта, а потім встановлюється властивість MainPage. Через цю властивість клас App встановлює головну сторінкупрограми. У цьому випадку вона визначається класом HelloApp.MainPage, тобто тим класом, який визначено у файлах MainPage.xaml та MainPage.xaml.cs.

Але даний шляхне єдиний. Xamarin.Forms дозволяє створювати візуальний інтерфейс як за допомогою C# коду, так і декларативним шляхом за допомогою мови xaml, аналогічно html, або комбінуючи ці підходи.

Створення інтерфейсу із коду C#

Додамо в проект HelloApp звичайний клас мовою C#, яку назвемо StartPage.

І визначимо у цьому класі такий вміст:

Using Xamarin.Forms; namespace HelloApp ( class StartPage: ContentPage ( public StartPage() ( Label header = new Label() ( Text = "Привіт з Xamarin Forms" ); this.Content = header; ) ) )

Цей клас представляє сторінку, тому успадковується від класу ContentPage. У конструкторі створюється мітка з текстом, яка задається як вміст сторінки (this.Content = header).

Щоб позначити MainPage як стартової сторінки, змінимо клас App:

Using Xamarin.Forms; namespace HelloApp ( public partial class App: Application ( public App() ( InitializeComponent(); MainPage = new StartPage(); ) protected override void OnStart() ( // Handle when your app starts ) protected override void OnSleep() ( / / Handle when your app sleeps ) protected override void OnResume() ( // Handle when your app resumes ) ) )

Тепер властивість MainPage вказує на щойно створену сторінку StartPage.

Також варто зазначити, що у Visual Studio є готовий шаблондля додавання нових класів сторінок із найпростішим кодом. Так, щоб додати нову сторінку, потрібно при додаванні нового елемента вибрати шаблон Content Page (C#) :

Цей клас додається в головний проектрішення (у разі це HelloApp).

Доданий клас сторінки матиме наступний код:

Using System; використовуючи System.Collections.Generic; using System.Linq; використовуючи System.Reflection.Emit; using System.Text; using Xamarin.Forms; namespace HelloApp ( public class Page1: ContentPage ( public Page1() ( Content = New StackLayout ( Children = ( New Label ( Text = " Hello Page " ) ) ) ) ) ) )

Цей клас також успадковуватиметься від базового класу ContentPage і матиме практично ту саму організацію, що й вище створений клас MainPage.

І також у класі програми ми можемо встановити цю сторінку як стартовий:

Using Xamarin.Forms; namespace HelloApp ( public partial class App: Application ( public App() ( InitializeComponent(); MainPage = new Page1(); ) //........... ) )

Міністерство освіти і науки Російської Федерації

Федеральна державна бюджетна освітня установа

вищої професійної освіти

«УФІМСЬКИЙ ДЕРЖАВНИЙ НАФТОВИЙ

ТЕХНІЧНИЙ УНІВЕРСИТЕТ"

Кафедра обчислювальної техніки та інженерної кібернетики

Створення програми з графічним інтерфейсом користувача серед microsoft visual studio 2010

Навчально-методичний посібник

для проведення лабораторних та практичних занять

зі студентами напряму

230100 (09.03.01) «Інформатика та обчислювальна техніка»

У навчально-методичному посібнику наведено теоретичні відомості, завдання для практичних та лабораторних робіт курсу «Програмування».

Посібник адресовано викладачам дисципліни, а також студентам напряму: 230100 «Інформатика та обчислювальна техніка».

Укладачі: Габдулліна А.А., ст. викладач каф. ВПС

Дружинська Є.В., ст. викладач каф. ВПС

Рецензент: Філіппов В.М., к.т.н., доцент каф. ВПС.

1. Теоретичні відомості 4

1.1. Основні поняття 4

1.2. Знайомство з програмою Windows Form у Microsoft Visual Studio 2010 4

1.3. Елемент керування Form 7

1.5. Функція MessageBox 9

1.6. Елемент керування TextBox 10

2. Практичне завдання. Знайомство з програмою Windows Form у Microsoft Visual Studio 2010 12

2.1. Структура оцінювання виконаної роботи 12

2.2. Порядок виконання практичної роботи 12

3. Лабораторна робота. Розробка програм у середовищі Microsoft Visual Studio 2010 16

3.1. Порядок виконання лабораторної роботи 16

3.2. Завдання 1. Табулювання функції та обчислення її значень у зазначеному інтервалі із заданим кроком 16

3.3. Індивідуальні завдання 19

3.4. Завдання 2. Обробка двовимірних масивів 21

3.5. Індивідуальні завдання 27

1. Теоретичні відомості

1. 1.1. Основні поняття

Автоматизація інформаційних процесів нині представляється, насамперед, розробкою програмного додатка з графічним інтерфейсом користувача (GUI), управляючого потоками даних.

Графічний інтерфейс користувача (Graphical User Interface, GUI) це система засобів для взаємодії користувача з пристроєм, заснована на представленні всіх доступних користувачеві системних об'єктів та функцій у вигляді графічних компонентів екрана (вікон, кнопок, смуг прокручування тощо).

Найчастіше елементи інтерфейсу в GUI реалізовані на основі метафор та відображають їх призначення та властивості, що полегшує розуміння та освоєння програм непідготовленими користувачами. Таким чином, робота користувача здійснюється з екранними формами, що містять об'єкти управління та панелі інструментів із кнопками дій для обробки.

Стандартний графічний інтерфейс користувача повинен відповідати низці вимог:

Підтримувати інформаційну технологію роботи користувача із програмним продуктом;

Орієнтуватися на кінцевого користувача, який спілкується із програмою на зовнішньому рівні взаємодії;

Задовольняти принципу «шості», як у одну лінійку меню включають трохи більше 6 понять, кожне у тому числі містить трохи більше 6 опцій;

зберігати стандартизоване призначення графічних об'єктів і, по можливості, їхнє розташування на екрані.

В об'єктно-орієнтованому програмуванні ми маємо справу з класами та об'єктами. Об'єкти – це складові типи даних: вони об'єднують кілька значень у єдиний модуль і дозволяють нам записувати та зберігати ці значення на ім'я. Іншими словами, об'єкт – це невпорядкована колекція властивостей, кожна з яких має ім'я та значення. Іменовані значення, що містяться в об'єкті, можуть бути елементарними типами, наприклад числами або рядками, так і іншими об'єктами.

Під час створення не консольних додатків, основним поняттям є Форма.

Форма – це контейнер розміщувати елементів управління середовища розробки.

Властивості – можливість отримання доступу до інформації, що зберігається у цьому елементі.

Методами називають набір дій, які може здійснювати об'єкт.

Подія – дія, розпізнаване об'єктом (наприклад, клацання мишею, натискання клавіші), якого можна запрограмувати відгук, тобто. реакцію об'єкта на подію.

Доброго вам дня! У цьому уроці ми створимо Вашу першу програму з графічним інтерфейсом у MS Visual Studio. Це буде свого роду Hello World для графічних додатків. Скажу одразу, що використання Windows Forms — не єдиний спосіб створення графічних програм (додатки з графічним інтерфейсом користувача) для C# програмістів, але почати вивчення краще саме з цього. Отже, запускаємо Visual Studio.

Запустили? Тоді до діла! Йдемо в головне меню і вибираємо пункт "Файл - Створити - Проект", як показано на малюнку нижче.

У вікні:

• у лівій частині вибираємо "Шаблони - Visual C # - Windows";
• в основній області вибираємо елемент « Програма Windows Forms»;
• у нижній частині вікна вводимо ім'я проекту та вказуємо його розташування на диску.

Загалом, як показано на малюнку нижче.

Вказали, що потрібно? Тоді натискайте кнопку «OK». Тепер ви повинні побачити приблизно наступне (основні області виділені прямокутниками):

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

В області дизайнера зараз розташовується порожня «форма», це так зване вікно, в даному випадку, головне вікно нашої програми. В області властивостей, відображаються властивості виділеного в дизайнері елемента, в даному випадку, нашої форми, а область оглядача рішень, містить файли проекту, у тому числі, що відносяться і до форм (вікнів) програми. А тепер, давайте трохи змінимо нашу форму, і запустимо цей перший додаток.

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

Властивість «Text» основної форми програми

Зверніть увагу, у лівому стовпці вказано ім'я (назва властивості), а правому — його значення.

В даному випадку, ми маємо справу з текстовою властивістю, і його значення, що відображається в заголовку вікна, так що, давайте тепер вкажемо там щось своє, наприклад, щось на зразок: «Головне вікно», як показано на малюнку нижче:

Тепер можна зібрати проект і запустити. Для цього йдемо в головне меню та вибираємо пункт «Складання — Зібрати рішення». А потім запускаємо програму, для цього вибираємо пункт «Налагодження - Запуск без налагодження» у головному меню. В результаті Ви повинні побачити наступне вікно.

У наступному уроці ми розглянемо просту роботуз дизайнером форм, та налаштування елементів графічного інтерфейсу, а на цей урок добіг кінця, ми створили перший графічний додаток, зібрали і запустили його.

5

Я зробив багато різних розділів GUI-системи для Nintendo DS, таких як кнопки та текстові поля та прапорці, але мені потрібен спосіб приховати ці класи в одному класі Gui, щоб я міг малювати все на екрані все відразу, і одразу перевірте всі кнопки, щоб перевірити, чи натиснуто будь-які кнопки. Моє питання - як найкраще організувати всі класи (наприклад, кнопки та текстові поля) в один GUI-клас?

Ось один спосіб, яким я думав, але це не здається правильним:

Edit:Я використовую C++.

Class Gui (public: void update_all(); void draw_all() const; int add_button(Button *button); // Returns button id void remove_button(int button_id); private: Button *buttons; int num_buttons; )

Цей код має кілька проблем, але я просто хотів дати вам уявлення про те, що я хочу.

• 5 відповідей

Сортування:

Активність

2

Це питання дуже схоже на те, що я збирався публікувати, тільки моє призначене для програмування Sony PSP.

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

Class uiElement() ( ... virtual void Update() = 0; virtual void Draw() = 0; ... ) class uiButton() public: uiElement ( ... virtual void Update(); virtual void Draw() ; ... ) class uiTextbox() public: uiElement ( ... virtual void Update(); virtual void Draw(); ... ) ... // Other ui Elements class uiWindow() ( ... void Update (); void Draw(); void AddElement(uiElement *Element); void RemoveElement(uiElement *Element); std::list Elements; ... ) void uiWindow::Update() ( ... for (list ::iterator it = Elements.begin(); it! = Elements.end(); it++) it->Update(); ... ) void uiWindow::Draw() ( ... for (list ::iterator it = Elements.begin(); it! = Elements.end(); it++) it->Draw(); ... )

princple є створення вікна і attact елементів інтерфейсу користувачадо нього, і викликати відмальовування та оновлення методи з відповідних основних функцій.

У мене поки що нічого не працює, тому що у мене проблеми з кодом малювання. З різними API-інтерфейсами на ПК та PSP я переглядаю код оболонки для OpenGL та psp gu.

Надіюсь це допоможе.

0

Одна корисна стратегія, яку слід пам'ятати, може бути composite pattern . На низькому рівні він може дозволити вам легше обробляти всі об'єкти GUI (та колекції об'єктів) після їх створення. Але я не знаю, що пов'язано з дизайном графічного інтерфейсу GUI, тому одне місце, щоб знайти спільне натхнення, це вихідний код існуючого проекту. WxWidgets – це крос-платформний графічний інтерфейс з доступним вихідним кодом. Удачі з вашим проектом!

0

3

Для тих, хто зацікавлений, ось мій з відкритим вихідним кодом, BSD-ліцензовані GUI інструментарій для DS:

Відповідь на предмет2k досить хороша, але я б серйозно рекомендував мати код, що містить елементи дочірнього інтерфейсу в базовому класі uiElement. Це зразок, за яким я стежив у Вупсі.

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

• Таблічні панелі можна змоделювати як кілька кнопок, згрупованих у єдиний батьківський елементінтерфейсу користувача, який забезпечує взаємну винятковість вибору;
• Групи радіостанцій (з часом);
• Смуги прокручування можуть бути представлені як елемент слайдера/жолоба та кнопки вгору/вниз;
• Списки прокручування можуть бути представлені у вигляді контейнера і декількох елементів інтерфейсу користувача.

Крім того, варто пам'ятати, що DS має процесор з частотою 66 МГц і 4 МБ ОЗУ, який використовується як для зберігання вашої програми, так і для її виконання (DS-диски завантажуються в ОЗУ до їх запуску). Ви дійсно повинні розглядати його як вбудовану систему, що означає, що STL немає. Я видалив STL з Woopsi та зумів зберегти 0.5MB. Не так багато за настільними стандартами, але це 1/8 загальної доступної пам'яті DS, споживаної STL-сміттям.

Я докладно весь процес написання інтерфейсу користувача на моєму блозі:

Вона включає в себе опис двох алгоритмів я придумав для перемальовки екрану, який хитра частина створення графічного інтерфейсу (одне просто розбиває прямокутники вгору і запам'ятовує видимі області, а інше використовує дерева BSP, що набагато ефективніше та простіше для розуміння), поради щодо оптимізації тощо д.

У цій статті йдеться про створення найпростіших додатків із використанням форм мовою C++. Відразу хочу внести ясність: розробка «формових» С++ додатків буде здійснюватися серед Microsoft Visual Studio (увійдемо стороною головного конкурента від компанії Borland Software). Варто відзначити, що Visual Studio є два способи зробити додаток з формами, рішення приймається в момент створення нового проекту.

Перший з них – використовувати Windows Forms, що реалізує графічний інтерфейс користувача та входить до Microsoft.NET Framework. Цей підхід спрощує доступ до інтерфейсних елементів Microsoft Windowsзавдяки створенню обгортки для Win32 API в керованому коді. Якщо викласти свої думки у більш зрозумілій формі, то даний підхід дуже схожий на побудову консольного додатка, але трохи складніший т.к. використовує форми.

Другий спосіб заснований на використання Microsoft Foundation Classes (MFC), бібліотеці, яка бере на себе турботу про створення каркасу програми. На відміну від першого, MFC "з коробки" використовує паттерн MVC (Model-View-Cont roller). Даний підхід складніше першого, але спираючись на нього можна створити каркас для вельми цікавих додатків, наприклад, текстового редактораабо використовувати компонент Ribbon і зробити меню як у відомому MS Office 2010.

Створення програми у MS Visual Studio

Давайте створимо нову програму: File->New->Project. У вікні як на малюнку вище знайдіть і виберіть Windows Forms Application, далі вкажіть назву (app1) і розташування нового проекту і підтвердіть його створення натисканням кнопки «OK».

Перш ніж розпочати безпосередньо програмування, слід зрозуміти, що таке подія. Подія це дія, що відбувається за певних умов. Найпростішими (і найпоширенішим і) можна вважати Load, Click ... розглянемо деякі з них докладніше:

• Activated - подія, що виникає під час активізації елемента.
• Click – виникає при одиночному натисканні на елемент.
• DoubleClick - подвійне клацання по елементу.
• HelpRequested – спрацьовує при натисканні клавіші .
• Paint – виникає, коли елемент перемальовується.
• MouseLeave - подія спрацьовує, коли курсор залишає межі елемента.

Не слід забувати, що властиві елементу події залежить від його типу. Щоб переглянути всі доступні для об'єкта форми події, слід виділити його та у вікні властивостей вибрати значок блискавки. Нижче наведено частину подій для елемента Form1. Як можна бачити для події Load вибрано функцію Form1_Load, отже код, що міститься в цій функції, буде викликаний при завантаженні форми.

Відкрийте файл Form1.h, там буде такий код:

Private: System::Void Form1_Load(System::Object^ sender, System::EventArgs^ e)( )

Це та сама функція Form1_Load, яка спрацьовує при завантаженні форми. Давайте переконаємось у цьому, додавши на форму компонент TextBox.

Для цього відкрийте ресурс форми та виділіть його. Далі виберіть панель з інструментами Toolbox та перетягніть компонент TextBox на форму. Модифікуйте функцію Form1_Load таким чином:

Private: System::Void Form1_Load(System::Object^ sender, System::EventArgs^ e) ( textBox1->Text = "Hello, World!"; //textBox1 – ім'я доданого вами текст боксу )

Запустіть проект, у результаті має з'явитися таке повідомлення:

На цьому поки що все, продовження в наступних уроках.