Как создать оконное приложение на с

Методология разработки приложений с использованием форм

В этой статье речь пойдет о создании простейших приложений с использованием форм на языке 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 — срабатывает при нажатии клавиши <F1>.
• Paint — возникает, когда элемент перерисовывается .
• MouseLeave — событие срабатывает, когда курсор покидает границы элемента.

Не стоит забывать, что свойственные элементу события зависят от его типа. Чтобы просмотреть все доступные для объекта формы события следует выделить его и в окне свойств выбрать значок молнии. Ниже показана часть событий для элементаForm1. Как можете видеть для события Load выбрана функция Form1_Load, следовательно код, содержащийся в этой функции будет вызван при загрузке формы.

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

Это та самая функция Form1_Load, срабатывающая при загрузке формы. Давайте убедимся в этом, добавив на форму компонент TextBox.

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

C++. Создание приложения типа Windows Forms Application в MS Visual Studio — C++. Обзор основных файлов проекта

Создание приложения типа Windows Forms Application в MS Visual Studio — C++ . Обзор основных файлов проекта

В данной теме рассмотрены особенности создания приложения типа Windows Forms Application с поддержкой языка C++ . Такой тип приложения поддерживает все преимущества технологии .NET Framework .

Выполнение

1. Загрузить Microsoft Visual Studio .

В результате будет создано окно с активной вкладкой Start Page (рисунок 1).

Рисунок 1. Окно Microsoft Visual Studio

2. Создание приложения типа Windows Forms Application

Чтобы создать новый проект (решение) на языке C++ , нужно выбрать последовательность команд (рис. 2):

Система Microsoft Visual Studio предлагает разные виды шаблонов приложения для программирования на языке C++ (рис. 2).

Рисунок 2. Вызов команды создания нового проекта

В результате откроется окно « New Project » (рисунок 3), в котором нужно выбрать шаблон « Visual C++ » и тип приложения Windows Forms Application .

В поле « Location: » надо задать путь к папке, в которой будет сохранен проект. В нашем случае задан следующий путь

В поле Name задается имя приложения. В нашем случае это имя « MyApp01 «.

Если включена опция « Create directory for solution » (создать директорию для решения), то проект будет сохранен в папке

В поле « Solution name: » задается имя решения. Решение ( solution ) может объединять в себе несколько проектов. В нашем случае имя решения остается таким как и имя проекта.

Рисунок 3. Окно « New Project » создания нового проекта

3. Основные элементы оконного интерфейса для работы с программой

После выбора «ОК» в предыдущем окне « New Project «, система Microsoft Visual Studio создаст весь необходимый код для работы приложения типа Windows Forms Application .

В результате окно Microsoft Visual Studio примет вид как показано на рисунке 4.

В окне, в центре отображается основная форма приложения. На этой форме можно размещать компоненты. Компоненты размещаются на панели Toolbox (левая часть экрана).

Свойства формы или компонента отображаются в утилите Solution Explorer (правая часть экрана). Изменяя эти свойства, можно влиять на вид формы, поведение формы, реализовывать обработчики событий формы и прочее.

Рисунок 4. Основные элементы окна приложения

4. Вызов режима ввода кода

На данный момент активным есть режим проектирования формы. Чтобы перейти в режим набора текста программы, нужно вызвать команду Code с меню View (рисунок 5):

Рисунок 5. Команда перехода в режим набора текста программы

Другой вариант вызова команды перехода в режим набора текста, это клик на соответствующей кнопке в Solution Explorer (рисунок 6).

Рисунок 6. Кнопка перехода в режим набора текста программы

В результате отобразится текст программы.

Рисунок 7. Режим просмотра текста программы

5. Текст модуля « Form1.h «

При создании проекта, система Microsoft Visual Studio генерирует программный код, который сохраняется в различных файлах.

Главным файлом, в котором программист создает собственный код программы, есть файл « Form1.h «. Этот файл соответствует главной форме приложения. На главной форме размещаются различные компоненты. С помощью этих компонент реализуется решение конкретной задачи. При создании проекта создается пустая форма (рисунок 6). Кроме главной формы можно создавать другие формы и добавлять их к проекту.

Листинг файла « Form1.h » следующий.

Объясним некоторые фрагменты кода в тексте программы.

В вышеприведенном тексте создается пространство имен MyApp01 с помощью оператора

В этом пространстве имен подключаются другие пространства имен из библиотеки .NET Framework :

В пространстве имен MyApp01 создается класс с именем Form1. Этот класс соответствует главной форме приложения Form1.

Класс содержит конструктор, который вызывает метод

В методе InitializeComponent() создается компонента-форма (переменная components ), которая есть контейнером. Это означает, что на форме могут размещаться другие компоненты (кнопки, метки, поля ввода и т.д.). Также в методе InitializeComponent() настраиваются параметры формы: название заголовка, размер (300 * 300 пикселей), шрифт по умолчанию.

