Режим дизайнера visual studio

Обновлено: 04.07.2024

Конструктор XAML в Visual Studio и Blend для Visual Studio предоставляет визуальный интерфейс, помогающий проектировать приложения на основе XAML, такие как WPF и UWP. Вы можете создавать пользовательские интерфейсы для приложений, перетаскивая элементы управления из окна "Панель элементов" (окно "Ресурсы" в Blend для Visual Studio) и задавая свойства в окне "Свойства". Также можно изменить код XAML непосредственно в представлении XAML.

Для опытных пользователей предоставляется даже возможность настроить Конструктор XAML.

Xamarin. Forms не поддерживает конструктор XAML. Чтобы просмотреть пользовательские интерфейсы XAML Xamarin. Forms и изменить их во время работы приложения, используйте горячую перезагрузку XAML для Xamarin. Forms. Дополнительные сведения см. на странице Горячая перезагрузка XAML для Xamarin. Forms (Предварительная версия) .

Рабочая область конструктора XAML

Рабочая область конструктора XAML состоит из нескольких элементов визуального интерфейса. К ним относятся область рисования (визуальная область конструктора), редактор XAML, окно "Структура документа" (окно "Объекты и временная шкала" в Blend для Visual Studio) и окно "Свойства". Чтобы открыть конструктор XAML, щелкните правой кнопкой мыши XAML-файл в обозревателе решений и выберите Конструктор представлений.

В конструкторе XAML реализовано представление XAML и синхронизированное представление конструктора для отображения XAML-разметки приложения. Открыв XAML-файл в Visual Studio или в Blend для Visual Studio, можно переключаться между представлением конструктора и представлением XAML с помощью вкладок Конструктор и XAML. Вы можете нажать кнопку Переставить панели, чтобы поменять окно, которое отображается поверх другого: область рисования или редактор XAML.

Конструктор

В режиме конструктора окно, содержащее область рисования, является активным окном, которое можно использовать в качестве основной рабочей области. С его помощью можно визуально создавать страницы приложения, добавляя, рисуя или изменяя элементы. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML. На этом рисунке показана область рисования в режиме конструктора.

В области рисования доступны следующие функции.

Линии привязки

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

Границы сетки

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

Графические элементы сетки

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

Графические элементы сетки используются для управления шириной и высотой строк и столбцов сетки. Вы можете добавить новый столбец или строку, щелкнув границу сетки. При добавлении новой строки или столбца для панели сетки, которая содержит два и более столбцов или строк, за пределами границы появляется мини-панель инструментов, позволяющая задать ширину и высоту явным образом. С помощью мини-панели инструментов можно задавать размеры строк и столбцов сетки.

Маркеры изменения размера

Маркеры изменения размера появляются на выбранных элементах управления и позволяют изменить их размер. При изменении размера элемента управления обычно отображаются значения ширины и высоты. Дополнительные сведения о работе с элементами управления в представлении Конструктор см. в статье Работа с элементами в Конструкторе XAML.

Margins

Поля представляют собой фиксированное пространство между краем элемента управления и краем его контейнера. Поля элемента управления можно задать с помощью свойств поля в разделе Макет в окне Свойства .

Графические элементы полей

Графические элементы полей можно использовать для изменения полей элемента относительно его контейнера макета. Если графический элемент поля открыт, поле не задано, а его графический значок отображается как разорванная цепь. Если поле не задано, элементы остаются на месте при изменении размеров контейнера макета во время выполнения. Если графический элемент поля закрыт, отображается значок целой цепи, а элементы перемещаются вместе с полем при изменении размеров контейнера макета во время выполнения (поля остаются фиксированными).

Маркеры элемента

Вы можете изменить элемент с помощью его маркеров, которые появляются в области рисования при наведении указателя мыши на углы синего ограничивающего прямоугольника. Эти маркеры позволяют выполнить поворот, изменение размера или зеркальное отражение, перемещение или добавление радиуса скругления угла к элементу. Символ маркера элемента зависит от функции и меняется в зависимости от расположения указателя. Если вы не видите маркеры элемента, убедитесь, что элемент выделен.

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

На этой панели инструментов доступны следующие команды:

Масштаб

Команда "Масштаб" позволяет указать размер области конструктора. Вы можете выбрать масштаб от 12,5 % до 800 % или выбрать параметры, такие как Вписать выделенное и Вписать все.

Показать/скрыть сетку привязки

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

Включить/выключить привязку к линиям сетки

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

Переключить фон области рисования

Выполняет переключение между светлым и темным фоном.

Включить/выключить привязку к линиям привязки

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

Отключить код проекта

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

Представление XAML

