Wpf приложение для рисования

Wpf приложение для рисования

Эта статья посвящена тому, как создать приложение типа «MS Paint» в приложении типа Windows Presentation Foundation. Статья ориентирована на средний уровень пользователя или начальный уровень разработчика. Для работы понадобится среда разработки Visual Studio 2013.

Запустите Visual Studio 2013, выберите тип проекта из шаблона Visual C# / Windows / WPF Application (Рис.1) и назовите его WPFApp2 (ну или как хотите).

Рис.1. Создать WPF Application в Visual Studio 2013

В свойствах приложения (Properties) выберите нужный фон приложения, заголовок приложения и другие основные настройки (Рис.2). Я решил выбрать темно-синий градиент.

Рис.2. Выбор фона для WPF приложения

В окне Toolbox по умолчанию довольно мало элементов, а для «рисовалки» понадобится контрол InkCanvas. Чтобы его добавить в список элементов управления, нужно в свободном месте окна ToolBox нажать правой кнопкой мыши и выбрать пункт «Choose Items» (Рис.3)

Рис.3. Добавление элементов управления

В открывшемся окне во вкладке «WPF Components» выберите «InkCanvas» и нажмите «OK» (Рис.4)

Рис.4. Добавление InkCanvas

Теперь ператащите из окна ToolBox элемент InkCanvas в окно проекта. В XAML-файле укажите имя контролу (Name) и размеры. В принципе, это можно делать и через окно Properties (Рис.5)

Рис.5. Установка свойств элементу управления через окно Properties

В принципе, первая часть приложения готова. Если запустить приложение, нажав F5, то сможете создать такую картину:

Рис.6. Простейшая рисовалка своими руками

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

Источник

Рисование с помощью объектов Image, Drawing и Visual Painting with Images, Drawings, and Visuals

В этом разделе описывается использование ImageBrush объектов, DrawingBrush и VisualBrush для закрашивания области с изображением, Drawing или Visual . This topic describes how to use ImageBrush, DrawingBrush, and VisualBrush objects to paint an area with an image, a Drawing, or a Visual.

Предварительные требования Prerequisites

Для понимания этого раздела необходимо ознакомиться с различными типами кистей, имеющихся в Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) , и их основными возможностями. To understand this topic, you should be familiar with the different types of brushes Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) provides and their basic features. Общие сведения см. в разделе Общие сведения о кистях WPF. For an introduction, see the WPF Brushes Overview.

Закрашивание области с помощью Image Paint an Area with an Image

ImageBrushЗакрашивает область с помощью ImageSource . An ImageBrush paints an area with an ImageSource. Наиболее распространенный тип ImageSource для использования с параметром ImageBrush — BitmapImage , который описывает точечный рисунок. The most common type of ImageSource to use with an ImageBrush is a BitmapImage, which describes a bitmap graphic. Можно использовать DrawingImage для рисования с помощью Drawing объекта, но проще использовать DrawingBrush вместо него. You can use a DrawingImage to paint using a Drawing object, but it is simpler to use a DrawingBrush instead. Дополнительные сведения об ImageSource объектах см. в разделе Общие сведения о работе с образами. For more information about ImageSource objects, see the Imaging Overview.

Чтобы закрасить с помощью ImageBrush , создайте BitmapImage и используйте его для загрузки содержимого растрового изображения. To paint with an ImageBrush, create a BitmapImage and use it to load the bitmap content. Затем используйте BitmapImage для задания ImageSource свойства объекта ImageBrush . Then, use the BitmapImage to set the ImageSource property of the ImageBrush. Наконец, примените ImageBrush к объекту, который требуется закрасить. Finally, apply the ImageBrush to the object you want to paint. В Язык XAML Extensible Application Markup Language (XAML) можно также просто задать ImageSource для свойства объекта ImageBrush путь к загружаемому изображению. In Язык XAML Extensible Application Markup Language (XAML) , you can also just set the ImageSource property of the ImageBrush with the path of the image to load.

Как и все Brush объекты, ImageBrush можно использовать для рисования объектов, таких как фигуры, панели, элементы управления и текст. Like all Brush objects, an ImageBrush can be used to paint objects such as shapes, panels, controls, and text. На следующем рисунке показаны некоторые эффекты, которые можно достичь с помощью ImageBrush . The following illustration shows some effects that can be achieved with an ImageBrush.

Объекты, заполненные при помощи ImageBrush Objects painted by an ImageBrush