Form1() уничтожает форму (переменная components ) с помощью оператора delete .

6. Файлы, которые создаются в проекте

После создания проекта типа Windows Forms Application система Microsoft Visual Studio создает несколько файлов.

Рисунок 8. Файлы C++ , которые создаются в проекте типа Windows Forms Application

Как было сказано раньше, главным файлом есть файл « Form1.h » (см. п. 5). Также, согласно правилам языка C++ , создается файл реализации « MyApp01.cpp «. В этом файле есть главная функция main() . Этот файл содержит код отображающий главную форму.

Листинг файла « MyApp01.cpp » следующий:

Файл « MyApp01.vcxproj «. Это главный файл проектов на Visual C++ , которые генерируются с использованием мастера приложений ( Application Wizard ). В нем содержится информация о версии Visual C++ , в которой сгенерирован файл, информация о платформах, настройках и особенностях (характеристиках) проекта выбранных с помощью мастера приложений ( Application Wizard ).

Файл « MyApp01.vcxproj.filters «. Это есть файл фильтров для сгенерированных проектов на Visual C++ с использованием мастера приложений ( Application Wizard ). В нем содержится информация об ассоциации между файлами в вашем проекте и фильтрами. Эта ассоциация используется в интегрированной среде, чтобы показать группирование файлов с одинаковыми расширениями.

Файл « AssemblyInfo.cpp «. Содержит пользовательские атрибуты для модификации данных сборки.

Файли « StdAfx.h » и « StdAfx.cpp «. Они используются для создания файла скомпилированных заголовков ( PCH ) с именем « MyApp01.pch » и скомпилированных типов названных « StdAfx.obj «.

7. Запуск проекта на выполнение

Для запуска проекта на выполнение используется команда Start Debuggin из меню Debug (клавиши F5).

Name already in use

OAP / articles / t8_win_app.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

Обзор типов оконных приложений в C#. Знакомство со структорой проекта WPF. Компоновка.

В C# есть несколько технологий для созданий оконных приложений:

Windows Forms — разработка «классических» приложений Windows (а-ля XP), считается устаревшей

Windows Forms — интерфейс программирования приложений (API), отвечающий за графический интерфейс пользователя и являющийся частью Microsoft .NET Framework. Данный интерфейс упрощает доступ к элементам интерфейса Microsoft Windows за счет создания обёртки для существующего Win32 API в управляемом коде. Причём управляемый код — классы, реализующие API для Windows Forms, не зависят от языка разработки.

WPF (Window Presentation Foundation) — основной фреймворк, на котором мы дальше и будем работать

UWP (Universal Windows Platform) — вроде как «последний писк», рассчитанный на разработку универсальных приложений под Windows Phone, Windows 8 и.т.д

Особенности платформы WPF

Если при создании традиционных приложений на основе WinForms за отрисовку элементов управления и графики отвечали такие части ОС Windows, как User32 и GDI+, то приложения WPF основаны на DirectX. В этом состоит ключевая особенность рендеринга графики в WPF: используя WPF, значительная часть работы по отрисовке графики, как простейших кнопочек, так и сложных 3D-моделей, ложиться на графический процессор на видеокарте, что также позволяет воспользоваться аппаратным ускорением графики.

Одной из важных особенностей является использование языка декларативной разметки интерфейса XAML, основанного на XML: вы можете создавать насыщенный графический интерфейс, используя или декларативное объявление интерфейса, или код на управляемых языках C# и VB.NET, либо совмещать и то, и другое.

Что вам, как разработчику, предлагает WPF?

Использование традиционных языков .NET-платформы — C# и VB.NET для создания логики приложения

Возможность декларативного определения графического интерфейса с помощью специального языка разметки XAML, основанном на xml и представляющем альтернативу программному созданию графики и элементов управления, а также возможность комбинировать XAML и C#/VB.NET

Независимость от разрешения экрана: поскольку в WPF все элементы измеряются в независимых от устройства единицах, приложения на WPF легко масштабируются под разные экраны с разным разрешением.

Новые возможности, которых сложно было достичь в WinForms, например, создание трехмерных моделей, привязка данных, использование таких элементов, как стили, шаблоны, темы и др.

Хорошее взаимодействие с WinForms, благодаря чему, например, в приложениях WPF можно использовать традиционные элементы управления из WinForms.

Богатые возможности по созданию различных приложений: это и мультимедиа, и двухмерная и трехмерная графика, и богатый набор встроенных элементов управления, а также возможность самим создавать новые элементы, создание анимаций, привязка данных, стили, шаблоны, темы и многое другое

Аппаратное ускорение графики — вне зависимости от того, работаете ли вы с 2D или 3D, графикой или текстом, все компоненты приложения транслируются в объекты, понятные Direct3D, и затем визуализируются с помощью процессора на видеокарте, что повышает производительность, делает графику более плавной.

Создание оконного приложения