В представлении XAML окно, содержащее редактор XAML, активно, а редактор XAML служит основным средством разработки. Язык XAML предоставляет декларативный, основанный на XML словарь для создания пользовательского интерфейса приложения. Представление XAML поддерживает IntelliSense, автоматическое форматирование, выделение синтаксиса и перемещение по тегам. На следующем рисунке показано представление XAML с открытым меню IntelliSense:

Окно Структура документа

Окно "Структура документа" в Visual Studio аналогично окну Объекты и временная шкала в Blend для Visual Studio. Структура документа помогает выполнять следующие задачи:

Просматривать иерархическую структуру всех объектов в области рисования.

Выберите элементы, чтобы их можно было изменить. Например, можно переместить их в иерархии или задать их свойства в окно свойств. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML.

Создавать и изменять шаблоны для элементов управления.

Создавать анимации (только Blend для Visual Studio).

чтобы открыть окно "структура документа" в Visual Studio, в строке меню выберите вид > другие Windows > структура документа. чтобы просмотреть окно Объекты и временная шкала в Blend для Visual Studio, в строке меню выберите просмотр > структуры документа.

В основном представлении окна "Структура документа" или "Объекты и временная шкала" отображается иерархия документа в виде древовидной структуры. Иерархическую структуру документа можно использовать для просмотра документа на различных уровнях детализации, а также для блокировки и скрытия элементов по отдельности или в группе. В окне "Структура документа/Объекты и временная шкала" доступны следующие параметры:

Показать/скрыть

Отображает или скрывает элементы области рисования. При отображении выглядит как символ глаза. Можно также нажать CTRL + h , чтобы скрыть элемент, и SHIFT + CTRL + h , чтобы отобразить его.

Заблокировать или разблокировать

Блокирует или разблокирует элементы области рисования. Заблокированные элементы невозможно изменить. При отображении выглядит как символ замка в режиме блокировки. Можно также нажать сочетание клавиш CTRL + l , чтобы заблокировать элемент и SHIFT + + + l , чтобы разблокировать его.

Вернуть для области значение pageRoot

Параметр в верхней части окна "Структура документа" или "Объекты и временная шкала" со значком стрелки вверх выполняет перемещение в предыдущую область. Перемещение к более высокой области доступно только при изменении стиля или шаблона.

Окно "Свойства"

Окно Свойства позволяет задавать значения свойств для элементов управления. Вот как оно выглядит:

В верхней части окна " Свойства " есть различные параметры:

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

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

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

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

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

Здравствуйте. Может быть по Form1.cs правой кнопкой мыши, потом нажать "Открыть в конструкторе"?

Нету такого. :/

Дядя Богдан, вы этот проект сами создавали, или редактируете имеющийся?

Дядя Богдан, странно, я создал новый проект и там всё замечательно открывается в дизайнере. Если у вас кода не очень много, может стоит скопировать его из класса, удалить его и создать новую форму с таким же названием.

Дядя Богдан, есть ещё идея. Вы просто в Visual Studio папку открыли, или прям проект?

Антон Барышев, Я запустил ярлык Visual studio и открывается меню с выбором проекта.

Дядя Богдан, попробуйте в VS найти проект в ручную (это будет файл .csproj)

1. В первую очередь перечислим, какие компоненты должны быть установлены для создания графического приложения на языке С++. Их три, все относятся к разделу "Desktop development with C++":
- VC++ 2017 v141 toolset (x86,x64)
- Windows 10 SDK (10.0.15063.0) for Desktop C++ x86 and x64
- C++/CLI support

Первые два нужны для создания любого приложения на С++, третий именно для создания графической оболочки программы. Во время исследования данной темы мною подключалось два десятка других - пользы новичкам от них нету.

2. После установки среды разработки переходим
File > New > Project. ( ^+N )
В появившемся окне отыскиваем Installed > Visual C++ > CLR > CLR Empty Project

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

3. Необходимо добавить в приложение главную форму. Есть два равносильных пути достижения этой цели.
Первый: в "Solution Explorer" правой кнопкой мыши на названии проекта, во всплывшем контексном меню Add > New Item.
Второй способ: в главном меню выбираем Project > Add New Item.
Или просто нажимаем ^+A

Во появившемся окне Visual C++ > UI > Windows Form

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

Эта ошибка хорошо известна ещё по Visual Studio 2015. Можете почитать её обсуждение, к примеру, на сайте Microsoft по ссылке1, ссылке2, ссылке3. И более лучшего решения, чем закрывать вкладку, ещё нет. По всей видимости, команда разработчиков Visual Studio не считает эту ошибку достаточно серьёзным делом, чтобы ломать о неё копья.