По умолчанию ImageBrush растягивает изображение, чтобы полностью заполнить закрашиваемую область, возможно, искажение изображения, если окрашенная область имеет разную пропорцию изображения. By default, an ImageBrush stretches its image to completely fill the area being painted, possibly distorting the image if the painted area has a different aspect ratio than the image. Это поведение можно изменить, изменив Stretch свойство со значения по умолчанию Fill на None , Uniform или UniformToFill . You can change this behavior by changing the Stretch property from its default value of Fill to None, Uniform, or UniformToFill. Поскольку ImageBrush является типом TileBrush , можно точно указать, как кисть изображения заполняет область вывода и даже создает закономерности. Because ImageBrush is a type of TileBrush, you can specify exactly how an image brush fills the output area and even create patterns. Дополнительные сведения о дополнительных TileBrush функциях см. в обзоре TileBrush. For more information about advanced TileBrush features, see the TileBrush Overview.

Пример. Заполнение объекта с помощью точечного рисунка Example: Paint an Object with a Bitmap Image

В следующем примере используется ImageBrush для рисования Background объекта Canvas . The following example uses an ImageBrush to paint the Background of a Canvas.

Закрашивание области с помощью Drawing Paint an Area with a Drawing

DrawingBrushПозволяет закрасить область с фигурами, текстом, изображениями и видео. A DrawingBrush enables you to paint an area with shapes, text, images, and video. Фигуры внутри кисти рисования могут быть окрашены сплошным цветом, градиентом, изображением или даже другим DrawingBrush . Shapes inside a drawing brush may themselves be painted with a solid color, gradient, image, or even another DrawingBrush. На следующем рисунке показаны некоторые способы использования DrawingBrush . The following illustration demonstrates some uses of a DrawingBrush.

Объекты, заполненные при помощи DrawingBrush Objects painted by a DrawingBrush

DrawingBrushРисует область с Drawing объектом. A DrawingBrush paints an area with a Drawing object. DrawingОбъект описывает видимое содержимое, например фигуру, Растровое изображение, видео или строку текста. A Drawing object describes visible content, such as a shape, bitmap, video, or a line of text. Различные типы рисунков описывают различные типы содержимого. Different types of drawings describe different types of content. Ниже приведен список различных типов объектов-рисунков. The following is a list of the different types of drawing objects.

ImageDrawing — Рисует изображение. ImageDrawing – Draws an image.

VideoDrawing — Воспроизводит звуковой файл или видеофайл. VideoDrawing – Plays an audio or video file.

DrawingGroup — Рисует другие рисунки. DrawingGroup – Draws other drawings. Для объединения рисунков в один составной рисунок используйте группирование рисунков. Use a drawing group to combine other drawings into a single composite drawing.

Дополнительные сведения об Drawing объектах см. в разделе Общие сведения о объектах Drawing. For more information about Drawing objects, see the Drawing Objects Overview.

Как и ImageBrush , DrawingBrush перетягивает его Drawing в область вывода. Like an ImageBrush, a DrawingBrush stretches its Drawing to fill its output area. Это поведение можно переопределить, изменив Stretch свойство на значение по умолчанию Fill . You can override this behavior by changing the Stretch property from its default setting of Fill. Дополнительные сведения см. в описании свойства Stretch. For more information, see the Stretch property.

Пример. Заполнение объекта с помощью рисунка Example: Paint an Object with a Drawing

В следующем примере показано, как можно заполнить объект с помощью рисунка с изображением трех эллипсов. The following example shows how to paint an object with a drawing of three ellipses. GeometryDrawingДля описания эллипсов используется. A GeometryDrawing is used to describe the ellipses.

Закрашивание области с помощью Visual Paint an Area with a Visual

Наиболее универсальная и мощная из всех кистей VisualBrush закрашивает область с помощью Visual . The most versatile and powerful of all the brushes, the VisualBrush paints an area with a Visual. Visual— Это графический тип нижнего уровня, служащий предком многих полезных графических компонентов. A Visual is a low-level graphical type that serves as the ancestor of many useful graphical components. Например, Window FrameworkElement классы, и Control являются типами Visual объектов. For example, the Window, FrameworkElement, and Control classes are all types of Visual objects. С помощью VisualBrush можно закрасить области практически в любой Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) графический объект. Using a VisualBrush, you can paint areas with almost any Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) graphical object.

Хотя VisualBrush является типом Freezable объекта, он не может быть заморожен (доступен только для чтения), если его Visual свойство имеет значение, отличное от null . Although VisualBrush is a type of Freezable object, it cannot be frozen (made read-only) when its Visual property is set to a value other than null .

Существует два способа указания Visual содержимого VisualBrush . There are two ways to specify the Visual content of a VisualBrush.