Запустите Microsoft Visual Studio (MVS) и создайте новое приложение:

Тип приложения: WPF (.NET Framework)

При создании задаете Имя проекта и, если нужно, Расположение. Остальные параметры оставляем по-умолчанию.

Название проекта должно отражать предметную область или название компании (за это есть отдельные баллы на WorldSkills-е и демо-экзамене)

По-умолчанию IDE Visual Studio разбито на 3 части:

• слева панель элементов — список визуальных элементов (кнопки, токстовые поля и т.п.)
• в центре основное окно, предназначенное для редактирования исходного кода. При отображении файлов XAML (читается как «замл») разбито на две части: визуальное отображение и текст разметки
• справа Обозреватель решений и структура проекта: Properties (Свойства); Ссылки (Зависимости); App.config — настройки проекта; App.xaml — разметка проекта и MainWindow.xaml — разметка окна.

Если каких-то панелей нет на экране, то можно их найти в меню Вид.

Основные типы файлов проекта:

• .XAML eXtended Application Markup Languale — язык разметки, очень похож на XML. В таких файлах хранится описание внешнего вида окна.
• .cs — файлы с исходным кодом на C# для окна.

В структуре проекта WPF следует выделить следующие моменты. Во-первых, в проекте имеется файл App.xaml и связанный с ним файл кода App.xaml.cs — это глобальные файлы для всего приложения, позже мы о них поговорим подробнее. А пока только следует знать, что App.xaml задает файл окна программы, которое будет открываться при запуске приложения. Если вы откроете этот файл, то можете найти в нем строку StartupUri=»MainWindow.xaml» — то есть в данном случае, когда мы запустим приложение, будет создаваться интерфейс из файла MainWindow.xaml .

Далее в структуре определены файл разметки MainWindow.xaml и файл связанного кода MainWindow.xaml.cs . Файл MainWindow.xaml и представляет определение окна приложение, которое мы увидим при запуске.

Введение в язык XAML

XAML (eXtensible Application Markup Language) — язык разметки, используемый для инициализации объектов в технологиях на платформе .NET. Применительно к WPF данный язык используется прежде всего для создания пользовательского интерфейса декларативным путем, наподобие HTML в веб-программировании.

XAML — не является обязательной частью приложения, мы вобще можем обходиться без него, создавая все элементы в файле связанного с ним кода на языке C#. Однако использование XAML все-таки несет некоторые преимущества:

Возможность отделить графический интерфейс от логики приложения, благодаря чему над разными частями приложения могут относительно автономно работать разные специалисты: над интерфейсом — дизайнеры, над кодом логики — программисты.

Компактность, понятность, код на XAML относительно легко поддерживать.

При компиляции приложения в Visual Studio код в xaml-файлах также компилируется в бинарное представление кода xaml, которое называется BAML (Binary Application Markup Language). И затем код baml встраивается в финальную сборку приложения — exe или dll-файл.

Структура и пространства имен XAML

При создании нового проекта WPF он уже содержит файлы с кодом xaml. Так, создаваемый по умолчанию в проекте файл MainWindow.xaml будет иметь следующую разметку:

Если вы совершенно не знакомы с xaml и с xml, то даже этот небольшой минимальный код окна может вызывать затруднения.

Подобно структуре веб-страничке на html, здесь есть некоторая иерархия элементов. Элементов верхнего уровня является Window, который представляет собой окно приложения. При создании других окон в приложении нам придется всегда начинать объявление интерфейса с элемента Window, поскольку это элемент самого верхнего уровня.

Кроме Window существует еще два элемента верхнего уровня:

• Page
• Application

Элемент Window имеет вложенный пустой элемент Grid, а также подобно html-элементам ряд атрибутов (Title, Width, Height) — они задают заголовок, ширину и высоту окна соответственно.

Пространства имен XAML

При создании кода на языке C#, чтобы нам были доступны определенные классы, мы подключаем пространства имен с помощью директивы using, например, using System.Windows; .

Чтобы задействовать элементы в XAML, мы также подключаем пространства имен. Вторая и третья строчки как раз и представляют собой пространства имен, подключаемые в проект по умолчанию. А атрибут xmlns представляет специальный атрибут для определения пространства имен в XML.

Так, пространство имен http://schemas.microsoft.com/winfx/2006/xaml/presentation содержит описание и определение большинства элементов управления. Так как является пространством имен по умолчанию, то объявляется без всяких префиксов.

http://schemas.microsoft.com/winfx/2006/xaml — это пространство имен, которое определяет некоторые свойства XAML, например свойство Name или Key. Используемый префикс x в определении xmlns:x означает, что те свойства элементов, которые заключены в этом пространстве имен, будут использоваться с префиксом x — x:Name или x:Key. Это же пространство имен используется уже в первой строчке x:Class=»XamlApp.MainWindow» — здесь создается новый класс MainWindow и соответствующий ему файл кода, куда будет прописываться логика для данного окна приложения.

Это два основных пространства имен. Рассмотрим остальные:

xmlns:d http://schemas.microsoft.com/expression/blend/2008″ rel=»nofollow»>http://schemas.microsoft.com/expression/blend/2008″: предоставляет поддержку атрибутов в режиме дизайнера. Это пространство имен преимущественно предназначено для другого инструмента по созданию дизайна на XAML — Microsoft Expression Blend

xmlns:local=»clr-namespace:XamlApp»: пространство имен текущего проекта. Так как в нашем случае проект называется XamlApp, то простраство имен называется аналогично. И через префикс local я смогу получить в XAML различные объекты, которые я определил в проекте.

Важно понимать, что эти пространства имен не эквивалентны тем пространствам имен, которые подключаются при помощи директивы using в c#.

Элементы и их атрибуты

XAML предлагает очень простую и ясную схему определения различных элементов и их свойств. Каждый элемент, как и любой элемент XML, должен иметь открытый и закрытый тег, как в случае с элементом Window:

Либо элемент может иметь сокращенню форму с закрывающим слешем в конце, наподобие:

Но в отличие от элементов xml каждый элемент в XAML соответствует определенному классу C#. Например, элемент Button соответствует классу System.Windows.Controls.Button. А свойства этого класса соответствуют атрибутам элемента Button.

Например, добавим кнопку в создаваемую по умолчанию разметку окна:

Сначала идет элемент самого высшего уровня — Window, затем идет вложенный элемент Grid — контейнер для других элементов, и в нем уже определен элемент Button, представляющий кнопку.

Для кнопки мы можем определить свойства в виде атрибутов. Здесь определены атрибуты x:Name (имя кнопки), Width, Height и Content. Причем, атрибут x:Name берется в данном случае из пространства имен «http://schemas.microsoft.com/winfx/2006/xaml», которое сопоставляется с префиксом x. А остальные атрибуты не используют префиксы, поэтому берутся из основного пространства имен «http://schemas.microsoft.com/winfx/2006/xaml/presentation».

Подобным образом мы можем определить и другие атрибуты, которые нам нужны. Либо мы в общем можем не определять атрибуты, и тогда они будут использовать значения по умолчанию.

Определив разметку xaml, мы можем запустить проект, и нам отобразится графически весь код xaml — то есть наша кнопка.

При определении интерфейса в XAML мы можем столкнуться с некоторыми ограничениями. В частости, мы не можем использовать специальные символы, такие как знак амперсанда &, кавычки » и угловые скобки < и >. Например, мы хотим, чтобы текст кнопки был следующим: <«Hello»> . У кнопки есть свойство Content, которое задает содержимое кнопки. И можно предположить, что нам надо написать так:

Но такой вариант ошибочен и даже не скомпилирутся. В этом случае нам надо использовать специальные коды символов:

Символ	Код
<	&lt;
>	&gt;
&	&amp;
«	&quot;

Еще одна проблема, с которой мы можем столкнуться в XAML — добавление пробелов. Возьмем, к примеру, следующее определение кнопки:

Здесь свойство Content задается неявно в виде содержимого между тегами <Button>. </Button> . Но несмотря на то, что у нас несколько пробелов между словами «Hello» и «World», XAML по умолчанию будет убирать все эти пробелы. И чтобы сохранить пробелы, нам надо использовать атрибут xml:space=»preserve» :

Файлы отделенного кода

При создании нового проекта WPF в дополнение к создаваемому файлу MainWindow.xaml создается также файл отделенного кода MainWindow.xaml.cs , где, как предполагается, должна находится логика приложения связанная с разметкой из MainWindow.xaml . Файлы XAML позволяют нам определить интерфейс окна, но для создания логики приложения, например, для определения обработчиков событий элементов управления, нам все равно придется воспользоваться кодом C#.

По умолчанию в разметке окна используется атрибут x:Class :

Атрибут x:Class указывает на класс, который будет представлять данное окно и в который будет компилироваться код в XAML при компиляции. То есть во время компиляции будет генерироваться класс XamlApp.MainWindow, унаследованный от класса System.Windows.Window.

Кроме того в файле отделенного кода MainWindow.xaml.cs , который Visual Studio создает автоматически, мы также можем найти класс с тем же именем — в данном случае класс XamlApp.MainWindow. По умолчанию он имеет некоторый код:

По сути пустой класс, но этот класс уже выполняет некоторую работу. Во время компиляции этот класс объединяется с классом, сгенерированном из кода XAML. Чтобы такое слияние классов во время компиляции произошло, класс XamlApp.MainWindow определяется как частичный с модификатором partial. А через метод InitializeComponent() класс MainWindow вызывает скомпилированный ранее код XAML, разбирает его и по нему строит графический интерфейс окна.

Взаимодействие кода C# и XAML