4. Но мало просто создать форму, нужно вплести её в создаваемую программу. Для этого в "Solution Explorer" правой кнопкой мыши на названии проекта, во всплывшем контексном меню выбрать Properties .

В открывшемся окне произвести два действия.
• Linker > System > SubSystem , из раскрывающегося списка выбрать " Windows (/SUBSYSTEM:WINDOWS) "

• Linker > Advanced > Entry Point . В пустое поле вписать " main " (без кавычек).

5. В "Solution Explorer" двойным щелчком открыть в редакторе файл MyForm.cpp. Скопировать в него текст

Отлично, всё готово! Теперь проект компилируем и запускаем. Но если у вас ранее выскакивала 0x8000000A, то быстрее всего вам придётся перезапустить Visual Studio и вновь загрузить в нём проект. Далее ошибка ни в чём не проявится.

6. Для того, чтобы добавить на нашу только что созданную форму новые элементы, понадобится панель Toolbox. Полезно запомнить горячую клавишу ^!X

Работа с размещением элементов на форме сложностей вызвать не должна. Работает здесь всё удобнее, чем wxWidgets в CodeBlocks или wxDev-C++. Никаких глюков мною замечено не было.

Для изменения свойств только что созданного элемента интерфейса щёлкните на нём правой кнопкой и в контекстном меню выберите, соответственно, Properties.

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

MessageBox::Show("Hello World",
"My heading", MessageBoxButtons::OKCancel,
MessageBoxIcon::Asterisk);

Запускаем и проверяем!

Если вдруг не запустится, то первым делом проверяем, что выставлено в раскрывающемся списке Solution Configurations . Он находится на панели инструментов (под главным меню). Там должно быть Release (а не Debug) .

Дополнительная информация

Альтернативные способы создания графических приложений в Visual Studio 2017.

1. UWP (Universal Windows Platfrom application) - универсальные приложения, способные запускаться на Windows 10, Windows 10 Mobile и аналогичных самых современных платформах от Microsoft. Платформа разработана как расширение Windows Runtime. Всё бы хорошо, но данные приложения не могут запускаться на более старых версиях Windows, даже на восьмёрке.

Пара слов для общего развития о нескольких технологиях, на которые вы будете постоянно натыкаться при чтении документации по разработке GUI в Visual Studio.

ATL (Active Template Library) - набор шаблонных классов языка C++, предназначенных для упрощения написания COM-компонентов.
MFC (Microsoft Foundation Classes) - библиотека объектов, помогающая профессиональным разработчикам создавать десктопные приложения. Что-то вроде более усложнённого и навороченного варианта ATL. ATL и MFC являются хорошими вещами, и с их задействованием также можно создавать графические приложения. Но это инструменты, требующие наличия углублённых знаний тематики.

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

Примечания:
В интернете можно наткнуться на заголовок "Full C and C++ IDE with Visual Studio". Оттуда закачиваются те же самые стандартные дистрибутивы Visual Studio, проверено по контрольным суммам.

P.S.
Теперь можно немного поэкспериментировать с элементами интерфейса. Ниже показан код простейшего графического калькулятора:

private: System::Void button6_Click(System::Object^ sender, System::EventArgs^ e) Application::Exit();
>

private: System::Void radioButton1_CheckedChanged(System::Object^ sender, System::EventArgs^ e) label1->Text = "+";
>
private: System::Void radioButton2_CheckedChanged(System::Object^ sender, System::EventArgs^ e) label1->Text = "-";
>
private: System::Void radioButton3_CheckedChanged(System::Object^ sender, System::EventArgs^ e) label1->Text = "*";
>
private: System::Void radioButton4_CheckedChanged(System::Object^ sender, System::EventArgs^ e) label1->Text = "/";
>

private: System::Void button5_Click(System::Object^ sender, System::EventArgs^ e) char sw = System::Convert::ToChar(label1->Text);
double a = System::Convert::ToDouble(textBox1->Text);
double b = System::Convert::ToDouble(textBox2->Text);
double r;
switch (sw) case '+':
r = a + b;
break;
case '-':
r = a - b;
break;
case '*':
r = a * b;
break;
case '/':
r = a / b;
break;
>
label2->Text = "Result: " + System::Convert::ToString(r);
>

А теперь можно попытаться сотворить что-то более похожее на стандартное window-приложение. Пока простейшее.

double iFirstNum;
double iSecondNum;
double iResult;
String^ iOperator;

private: System::Void btnC_Click(System::Object^ sender, System::EventArgs^ e) /*button C ("Global Clear" - clears the entire calculation*/
tbDisplay->Text = "0";
lblShowOp->Text = "";
>