Создайте новый Visual и используйте его для задания Visual свойства объекта VisualBrush . Create a new Visual and use it to set the Visual property of the VisualBrush. Пример см. в разделе Пример. Заполнение объекта с помощью видео далее в этой статье. For an example, see the Example: Paint an Object with a Visual section that follows.

Используйте существующий Visual , который создает дубликат изображения целевого объекта Visual . Use an existing Visual, which creates a duplicate image of the target Visual. Затем можно использовать VisualBrush для создания интересных эффектов, таких как отражение и увеличение. You can then use the VisualBrush to create interesting effects, such as reflection and magnification. Пример см. в разделе Пример. Создание отражения. For an example, see the Example: Create a Reflection section.

При определении нового Visual для VisualBrush и, который Visual является UIElement (например, панелью или элементом управления), система макета выполняется в UIElement и ее дочерних элементах, если AutoLayoutContent свойство имеет значение true . When you define a new Visual for a VisualBrush and that Visual is a UIElement (such as a panel or control), the layout system runs on the UIElement and its child elements when the AutoLayoutContent property is set to true . Однако корень по UIElement сути изолирован от остальной части системы: стили и внешний макет не перейти эту границу. However, the root UIElement is essentially isolated from the rest of the system: styles, and external layout can’t permeate this boundary. Поэтому следует явно указать размер корня UIElement , так как его единственный родительский элемент — VisualBrush и, поэтому он не может автоматически масштабироваться до закрашиваемой области. Therefore, you should explicitly specify the size of the root UIElement, because its only parent is the VisualBrush and therefore it cannot automatically size itself to the area being painted. Дополнительные сведения о макете в Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) см. в разделе Макет. For more information about layout in Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) , see the Layout.

Как ImageBrush и DrawingBrush , VisualBrush перетягивание содержимого для заполнения области вывода. Like ImageBrush and DrawingBrush, a VisualBrush stretches its content to fill its output area. Это поведение можно переопределить, изменив Stretch свойство на значение по умолчанию Fill . You can override this behavior by changing the Stretch property from its default setting of Fill. Дополнительные сведения см. в описании свойства Stretch. For more information, see the Stretch property.

Пример. Заполнение объекта с помощью видео Example: Paint an Object with a Visual

В следующем примере несколько элементов управления и панель используются для заполнения прямоугольника. In the following example, several controls and a panel are used to paint a rectangle.

Пример. Создание отражения Example: Create a Reflection

В предыдущем примере показано, как создать новый Visual для использования в качестве фона. The preceding example showed how to create a new Visual for use as a background. Можно также использовать VisualBrush для отображения существующего визуального элемента. Эта возможность позволяет создавать интересные визуальные эффекты, такие как отражение и увеличение. You can also use a VisualBrush to display an existing visual; this capability enables you to produce interesting visual effects, such as reflections and magnification. В следующем примере VisualBrush для создания отражения Border , содержащего несколько элементов, используется объект. The following example uses a VisualBrush to create a reflection of a Border that contains several elements. На следующей иллюстрации показан результат выполнения этого примера. The following illustration shows the output that this example produces.

Отраженный объект Visual A reflected Visual object

Дополнительные примеры, демонстрирующие увеличение частей экрана и создание отражений, см. в разделе Пример VisualBrush. For additional examples that show how to magnify portions of the screen and how to create reflections, see the VisualBrush Sample.

Функции TileBrush TileBrush Features

ImageBrush, DrawingBrush и VisualBrush являются типами TileBrush объектов. ImageBrush, DrawingBrush, and VisualBrush are types of TileBrush objects. TileBrush объекты предоставляют большой контроль над тем, как зарисовывается область с изображением, рисованием или визуальным элементом. TileBrush objects provide you with a great deal of control over how an area is painted with an image, drawing, or visual. Например, можно заполнить область не одним растянутым изображением, а элементами мозаики, которые образуют узор. For example, instead of just painting an area with a single stretched image, you can paint an area with a series of image tiles that create a pattern.

TileBrushИмеет три основных компонента: содержимое, плитки и область вывода. A TileBrush has three primary components: content, tiles, and the output area.

Компоненты TileBrush с одним элементом мозаики Components of a TileBrush with a single tile

Компоненты TileBrush с несколькими элементами мозаики Components of a TileBrush with multiple tiles

Дополнительные сведения о функциях мозаичного заполнения TileBrush объектов см. в обзоре TileBrush. For more information about the tiling features of TileBrush objects, see the TileBrush Overview.

Источник