В приложении часто требуется обратиться к какому-нибудь элементу управления. Для этого надо установить у элемента в XAML свойство Name.

Еще одной точкой взаимодействия между xaml и C# являются события. С помощью атрибутов в XAML мы можем задать события, которые будут связанны с обработчиками в коде C#.

Итак, создадим новый проект WPF, который назовем XamlApp. В разметке главного окна определим два элемента: кнопку и текстовое поле.

И изменим файл отделенного кода, добавив в него обработчик нажатия кнопки:

Определив имена элементов в XAML, затем мы можем к ним обращаться в коде c#: string text = textBox1.Text .

В обработчике нажатия кнопки просто выводится сообщение , введенное в текстовое поле. После определения обработчика мы его можем связать с событием нажатия кнопки в xaml через атрибут Click: Click=»Button_Click» . В результате после нажатия на кнопку мы увидим в окне введенное в текстовое поле сообщение.

Пространства имен из C# в XAML

По умолчанию в WPF в XAML подключается предустановленный набор пространств имен xml. Но мы можем задействовать любые другие пространства имен и их функциональность в том числе и стандартные пространства имен платформы .NET, например, System или System.Collections. Например, по умолчанию в определении элемента Window подключается локальное пространство имен:

Локальное пространство имен, как правило, называется по имени проекта (в моем случае проект называется XamlApp) и позволяет подключить все классы, которые определены в коде C# в нашем проекте. Например, добавим в проект следующий класс:

Используем этот класс в коде xaml:

Так как пространство имен проекта проецируется на префикс local, то все классы проекта используются в форме local:Название_Класса . Так в данном случае объект Phone устанавливается в качестве содержимого кнопки через свойство Content. Для сложных объектов это свойство принимает их строковое представление, которое возвращается методом ToString().

Мы можем подключить любые другие пространства имен, классы которых мы хотим использовать в приложении. Например:

Здесь определены два дополнительных пространства имен:

Благодаря этому нам становятся доступными объекты из пространств имен System.Collections и System. И затем используя префикс, мы можем использовать объекты, входящие в данные пространства имен: <col:ArrayList.

Общий синтаксис подключения пространств имен следующий: xmlns:Префикс=»clr-namespace:Пространство_имен;assembly=имя_сборки» . Так в предыдущем случае мы подключили пространство имен System.Collections, классы которого находятся в сборке mscorlib. И данное подключенное пространство имен у нас отображено на префикс col.

Чтобы перейти уже непосредственно к созданию красивых интерфейсов и их компонентов, сначала необходимо познакомиться с компоновкой. Компоновка (layout) представляет собой процесс размещения элементов внутри контейнера. Возможно, вы обращали внимание, что одни программы и веб-сайты на разных экранах с разным разрешением выглядят по-разному: где-то лучше, где-то хуже. В большинстве своем такие программы используют жестко закодированные в коде размеры элементов управления. WPF уходит от такого подхода в пользу так называемого «резинового дизайна», где весь процесс позиционирования элементов осуществляется с помощью компоновки.

Благодаря компоновке мы можем удобным нам образом настроить элементы интерфейса, позиционировать их определенным образом. Например, элементы компоновки в WPF позволяют при ресайзе — сжатии или растяжении масштабировать элементы, что очень удобно, а визуально не создает всяких шероховатостей типа незаполненных пустот на форме.

В WPF компоновка осуществляется при помощи специальных контейнеров. Фреймворк предоставляет нам следующие контейнеры: Grid, UniformGrid, StackPanel, WrapPanel, DockPanel и Canvas.

Различные контейнеры могут содержать внутри себя другие контейнеры. Кроме данных контейнеров существует еще ряд элементов, такие как TabPanel, которые могут включать другие элементы и даже контейнеры компоновки, однако на саму компоновку не столь влияют в отличие от выше перечисленных. Кроме того, если нам не хватает стандартных контейнеров, мы можем определить свои с нужной нам функциональностью.

Контейнеры компоновки позволяют эффективно распределить доступное пространство между элементами, найти для него наиболее предпочтительные размеры.

В WPF при компоновке и расположении элементов внутри окна нам надо придерживаться следующих принципов:

Нежелательно указывать явные размеры элементов (за исключеним минимальных и максимальных размеров). Размеры должны определяться контейнерами.

Нежелательно указывать явные позицию и координаты элементов внутри окна. Позиционирование элементов всецело должно быть прерогативой контейнеров. И контейнер сам должен определять, как элемент будет располагаться. Если нам надо создать сложную систему компоновки, то мы можем вкладывать один контейнер в другой, чтобы добиться максимально удобного расположения элементов управления.

Это наиболее мощный и часто используемый контейнер, напоминающий обычную таблицу. Он содержит столбцы и/или строки, количество которых задает разработчик. Для определения строк используется свойство RowDefinitions, а для определения столбцов — свойство ColumnDefinitions:

Можно писть это в разметке, но можно просто кликнуть мышкой по границе Grid-а:

Каждая строка задается с помощью вложенного элемента RowDefinition, который имеет открывающий и закрывающий тег. При этом задавать дополнительную информацию необязательно. То есть в данном случае у нас определено в гриде 3 строки.

Каждая столбец задается с помощью вложенного элемента ColumnDefinition. Таким образом, здесь мы определили 3 столбца. ТО есть в итоге у нас получится таблица 3х3.

Чтобы задать позицию элемента управления с привязкой к определенной ячейке Grid-а, в разметке элемента нужно прописать значения свойств Grid.Column и Grid.Row, тем самым указывая, в каком столбце и строке будет находиться элемент. Кроме того, если мы хотим растянуть элемент управления на несколько строк или столбцов, то можно указать свойства Grid.ColumnSpan и Grid.RowSpan, как в следующем примере:

Атрибут ShowGridLines=»True» у элемента Grid задает видимость сетки, по умолчанию оно равно False.

То есть у нас получится следующая картина:

Но если в предыдущем случае у нас строки и столбцы были равны друг другу, то теперь попробуем их настроить столбцы по ширине, а строки — по высоте. Есть несколько вариантов настройки размеров.

Здесь столбец или строка занимает то место, которое им нужно

В данном случае высота и ширина указываются в единицах, независимых от устройства:

Также абсолютные размеры можно задать в пикселях, дюймах, сантиметрах или точках:

• пиксели: px
• дюймы: in
• сантиметры: cm
• точки: pt (точка в вёрстке это не точка на экране, а 1/72 дюйма)

Например, ниже задаются два столбца, второй из которых имеет ширину в четверть от ширины первого:

Если строка или столбец имеет высоту, равную * , то данная строка или столбце будет занимать все оставшееся место. Если у нас есть несколько сток или столбцов, высота которых равна * , то все доступное место делится поровну между всеми такими сроками и столбцами. Использование коэффициентов ( 0.25* ) позволяет уменьшить или увеличить выделенное место на данный коэффициент. При этом все коэффициенты складываются (коэффициент * аналогичен 1* ) и затем все пространство делится на сумму коэффициентов.

Например, если у нас три столбца:

В этом случае сумма коэффициентов равна 1* + 0.5* + 1.5* = 3* . Если у нас грид имеет ширину 300 единиц, то для коэфициент 1* будет соответствовать пространству 300 / 3 = 100 единиц. Поэтому первый столбец будет иметь ширину в 100 единиц, второй — 100*0.5=50 единиц, а третий — 100 * 1.5 = 150 единиц.

Можно комбинировать все типы размеров. В этом случае от ширины/высоты грида отнимается ширина/высота столбцов/строк с абсолютными или автоматическими размерами, и затем оставшееся место распределяется между столбцами/строками с пропорциональными размерами:

Элемент GridSplitter помогает создавать интерфейсы наподобие элемента SplitContainer в WinForms, только более функциональные. Он представляет собой некоторый разделитель между столбцами или строками, путем сдвига которого можно регулировать ширину столбцов и высоту строк. В качестве примера можно привести стандартный интерфейс проводника в Windows, где разделительная полоса отделяет древовидный список папок от панели со списком файлов. Например,

Двигая центральную линию, разделяющую правую и левую части, мы можем устанавливать их ширину.

Итак, чтобы использовать элемент GridSplitter, нам надо поместить его в ячейку в Gride. По сути это обычный элемент, такой же, как кнопка. Как выше, у нас три ячейки (так как три столбца и одна строка), и GridSplitter помещен во вторую ячейку. Обычно строка или столбец, в которые помещают элемент, имеет для свойств Height или Width значение Auto.

Если у нас несколько строк, и мы хотим, чтобы разделитель распространялся на несколько строк, то мы можем задать свойство Grid.RowSpan:

В случае, если мы задаем горизонтальный разделитель, то тогда соответственно надо использовать свойство Grid.ColumnSpan

Затем нам надо настроить свойства. Во-первых, надо настроить ширину (Width) для вертикальных сплитеров и высоту (Height) для горизонтальных. Если не задать соответствующее свойство, то сплитер мы не увидим, так как он изначально очень мал.

Затем нам надо задать выравнивание. Если мы хотим, что сплитер заполнял всю высоту доступной области (то есть если у нас вертикальный сплитер), то нам надо установить для свойства VerticalAlignment значение Stretch.

Если же у нас горизонтальный сплитер, то надо установить свойство HorizontalAlignment в Stretch

Также в примере выше используется свойство ShowsPreview. Если оно равно False, то изменение границ кнопок будет происходить сразу же при перемещении сплитера. Если же оно равно True, тогда изменение границ будет происходить только после того, как перемещение сплитера завершится, и при перемещении сплиттера мы увидим его проекцию.

Это более простой элемент компоновки. Он располагает все элементы в ряд либо по горизонтали, либо по вертикали в зависимости от ориентации. Например,

В данном случае для свойства Orientation по умолчанию используется значение Vertical, то есть StackPanel создает вертикальный ряд, в который помещает все вложенные элементы сверху вниз. Мы также можем задать горизонтальный стек. Для этого нам надо указать свойство Orientation=»Horizontal»:

При горизонтальной ориентации все вложенные элементы располагаются слева направо. Если мы хотим, чтобы наполнение стека начиналось справа налево, то нам надо задать свойство FlowDirection: <StackPanel Orientation=»Horizontal» FlowDirection=»RightToLeft»> . По умолчанию это свойство имеет значение LeftToRight — то есть слева направо.

Эта панель, подобно StackPanel, располагает все элементы в одной строке или колонке в зависимости от того, какое значение имеет свойство Orientation — Horizontal или Vertical. Главное отличие от StackPanel — если элементы не помещаются в строке или столбце, создаются новые столбец или строка для не поместившихся элементов.

В горизонтальном стеке те элементы, у которых явным образом не установлена высота, будут автоматически принимать высоту самого большого элемента из стека.

Вертикальный WrapPanel делается аналогично:

В вертикальном стеке элементы, у которых явным образом не указана ширина, автоматически принимают ширину самого широкого элемента.

Мы также можем установить для всех вложенных элементов какую-нибудь определенную ширину (с помощью свойства ItemWidth) или высоту (свойство ItemHeight):

Для добавления ресурсов в проект можно создать в нём каталог (кликнуть правой кнопкой мышки на название проекта и выбрать Добавить — Создать папку) и скопировать в него нужный ресурс, в нашем случае картинку.

Обратите внимание, копировать нужно именно в интерфейсе Visual Studio, а не средствами ОС, иначе VS будет искать ресурс не в папке проекта, а в текущей папке VS.

И добавим картинку в сетку:

Атрибут VerticalAlignment устанавливает вертикальное выравнивание элемента относительно предка (Grid-а).

2.2 Создание первого оконного приложения в .NET. "Убегающее окно".

Создавая данную программу, мы рассмотрим основные принципы создания оконных приложений в C#, а также методы реализации с помощью них каких-либо конечных целей: в нашем случае — это забавно убегающее окно.

Создайте новый проект, в качестве типа шаблона установите приложение Windows Forms, как показано на рисунке 1:
Рисунок 1. Создание нового проекта.
Назовите проект RandWindow и нажмите кнопку ОК.

1. Окно Toolbox (Панель элементов управления) — элементы управления вы можете разместить на создаваемой форме.
2. Окно Solution Explorer (Обозреватель решений) — здесь вы сможете увидеть следующие узлы: Properties — настройки проекта, Links (Ссылки) — подключенные к проекту библиотеки, а также созданные и подключенные к проекту файлы исходных кодов (с расширением .cs) и подключенные к проекту формы (например, Form1).
3. Окно Class View (Окно классов) — здесь представлены все созданные в программе классы.
4. Окно Properties (Свойства) — выбрав любой элемент управления или даже форму, вы сможете увидеть все параметры данного объекта, а также изменить значения, установленные в них по умолчанию.

Добавление новых элементов управления на форму

Итак, после того как вы ввели имя проекта, установили необходимый шаблон и нажали кнопку ОК, MS Visual Studio автоматически создаст каркас оконного приложения, после чего мы сможем добавить на него новые оконные элементы.

Для этого необходимо перетащить необходимый оконный элемент из окна инструментов (ToolBox).

Нашему окну потребуется 2 элемента поля для ввода, в которые мы будем выводить координаты указателя мыши, что облегчит нам понимание работы программы.

В центре окна будет находиться надпись, которую мы создадим с помощью элемента Label.
Снизу будут расположены 2 кнопки.

Немного растяните заготовку окна. Если вы нажмете на него правой кнопкой, то откроется контекстное меню. В нем нажмите на пункте свойства, после чего вы сможете изучить различные параметры окна, которые вы можете изменить. На рисунке 3 изображены самые (как правило) необходимые свойства:
Рисунок 3. Различные свойства окна (формы) в C# .NET.
Немного растяните заготовку окна и добавьте все необходимые элементы. На рисунке 4 вы можете увидеть их в окне ToolBox:
Рисунок 4. Перетаскивайте необходимые элементы из окна Toolbox на создаваемую форму.
Перейдите в свойства строки Label1, где измените текст на «Вы стремитесь сделать мир лучше?». Также измените тип шрифта, для этого найдите свойство Font (рис. 5).
Рисунок 5. Свойство Font элемента Label.
После чего установите тип шрифта Tahoma, ширину шрифта Bold и размер равный 16 (рис. 6).
Рисунок 6. Установки шрифта.
Далее измените текст на кнопках, используя свойство Text.

Полученная заготовка окна программы будет выглядеть следующим образом (рис. 7).
Рисунок 7. Форма будет выглядеть следующим образом.

Техническая часть работы программы

1. Сначала мы добавим обработчик события перемещения мыши и реализуем вывод ее координат x и y в два созданных поля ввода.
2. Далее мы создадим функции обработчики щелчка по каждой из клавиш мыши (особенно усердные пользователи все же смогут попасть по кнопке «Да, конечно!»).
3. Далее мы добавим код, реализующий случайное перемещение окна в том случае, если курсор приблизиться к кнопке «Да, конечно!».

Определение перемещения указателя мыши по форме

Щелкните непосредственно на части формы создаваемого приложения (НЕ на одном из элементов).

Теперь перейдите к свойствам формы с помощью щелчка правой кнопки мыши -> контекстное меню свойства.

Теперь необходимо перейти к списку возможных событий, которые может получать данное окно. Для этого щелкните на кнопке «Event» (события), как показано на рисунке 8:
Рисунок 8. Переход к списку возможных событий.
Когда пользователь передвигает указатель мыши по нашему окну, операционная система посылает сообщение программе с текущими координатами указателя. Они-то нам и нужны.

Чтобы назначить обработчик данного события, найдите строку MouseMove (рис. 9), после чего сделайте двойной щелчок в поле справа от нее – автоматически добавится обработчик события движения мыши и добавится функция Form1_MouseMove в коде нашей программы.
Рисунок 9. После двойного щелчка справа от MouseMove появиться данная строка, и автоматически совершится переход к коду функции-обработчика данного события.
Добавьте в эту функцию 2 строки, чтобы ее код стал выглядеть следующим образом.

Данная функция, обрабатывающая событие перемещения указателя мыши над формой, получает 2 параметра: объект отправитель и экземпляр класса MouseEventsArgs, содержащий информацию о координатах указателя мыши и других текущих свойствах.

textBox1 и textBox2 это экземпляры класса textbox, реализующие управление нашими элементами поля для ввода.

Член данных экземпляров Text позволяет установить текст в данных полях.

Таким образом, если теперь откомпилировать программу (F5), при перемещении указателя мыши по форме окна мы будем видеть координаты указателя (внутри формы), которые будут непрерывно изменяться.

Теперь вернемся к заготовке нашей формы. Для это щелкните на соответствующей закладке (Form1.cs [Конструктор]), как показано на рисунке 10:
Рисунок 10. Переход к конструктору форм C#.
Сделайте двойной щелчок по первой кнопке: Visual Studio автоматически добавит код обработки данной кнопки при нажатии.

Добавьте следующие строки кода:

Теперь снова вернитесь к конструктору и добавьте вторую кнопку, также с помощью двойного щелчка по ней.

Она будет содержать следующий код:

Как видите, здесь мы немного усложнили код вызова окна-сообщения, чтобы продемонстрировать то, как оно работает, более подробно. Все параметры передаваемые в функцию Show закомментированны в исходном коде.

Теперь нам осталось только реализовать перемещение окна в тот момент, когда мышь приближается к кнопке «Да, конечно».

Для этого мы добавим код в функцию:

private void Form1_MouseMove(object sender, MouseEventArgs)

Принцип очень прост: получая координаты движения мыши, мы проверяем не входят ли они в квадрат, очерчивающий нашу кнопку с небольшим запасом. Если да, то мы генерируем 2 случайных числа, которые будут использованы для перемещения окна.

Мы бы могли просто отслеживать сообщение о наведении указателя мыши на кнопку, но оно приходит с заметной задержкой, в связи с чем пользователь без особого труда нажмет на кнопку да, поэтому мы будем просто вычислять попадание курсора в зону вокруг кнопки.

Также нам понадобится объявить несколько "рабочих" переменных, которые мы будем в дальнейшем использовать.

Генерация случайных чисел

Класс Random в C# представляет собой генератор псевдослучайных чисел — т.е. данный класс отвечает за выдачу последовательности чисел, отвечающую определенным статистическим критериям случайности.

Random rnd = new Random();

Здесь мы объявили экземпляр класса Random (rnd), с помощью которого мы будем генерировать случайные числа. В дальнейшем мы будем использовать код, вида rnd.Next (диапазон_генерации) или rnd.Next (от, до -1) для генерации случайного числа.

Также мы объявим еще несколько переменных, часть из которых сразу будет инициализирована.

tmp_location объявляется для того, чтобы в будущем временно хранить текущее положение окна.

Также нам следует подумать о том, что при случайном перемещении, наше окно может выйти далеко за пределы экрана.

Чтобы определить разрешение экрана в C# .NET, мы будем использовать:

_h и _w будут хранить в себе размеры экрана пользователя, которые определяются при их инициализации.

Теперь код этой функции будет выглядеть следующим образом:

Вот, собственно, и все. Откомпеллировав приложение, можете попробовать нажать на кнопку "Да, конечно". Это будет крайне трудно.