Пошаговое руководство. Изучение интегрированной среды разработки Visual Studio с C# или Visual Basic

Выполняя данное пошагового руководство, читатель ознакомится со многими инструментами, диалоговыми окнами и конструкторами, которые можно использовать для создания приложений с помощью Visual Studio.Создается простое приложение в стиле “Hello, World”, разрабатывается пользовательский интерфейс, добавляется код и проводится отладка ошибок, позволяя узнать больше о работе в интегрированной среде разработки (IDE).

В этом разделе содержатся следующие подразделы.

Настройка IDE

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

Отладка и тестирование приложения

Примечание
Данное пошаговое руководство основано на профессиональном выпуске Visual Studio 2012.Копия Visual Studio может отображать для некоторых элементов пользовательского интерфейса другие имена или местоположения.Эти элементы определяются используемым выпуском Visual Studio и его параметрами.Дополнительные сведения о настройках см. в разделе Параметры Visual Studio.

Настройка IDE

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

Рисунок 1: Выбор диалогового окна "Выбор параметров среды по умолчанию"

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

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

Рисунок 2: Интегрированная среда разработки Visual Studio

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

Рисунок 3: Диалоговое окно "Параметры"

В этом примере изменяется цветовая схема интегрированной среды разработки со светлой на темную.

Изменение цветовой схемы интегрированной среды разработки

1. Откройте диалоговое окно Параметры.

   

2. Измените Цветовую тему на Темный, затем щелкните ОК.

   

Цвета в Visual Studio должны соответствовать следующему рисунку:

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

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

Создание проекта

При создании приложения в Visual Studio необходимо вначале создать проект и решение.В этом примере создается решение Windows Presentation Foundation.

Создание проекта WPF

1. Создайте новый проект.В строке меню выберите Файл, Создать, Проект.

   

   Кроме того, можно напечатать New Project в окне Быстрый запуск, чтобы выполнить то же самое действие.

   

2. Выберите шаблон приложения Visual Basic или Visual C# WPF и назовите проект HelloWPFApp.

   

   OR

   

Создастся проект и решение HelloWPFApp, и в Обозревателе решений появятся различные файлы.Конструктор WPF отображает представление конструирования и представление XAML MainWindow.xaml в представлении с разделением.(Дополнительные сведения см. в разделе Конструктор WPF для разработчиков Windows Forms.)Обозревателе решений появятся следующие элементы.

Рисунок 5: Элементы проекта

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

Изменение имени MainWindow.xaml

1. В следующей процедуре будет задано более конкретного имя для MainWindow.В Обозревателе решений выберите файл MainWindow.xaml.Вы должны увидеть окно Свойства для файла под окном .Если окно Свойства не отображается, выберите MainWindow.xaml в Обозревателе решений, откройте контекстное меню (щелкнув правой кнопкой мыши) и выберите Свойства.Измените значение свойства Имя файла на Greetings.xaml.

   

   Обозреватель решений указывает, что имя файла теперь Greetings.xaml, а имя MainWindow.xaml.vb или MainWindow.xaml.cs теперь Greetings.xaml.vb или Greetings.xaml.cs.

2. В Обозревателе решений откройте Greetings.xaml в представлении конструктора и выберите заголовок окна.

3. В окне Свойства измените значение свойства Заголовок на Greetings.

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

Заголовок окна для файла MainWindow.xaml теперь содержит текст Greetings.

Конструирование пользовательского интерфейса (UI)

В приложение будет добавлено три типа элементов управления: элемент управления TextBlock, два элемента управления RadioButton, и элемент управления Button.

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

1. Откройте окно Панель инструментов.Его следует искать слева от окна конструктора.Также можно открыть его из меню Вид или путем ввода CTRL+ALT+X.

2. В Панели элементов найдите элемент управления TextBlock.

   

3. Добавьте элемент управления TextBlock в рабочую область конструктора и отцентруйте этот элемент в верху окна.

Окно должно выглядеть так, как показано на следующем рисунке:

Рисунок 7: Окно Greetings с элементом управления TextBlock

Разметка XAML должна выглядеть приблизительно так, как показано ниже:

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

Настройка текста в текстовом блоке

1. В представлении XAML найдите разметку TextBlock и измените атрибут текста: Text=”Select a message option and then choose the Display button.”

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

3. Сохраните изменения.

Затем добавьте два элемента управления RadioButton в форму.

Добавление переключателей

1. В Панели элементов найдите элемент управления RadioButton.

   

2. Добавьте два элемента управления RadioButton в область конструктора и разместите их таким образом, чтобы они отображались параллельно под элементом управления TextBlock.

   Окно должно выглядеть следующим образом:

   Рисунок 8: элементы управления RadioButton в окне Greetings

   

3. В окне Свойства для левого элемента управления RadioButton, измените свойство Имя (свойство в верхней части окна Свойства ), задав ему значение RadioButton1.

4. В поле Свойства для правого элемента управления RadioButton, измените свойство Имя, задав ему значение RadioButton2, а затем сохраните изменения.

Теперь можно добавить отображаемый текста для каждого элемента управления RadioButton.Следующая процедура обновляет свойство Содержимое для элемента управления RadioButton.

Добавление отображаемого текста для каждого переключателя

1. В области конструктора откройте контекстное меню для RadioButton1, выберите Изменить текст, а затем введите Hello.

2. Открыть контекстное меню для RadioButton2, выберите Изменить текст, а затем введите Goodbye.

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

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

1. В Панели элементов найдите элемент управления Button, а затем добавьте его в область конструктора под элементами управления RadioButton.

2. В представлении XAML измените значение Содержимое для элемента управления Button с Content=”Button” на Content=”Display” и сохраните изменения.

   Разметка должна быть аналогична разметке, приведенной в следующем примере: <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

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

Рисунок 9: Окончательный пользовательский интерфейс Greetings

Добавьте код к кнопке Display

После запуска приложения окно сообщения появится только тогда, когда пользователь сначала выберет переключатель, а затем нажмет кнопку Display.Одно окно сообщения появится для Hello, и одно появится для Goodbye.Для создания такого поведения добавьте код в событие Button_Click в файле Greetings.xaml.vb или Greetings.xaml.cs.

Добавьте код для отображения окон сообщений

1. В области конструктора дважды щелкните кнопку Display.

   Greetings.xaml.vb или Greetings.xaml.cs откроются с курсором в событии Button_Click.Можно также добавить обработчик события нажатия следующим образом:

   Для Visual Basic обработчик событий должен выглядеть следующим образом:

   Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

   Для Visual C# обработчик события должен выглядеть следующим образом:

   private void Button_Click_1(object sender, RoutedEventArgs e)
   {
   
   }
   

2. Для Visual Basic введите следующий код:

   If RadioButton1.IsChecked = True Then
       MessageBox.Show("Hello.")
   Else RadioButton2.IsChecked = True
       MessageBox.Show("Goodbye.")
   End If
   

   Для Visual C# введите следующий код:

   if (RadioButton1.IsChecked == true)
   {
       MessageBox.Show("Hello.");
   }
   else
   {
       RadioButton2.IsChecked = true;
       MessageBox.Show("Goodbye.");
   }
   

3. Сохраните приложение.

Отладка и тестирование приложения

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

Поиск и исправления ошибок

На этом шаге будет обнаружена ошибка, которую мы вызвали ранее, изменяя имя файла XAML главного окна.

Начало отладки и поиск ошибки

1. Запустите отладчик, выбрав Отладка, затем Начать отладку.

   

   Появится диалоговое окно, показывающее, что произошло IOException: Не удается обнаружить ресурс "mainwindow.xaml".

2. Нажмите кнопку ОК, а затем остановите отладчик.

   

Файл Mainwindow.xaml в Greetings.xaml был переименован в начале этого пошагового руководства, но решение по-прежнему указывает на файл Mainwindow.xaml как на начальный универсальный код ресурса (URI) для приложения, поэтому проект не сможет запуститься.

Указание Greetings.xaml в качестве начального универсального кода ресурса (URI)

1. В Обозревателе решений откройте файл App.xaml (в проекте C#) или файл Application.xaml (в проекте Visual Basic) в представлении XAML (его нельзя открыть в представлении конструирования).

2. Измените StartupUri="MainWindow.xaml" на StartupUri="Greetings.xaml" и сохраните изменения.

Снова запустите отладчик.Вы должны увидеть окно Greetings приложения.

Отладка с точками останова

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

Добавление точек останова

1. Откройте Greetings.xaml.vb или Greetings.xaml.cs и выделите следующею строку: MessageBox.Show("Hello.")

2. Добавьте точку останова, выбрав в меню Отладка, затем Точка останова.

   

   Рядом со строкой кода в крайнем левом поле окна редактора появится красный круг.

3. Выделите следующую строку: MessageBox.Show("Goodbye.").

4. Нажмите клавишу F9, чтобы добавить точку останова, а затем нажмите клавишу F5, чтобы начать отладку.

5. В окне Greetings выберите переключатель Hello, а затем нажмите кнопку Display.

   Строка MessageBox.Show("Hello.") выделится желтым цветом.В нижней части интегрированной среды разработки окна "Видимые", "Локальные" и "Контрольные значения" закреплены вместе на левой стороне, а окна "Стек вызовов", "Точки останова", "Команда", "Интерпретация" и "Выходные данные" закреплены вместе на правой стороне.

6. В строке меню выберите Отладка, Шаг с выходом.

   Приложение возобновит выполнение, и появится окно сообщения со словом "Hello".

7. Нажмите кнопку ОК в окне сообщения, чтобы закрыть его.

8. В окне Greetings выберите переключатель Goodbye, а затем нажмите кнопку Display.

   Строка MessageBox.Show("Goodbye.") выделится желтым цветом.

9. Нажмите кнопку F5, чтобы продолжить отладку.Когда появится окно сообщения, нажмите в нем кнопку ОК, чтобы закрыть его.

10. Нажмите клавиши SHIFT + F5, чтобы остановить отладку.

11. В строке меню выберите Отладка, Выключить все точки останова.

Построение окончательной версии приложения

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

Очистка файлов решения и построение окончательной версии

1. Выберите Построение и Очистить решение для удаления промежуточных файлов и выходных файлов, которые были созданы в ходе предыдущих построений.

   

2. Измените конфигурацию построения для HelloWPFApp с Отладка на Выпуск.

   

3. Выполните построение решения.

   

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

См. также

Основные понятия

Новые возможности Visual Studio 2012

Приступая к работе с Visual Studio

Советы по повышению продуктивности при работе в Visual Studio