private: System::Void btnCE_Click(System::Object^ sender, System::EventArgs^ e) <
/*button CE ("Clear Entry" is supposed to be used to clear only the thing you are currently
typing into the calculator, before you have performed any operation on it.*/
tbDisplay->Text = "0";
>

private: System::Void buttonS_Number_Click(System::Object^ sender, System::EventArgs^ e) <
//Number Buttons Event
Button ^ Numbers = safe_cast<Button^>(sender);
if (tbDisplay->Text == "0")
tbDisplay->Text = Numbers->Text;
else
tbDisplay->Text += Numbers->Text;
>

private: System::Void buttonS_Arithmetic_Click(System::Object^ sender, System::EventArgs^ e) <
//Operator Buttons Event
Button ^ op = safe_cast<Button^>(sender);
iFirstNum = Double::Parse(tbDisplay->Text);
tbDisplay->Text = "0";
iOperator = op->Text;
lblShowOp->Text = System::Convert::ToString(iFirstNum) + " " + iOperator;
>

private: System::Void btnEquals_Click(System::Object^ sender, System::EventArgs^ e) <
//Equals
iSecondNum = Double::Parse(tbDisplay->Text);

if (iOperator == "+")
iResult = iFirstNum + iSecondNum;
else if (iOperator == "-")
iResult = iFirstNum - iSecondNum;
else if (iOperator == "*")
iResult = iFirstNum * iSecondNum;
else if (iOperator == "/")
iResult = iFirstNum / iSecondNum;
else MessageBox::Show("Unknown operation.\nSomething wrong.",
"error", MessageBoxButtons::OK,
MessageBoxIcon::Error);
return;
>

private: System::Void btnDot_Click(System::Object^ sender, System::EventArgs^ e) <
//Decimal Point
if (!tbDisplay->Text->Contains("."))
tbDisplay->Text += ".";
>

private: System::Void btnPM_Click(System::Object^ sender, System::EventArgs^ e) <
//Plus-Minus
if (tbDisplay->Text->Contains("-"))
tbDisplay->Text = tbDisplay->Text->Remove(0, 1);
else
tbDisplay->Text = "-" + tbDisplay->Text;
>

Код создан на основе видеоролика
"Visual C++ Calculator Tutorial with Decimal Point and Backspace" (37:59, DJ Oamen, 2016 Jan 2, Visual C++ 2010) ,
но имеет ряд отличий.

Как продолжение, существует видеоролик
"Visual C++ Scientific Calculator Tutorial" (53:31, Paul Oamen, 2016 Oct 2, Visual Studio 2015). Судя по голосу, автор тот же. К показанному выше калькулятору прибавляется конвертер температуры и ряд более научных функций. Предупрежу, что итоговое "творение" имеет массу изъянов и глюков, поэтому видео можно просматривать исключительно для изучение приёмов программирования. Но не используйте его в качестве образца того, как нужно создавать калькуляторы.

Для работы с этой утилитой сначала необходимо вставить новый файл диаграммы классов. Делать это можно несколькими способами, одним из которых является щелчок на кнопке View Class Diagram (Просмотр диаграммы классов) в правой части окна Solution Explorer (в версии Visual Studio 2010), или выбрав соответствующий пункт из контекстного меню (Visual Studio 2012), как показано на рисунке:

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

Эта утилита работает вместе с двумя другими средствами Visual Studio 2010 — окном Class Details (Детали класса), которое можно открыть путем выбора в меню View (Вид) пункта Other Windows (Другие окна), и панелью Class Designer Toolbox (Элементы управления конструктора классов), которую можно отобразить выбором в меню View (Вид) пункта Toolbox (Панель элементов). В окне Class Details не только отображаются детали выбранного в текущий момент элемента в диаграмме, но также можно изменять его существующие члены и вставлять новые на лету:

Для примера давайте перетащим из панели Class Designer Toolbox в окно Class Designer новый элемент Class (Класс), в открывшемся окне назначим ему имя MyCar, а затем с помощью окна Class Details добавим в него общедоступное поле типа string по имени AutoName:

Теперь давайте активизируем утилиту Class Designer еще раз и перетащим на поверхность конструктора новый элемент типа Class, присвоив ему имя MySportCar. Затем выберем в Class Designer Toolbox пиктограмму Inheritance (Наследование) и щелкнем в верхней части пиктограммы MySportCar. Далее, не отпуская левую кнопку мыши, перетащим курсор мыши на поверхность пиктограммы класса MyCar и отпустим ее. Правильное выполнение всех перечисленных выше действий приведет к тому, что класс MySportCar станет наследоваться от класса MyCar:

Чтобы завершить данный пример, осталось обновить сгенерированный MySportCar, добавив в него общедоступный метод с именем GetAutoName ():

Читайте также: