Создание приложения wpf c#

Целью этого раздела является демонстрация создания простого приложения Windows Presentation Foundation (WPF) и знакомство с интегрированной средой разработки Visual C#, экспресс-выпуск. Как и приложения Windows Forms, приложения WPF можно создавать путем перетаскивания элементов управления с панели элементов на поверхность разработки. В дополнение к конструктору, окну Свойства и панели элементов IDE в проектах WPF располагает окном XAML. XAML — это акроним от Extensible Application Markup Language, языка XAML, который используется для создания пользовательского интерфейса. На следующем рисунке изображено расположение редактора XAML.

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

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

• Создание приложения WPF.

• Переключение между представлением Код и представлением Конструктор.

• Изменение свойств окна WPF.

• Use the XAML editor.

• Add an System.Windows.Controls.InkCanvas control.

• Add a System.Windows.Controls.Button control.

• Create event handlers for controls.

1. On the File menu, click New Project.

The New Project dialog box appears. This dialog box lists the different default application types that Visual C# Express Edition can create.

2. Click WPF Application.

3. Change the name of your application to Ink Pad.

4. Click OK.

Visual C# Express Edition creates a new folder for your project that is named after the project title, and then displays your new WPF window, titled Window1, in Designer view. You can change to Code view at any time by right-clicking the designer surface or code window and selecting View Code. By default, the XAML editor is displayed under the designer, but you can see the XAML markup in full-screen mode by right-clicking the designer surface and clicking View XAML.

The WPF window you see in Designer view is a visual representation of the window that will open when your application is started. In Designer view, you can drag various controls from the Toolbox onto the WPF window. After you have dropped a control onto the WPF window, Visual C# automatically creates code that will cause the control to be positioned appropriately when the program is run.

5. If you cannot see the Properties window, on the View menu, click PropertiesWindow. This window lists the properties of the currently selected WPF window or control, and it's here that you can change the existing values.

6. Change the size of the WPF window by setting the Height property to 550 and the Width property to 370 in the Properties window.

7. Change the title of the WPF window to Ink Pad.

• Использование редактора XAML.

• Добавление элемента управления System.Windows.Controls.InkCanvas.

• Добавление элемента управления System.Windows.Controls.Button.

• Создание обработчиков событий для элементов управления.

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

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

2. Выберите Приложение WPF.

3. Измените имя приложения на Ink Pad.

4. Нажмите кнопку ОК.

Visual C#, экспресс-выпуск создаст для проекта новую папку с таким же именем, как у проекта, и затем отобразит новое окно Windows с именем Window1 в представлении Конструктор. Можно в любое время переключиться в представление Код, щелкнув правой кнопкой мыши поверхность разработки или окно кода и выбрав пункт Просмотр кода. По умолчанию редактор XAML отображается под конструктором, но разметку XAML можно просматривать и в полноэкранном режиме. Для этого правой кнопкой мыши нужно щелкнуть поверхность разработки и выбрать пункт Просмотр XAML.

Форма WPF в представлении Конструктор — это визуальное представление окна, которое открывается при запуске приложения. В представлении Конструктор можно перетаскивать различные элементы управления из панели элементов в окно WPF. После расположения элемента управления в окне WPF Visual C# автоматически создаст код для правильного размещения элемента управления при выполнении программы.

5. Если окно Свойства не отображается, в меню Вид выберите пункт Окно свойств. В этом окне перечислены свойства текущего выбранного окна WPF или элемента управления, здесь же можно менять существующие значения.

6. Измените размеры окна WPF, установив в окне Свойства значение 550 для свойства Height и значение 370 для свойства Width.

7. Измените заголовок окна WPF на Ink Pad.

8. Change the Background property of the WPF window to the color brown by clicking Brown in the drop-down box, and then pressing Enter.

   You can alternatively modify the XAML markup directly by adding a Background attribute and setting its value to Background="Brown".

9. To open the Toolbox, click the View menu, and then click Toolbox.

10. Right-click the Toolbox, and then click Choose Items.

The Choose Toolbox Items dialog box opens.

11. In the WPF Components tab of the Choose Toolbox Items dialog box, scroll down to InkCanvas, and select it so that a check appears in the check box.

12. Click OK to add the InkCanvas control to the Toolbox.

13. Drag an InkCanvas control from the Toolbox to the WPF window.

14. Set the following properties of the InkCanvas control in the Properties window:

    Property	Value
    Width	Auto
    Height	Auto
    HorizontalAlignment	Stretch
    VerticalAlignment	Stretch
    Margin	9, 9, 9, 68

15. Change the color of the InkCanvas control to yellow by setting its Background property to LightYellow.

The background color of the InkCanvas control will appear light yellow at run-time.

16. Drag two Button controls to the WPF Window under the InkCanvas. Position button1 to the left and button2 to the right.

8. Измените свойство Background окна WPF на коричневый цвет, щелкнув Brown в раскрывающемся списке и нажав клавишу ВВОД.

   Можно также непосредственно изменить разметку XAML, добавив атрибут Background и установив его значение равным Background="Brown".

9. Чтобы открыть панель элементов, в меню Вид выберите пункт Панель элементов.

10. Щелкните правой кнопкой мыши панель элементов и выберите пункт Выбрать элементы.¹

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

11. На вкладке Компоненты WPF диалогового окна Выбор элементов панели элементов прокрутите список вниз до варианта InkCanvas и выберите его, установив флажок.

12. Нажмите кнопку ОК для добавления элемента управления InkCanvas на панель элементов.

13. Из панели элементов перетащите в окно WPF элемент управления InkCanvas.

14. В окне Свойства задайте следующие свойства элемента управления InkCanvas.

    Свойство	Значение
    Width	Автоматически
    Height	Автоматически
    HorizontalAlignment	Растяжение
    VerticalAlignment	Растяжение
    Margin	9, 9, 9, 68

15. Измените цвет элемента управления InkCanvas на желтый, задав его свойству Background значение LightYellow.

Фон элемента управления "InkCanvas" во время выполнения будет светло-желтым.

16. Перетащите два элемента управления Button в окно WPF под элемент управления InkCanvas. Расположите button1 слева, а button2 — справа.

17. Select button1 and change the XAML markup in XAML view as shown in the following markup. This markup sets the text to Clear.

    <Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" Name="button1" VerticalAlignment="Bottom" Width="75">Clear</Button>

18. Select button2 and change the XAML markup as shown in the following markup. This markup sets the text to Close.

    <Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" Name="button2" VerticalAlignment="Bottom" Width="75" Click="ButtonCloseClicked">Close</Button>

19. The WPF application should resemble the Ink Pad application in the following illustration.

17. Выберите button1 и измените разметку XAML в режиме просмотра XAML, как показано ниже. Эта разметка устанавливает для текста значение Clear.

<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" Name="button1" VerticalAlignment="Bottom" Width="75">Clear</Button>

18. Выберите button2 и измените разметку XAML, как показано ниже. Эта разметка устанавливает для текста значение Close.

<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" Name="button2" VerticalAlignment="Bottom" Width="75"

Click="ButtonCloseClicked">Close</Button>

19. Приложение WPF должно напоминать приложение Ink Pad на следующем рисунке.

WPF Ink Application

To create event handlers

1. Double-click Clear, and then add the following code to the generated Click event handler:

   this.inkCanvas1.Strokes.Clear();

2. Return to Designer view by right-clicking the Code Editor and then clicking Designer.

3. Double-click Close, and then add the following code to the generated Click event handler:

   this.Close();

4. Press F5 to run the project.

5. When the application opens, draw a picture in the InkCanvas control. If you make a mistake, you can click Clear to start over.

6. Click Close to the close the application.