C# — WPF центрирование


Содержание

Центрирование WPF Canvas на элементе

В настоящее время я пытаюсь сделать миникарты (который в режиме реального времени обновляется (30 + кадров в секунду)), используя холст WPF с различными нарисованных на него. Теперь моя проблема заключается в том, что каждый из этих объектов имеет фиксированную координату, что я не могу изменить, и мне нужен холст до центра на одном из них.

В принципе, мне нужен способ, чтобы сместить полотно происхождения / вид. (Или лучше альтернатива делать что-то вроде миникарте)

Вы можете использовать преобразование переводить-:

Для каждого обновления необходимо вычислить точные значения для преобразований — Somthing вроде:

Edit: На самом деле, я смешал две возможности. Декларирование трансформации в XAML и в коде. Вы можете либо опустить XAML часть, или дайте XAML-преобразованию идентификатор через й: Имя и изменить его свойство непосредственно .

C# — WPF центрирование

Элементы WPF обладают набором свойств, которые помогают позиционировать данные элементы. Рассмотрим некоторые из этих свойств.

Ширина и высота

У элемента можно установить ширину с помощью свойства Width и высоту с помощью свойства Height . Эти свойства принимают значение типа double . Хотя общая рекомендация состоит в том, что желательно избегать жестко закодированных в коде ширины и высоты.

Также мы можем задать возможный диапазон ширины и высоты с помощью свойств MinWidth/MaxWidth и MinHeight/MaxHeight . И при растяжении или сжатии контейнеров элементы с данными заданными свойствами не будут выходить за пределы установленных значений.

Возможно, возникает вопрос, а в каких единицах измерения устанавливаются ширина и высота? Да и в общем какие единицы измерения используются? В WPF можно использовать несколько единиц измерения: сантиметры ( cm ), точки ( pt ), дюймы ( in ) и пиксели ( px ). Например, зададим размеры в других единицах:

Если единица измерения не задана явно, а просто стоит число, то используются по умолчанию пиксели. Но эти пиксели не равны обычным пикселям, а являются своего рода «логическими пикселями», независимыми от конкретного устройства. Каждый такой пиксель представляет 1/96 дюйма вне зависимости от разрешения экрана.

Выравнивание

HorizontalAlignment

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

Свойство HorizontalAlignment выравнивает элемент по горизонтали относительно правой или левой стороны контейнера и соответственно может принимать значения Left, Right, Center (положение по центру), Stretch (растяжение по всей ширине). Например:

VerticalAlignment

Также мы можем задать для элемента выравнивание по вертикали с помощью свойства VerticalAlignment , которое принимает следующие значения: Top (положение в верху контейнера), Bottom (положение внизу), Center (положение по центру), Stretch (растяжение по всей высоте). Например:

Отступы margin

Свойство Margin устанавливает отступы вокруг элемента. Синтаксис: Margin=»левый_отступ верхний_отступ правый_отступ нижний_отступ». Например, установим отступы у одной кнопки слева и сверху, а у другой кнопки справа и снизу:

Если мы зададим свойство таким образом: Margin=»20″, то сразу установим отступ для всех четырех сторон.


Вопрос по wpf, xaml, silverlight, c# &#8211 Центрирование текста по вертикали и горизонтали в TextBlock и PasswordBox в приложении Windows Store

Я пытаюсь центрировать текст в TextBlock и PasswordBox.

В TextBlock я использую свойство TextAlignment для центрирования текста по горизонтали, но он все еще близко к вершине. Как отцентрировать текст по вертикали?

А в PasswordBox нет свойства связанного с выравниванием текста, как этого добиться ??

Alignment, которое используется для центрирования содержимого по вертикали.

тt поддерживает вертикальное выравнивание.

Я предлагаю обвести рамку вокруг нее и дать ей сделать вертикальное выравнивание:

Или другой способ будет использовать высоту и установить отступ в текстовом блоке.

Для использования поля пароля вWPF:

ЗаSilverlight вам нужно будет извлечь фактический шаблон passwordbox (используйте blend, он позволяет вам редактировать шаблон и скопировать его), затем вы можете изменить элементы (в ContentElement типа Border) с привязкой шаблона, например:

Вы можете получить шаблон также в этомMSDN ссылка.

Заpassworbox в Silverlight Обновите стиль поля пароля в вашем xaml следующим образом:

Тогда ваш PasswordBox может иметь выравнивание как таковое:

H C# WPF – Разработка WPF пользовательских компонентов в черновиках Tutorial

Изучение WPF для тех, кто с WinForms

В прошлой публикации ссылка я рассказал о разработке компонента на WinForms. Поэтому, цель следующая: сделать такой же «по-смыслу» компонент, но на WPF. В целом, подход такой же и советы для WinForms работают и на WPF.
Забегая вперёд, получился следующий компонент, представленный на рисунке ниже.

Компонент (далее – «dpkEditWPF»), так же как и его «собрат» на WinForms является «partial» (разделён на несколько файлов (partial class), для удобства разработки).

У него также есть Свойство «Значение слова ДПК» (32 разряда) и «Текстовая метка» (чтобы там время отображать). Событие клика по «битовой ячейке» с номером бита также имеется, но только оно стало «маршрутизируемым».

Вывод

комментарии ( 31 )

Неканонично. Слепое портирование с WinForms.


Следует использовать dependency property с метаданными, которые предписывают перерисовать содержимое. Ну или цепочкой зависимостей приводить к изменению таких свойств.

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

Следует использовать RoutedEvent, чтобы события могли роутиться.

А дальше уже совсем вакханалия пошла с ручной отрисовкой. Вам на что дадены биндинги, шаблоны, стили, триггеры и прочее? Не, круто, вы изменили названия классов с System.Windows.Forms на System.Windows. Но при чём здесь WPF?

У нас целая тонна наработок по контролам WPF различной сложности.
От всяких спидометров, джойстиков, контролов для пультов управления умных домов, кастомных ListView поддерживающих анимацию, игровых элементов и пр. до собственного окна с производительной прерастиризованной анимацией у навигации (как в WinStore приложениях)
И главное — мы умеем потом это стилизовать в XAML, собственно без нормального XAML интерфейса, контрол на WPF теряет смысл.

Если у аудитории есть интерес, могу попробовать что-то написать

Недавно пришла мысль в голову: пора переходить на использование WPF!

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

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

Между разработкой на Wpf и WinRT/UAP кардинальной разницы нет. Можно сказать, в большинстве случаев просто отличаются пространства имён, синтаксис там и сям, где-то плюс фича, где-то минус.

А вот рендеринг и технологии под капотом разные. Wpf был создан во времена DirectX 9 и, хоть он GPU-accelerated, рендеринг неоптимизирован и очень груб. WinRT Xaml же — это Direct2D (появившийся, если не ошибаюсь, в WIndows 8). То, каким бы мог быть Wpf.

Хоронить его пытаются все кому не лень. Уже лет 5 как. Но я пока сам на нем пишу и не жалуюсь — он стабилен, багов мало, в корпоративном сегменте еще лет 10 проживет. Но начинать с WinForms переходить на WPF сейчас, когда саму WPF уже почти 10 лет стукнуло, это странно.

Что касается Windows Store — да, XAML тот же. Но это просто язык разметки, все равно что сказать, что WinForms и WPF — это тот же самый C#. Да, паттерны они туда перетащили, но начинка разная и когда пишешь серьезные приложения, то в начинку надо погружаться всегда.

Но начинать с WinForms переходить на WPF сейчас, когда саму WPF уже почти 10 лет стукнуло, это странно.

А какие варианты? Оставаться на WinForms? Переходить на UWP? Забить на C# и уходить на Qt5? Собственно, сейчас WPF — самый актуальный гуёвый фреймворк на дотнете для десктопа. Вариантов нет.

Это не столько WPF умирает, сколько мелкомягкие забили на десктоп в целом.

Не забили, просто стали мыслить в другом направлении.
1. Они выпустили W10, в которой приложения Windows Store и UAP способны запускаться в привычных для каждого окошках.
2. Они назвали W10 последней версией и всячески пытаются переманить всех на неё (особенно народ с W7).
Косвенно это означает, что популярность и востребованность UAP-приложений со временем будет расти.
Вот, пожалуйста, получаем новый десктоп. (А ещё мобильники и планшеты, почти бесплатно.)

Цукерберг рекомендует:  Api - Использование API Getresponse

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

«Метрошный» калькулятор теперь стал выглядеть менее глупо, но удобным, как старый калькулятор, он не стал. У «универсальных» приложений проблема не в окошечности, а в ориентированности под тач и ущербной функциональности по сравнению с нормальным десктопом. От того, что приложения для тача стало возможно использовать на десктопе, принципиально в них ничего не поменялось. Невозможно сделать так, чтобы интерфейс был одновременно удобным и функциональным и для тача, и для мыши.

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

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

Вот, выбирайте размер элементов, который будет удобен и для мыши, и для тача: 7х7мм, 10х10мм. В W10 как раз пункты меню «Пуск» — 10х10мм, контекстное меню — 7х7мм. Мне удобно всё это жмакать и на десктопе, и на планшете.
2. Если различия в функционале/интерфейсы слишком большие при использовании мыши и тача, на старте можно определять наличие мыши и адаптировать интерфейс.
3. Существуют нечастые случаи, когда к планшету подключается мышка. На этот случай есть возможность следить за изменением устройств, проверять, подключилась ли мышка и опять адаптировать интерфейс.


Не все приложения подходят для UAP. Не все приложения подходят для использования без мыши (или без клавиатуры). Это нормально.

Что такое «урезанные приложения для тача»? В чем нагромождение гридов будет урезано по сравнению с legacy win32? Я сейчас как раз работаю с зубодробительными отчётами и многоуровневыми гридами. Я вижу, что всё это будет удобно и красиво на UAP. Другое дело, что тётечки в гос. учреждениях, для которых эти гриды делаются, даже не слышали про какие-то там W10.

«Ни черта не работает» — это вообще безосновательное утверждение.

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

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

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

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

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

А вы пытаетесь доказать здесь что разработчику приложения никогда не придется заглядывать «под капот». Это не так.

WPF How to center the Image.Source

I am developing a custom Image control in WPF .NET 3.5 and Visual Studio 2010.

In WinForms the PicutreBox control has the SizeMode property which includes «CenterImage«.

I want my Image control to have that ability.

Is there anyway?

My CustomControl code:

Where «webcam_backgroud» is a png image added by default visual studio resource editor.

4 Answers 4

You should try and center the whole Image element itself using the alignments :

This is my working solution:

Just give an x:name on the window, and retrieve information on its dimensions.

And then recall the information on the actual size of the windows from the code.Then, since you have the hosting size and the object size, it’s just math. Stating a frame size all’around the background of ‘frameWidth’, the dimension of the image (destWidth,destHeight), you set:


Not the answer you’re looking for? Browse other questions tagged c# wpf image alignment center or ask your own question.

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution required. rev 2020.11.13.35428

Обзор фигур и базовых средств рисования в приложении WPF Shapes and Basic Drawing in WPF Overview

В этом разделе приводится обзор рисования с помощью Shape объектов. This topic gives an overview of how to draw with Shape objects. Объект Shape — это разновидность UIElement , позволяет нарисовать фигуру на экране. A Shape is a type of UIElement that enables you to draw a shape to the screen. Так как они являются элементами пользовательского интерфейса, Shape объекты могут использоваться внутри Panel элементы и элементы управления. Because they are UI elements, Shape objects can be used inside Panel elements and most controls.

Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) предоставляет несколько уровней доступа к службам для работы с графикой и службам рендеринга. offers several layers of access to graphics and rendering services. На верхнем уровне Shape объекты просты в использовании и предоставляют множество полезных функций, таких как макет и участие в Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) системой событий. At the top layer, Shape objects are easy to use and prov >Windows Presentation Foundation (WPF) Windows Presentation Foundation (WPF) event system.

Объекты фигур Shape Objects

WPF WPF предоставляет ряд готовых к использованию Shape объектов. provides a number of ready-to-use Shape objects. Все объекты фигур наследуются от Shape класса. All shape objects inherit from the Shape class. Доступные объекты фигур включают Ellipse, Line, Path, Polygon, Polyline, и Rectangle. Available shape objects include Ellipse, Line, Path, Polygon, Polyline, and Rectangle. Shape объекты используют перечисленные ниже общие свойства. Shape objects share the following common properties.

Stroke: Описывает способ рисования контура фигуры. Stroke: Describes how the shape’s outline is painted.

StrokeThickness: Определяет толщину контура фигуры. StrokeThickness: Describes the thickness of the shape’s outline.

Fill: Описывает способ рисования внутренней части фигуры. Fill: Describes how the interior of the shape is painted.

Свойства данных, определяющие координаты и вершины, измеряются в аппаратно-независимых пикселях. Data properties to specify coordinates and vertices, measured in device-independent pixels.

Так как они являются производными от UIElement, объекты фигур можно использовать внутри панелей и большинства элементов управления. Because they derive from UIElement, shape objects can be used inside panels and most controls. Canvas Панели особенно хорошо подходит для создания сложных рисунков, так как она поддерживает абсолютное позиционирование дочерних объектов. The Canvas panel is a particularly good choice for creating complex drawings because it supports absolute positioning of its child objects.

Line Класс позволяет нарисовать линию между двумя точками. The Line class enables you to draw a line between two points. В следующем примере показано несколько способов указания координат линии и свойств штриха. The following example shows several ways to specify line coordinates and stroke properties.

На следующем рисунке показано создаваемые Line. The following image shows the rendered Line.

Несмотря на то что Line предоставляют Fill , его установка не оказывает никакого влияния поскольку Line нет области. Although the Line class does provide a Fill property, setting it has no effect because a Line has no area.

Еще одна распространенная фигура — Ellipse. Another common shape is the Ellipse. Создание Ellipse путем определения фигуры Width и Height свойства. Create an Ellipse by defining the shape’s Width and Height properties. Чтобы нарисовать круг, укажите Ellipse которого Width и Height значения равны. To draw a circle, specify an Ellipse whose Width and Height values are equal.

Ниже показан пример отображаемого объекта Ellipse. The following image shows an example of a rendered Ellipse.

Использование путей и геометрических фигур Using Paths and Geometries


Path Класс позволяет рисовать кривые и сложные фигуры. The Path class enables you to draw curves and complex shapes. Эти кривые и сложные фигуры описываются с помощью Geometry объектов. These curves and shapes are described using Geometry objects. Чтобы использовать Path, создании Geometry и использовать его для задания Path объекта Data свойство. To use a Path, you create a Geometry and use it to set the Path object’s Data property.

Цукерберг рекомендует:  Актуальные стажировки для IT-специалистов за рубежом

Существуют разнообразные Geometry объектов для выбора. There are a variety of Geometry objects to choose from. LineGeometry, RectangleGeometry, И EllipseGeometry классы описывают относительно простые фигуры. The LineGeometry, RectangleGeometry, and EllipseGeometry classes describe relatively simple shapes. Для создания более сложных фигур или кривых используйте PathGeometry. To create more complex shapes or create curves, use a PathGeometry.

Классы PathGeometry и PathSegment PathGeometry and PathSegments

PathGeometry объекты состоят из одного или нескольких PathFigure объектов, каждый из которых PathFigure представляет различные «рисунок» или фигуры. PathGeometry objects are comprised of one or more PathFigure objects; each PathFigure represents a different «figure» or shape. Каждый PathFigure состоит из одного или нескольких PathSegment объектов, каждый из которых представляет переходную часть фигуры. Each PathFigure is itself comprised of one or more PathSegment objects, each representing a connected portion of the figure or shape. Следующие типы сегмента: LineSegment, BezierSegment, и ArcSegment. Segment types include the following: LineSegment, BezierSegment, and ArcSegment.

В следующем примере Path используется для рисования кривой Безье второго порядка. In the following example, a Path is used to draw a quadratic Bezier curve.

На следующем рисунке показана преобразованная для просмотра фигура. The following image shows the rendered shape.

Дополнительные сведения о PathGeometry , а другой Geometry классов, см. в разделе Общие сведения о геометрии. For more information about PathGeometry and the other Geometry classes, see the Geometry Overview.

Сокращенный синтаксис XAML XAML Abbreviated Syntax

В Язык XAML Extensible Application Markup Language (XAML) , также могут использовать специальный сокращенный синтаксис для описания Path. In Язык XAML Extensible Application Markup Language (XAML) , you may also use a special abbreviated syntax to describe a Path. В следующем примере сокращенный синтаксис используется для рисования сложной фигуры. In the following example, abbreviated syntax is used to draw a complex shape.

На следующем рисунке показана росчерка Path. The following image shows a rendered Path.

Data Строки атрибута начинается с помощью команды «moveto», обозначена буквой M, которая устанавливает начальную точку для пути в системе координат Canvas. The Data attribute string begins with the «moveto» command, indicated by M, which establishes a start point for the path in the coordinate system of the Canvas. Path данные параметры зависят от регистра. Path data parameters are case-sensitive. Заглавная буква M указывает абсолютное положение новой текущей точки. The capital M indicates an absolute location for the new current point. Строчная буква m указывала бы относительные координаты. A lowercase m would indicate relative coordinates. Первый сегмент представляет собой кубическую кривую Безье, которая начинается в точке (100, 200) и заканчивается в точке (400, 175). Эта кривая нарисована с помощью двух контрольных точек (100, 25) и (400, 350). The first segment is a cubic Bezier curve beginning at (100,200) and ending at (400,175), drawn using the two control points (100,25) and (400,350). Этот сегмент указывает команда C в Data строке атрибута. This segment is indicated by the C command in the Data attribute string. Опять же, заглавная буква C указывает абсолютный путь; строчная буква c указывает относительный путь. Again, the capital C indicates an absolute path; the lowercase c would indicate a relative path.

Второй сегмент начинается с команды lineto H, которая рисует горизонтальную линию от предыдущей точки пути (400, 175) до новой точки (280, 175). The second segment begins with an absolute horizontal «lineto» command H, which specifies a line drawn from the preceding subpath’s endpoint (400,175) to a new endpoint (280,175). Поскольку это команда по горизонтали «lineto», указанное значение является x-координации. Because it is a horizontal «lineto» command, the value specified is an x-coordinate.

Полный синтаксис пути, см. в разделе Data ссылку и Создание фигуры с помощью PathGeometry. For the complete path syntax, see the Data reference and Create a Shape by Using a PathGeometry.

Заполнение фигур Painting Shapes

Brush объекты используются для закрашивания фигуры Stroke и Fill. Brush objects are used to paint a shape’s Stroke and Fill. В следующем примере, обводки и заполнения Ellipse указаны. In the following example, the stroke and fill of an Ellipse are specified. Обратите внимание, что значения свойств кисти могут задаваться только в формате ключевого слова или шестнадцатеричного значения цвета. Note that valid input for brush properties can be either a keyword or hexadecimal color value. Дополнительные сведения о доступных ключевых словах цветов см. в разделе свойств Colors в класс System.Windows.Media пространства имен. For more information about available color keywords, see properties of the Colors class in the System.Windows.Media namespace.

На следующем рисунке показано создаваемые Ellipse. The following image shows the rendered Ellipse.

Кроме того, можно использовать синтаксис элемента свойства для явного создания SolidColorBrush объекта и заполнить фигуру сплошным цветом. Alternatively, you can use property element syntax to explicitly create a SolidColorBrush object to paint the shape with a solid color.

На рисунке ниже показана фигура, преобразованная для просмотра. The following illustration shows the rendered shape.

Для заполнения фигуры также можно использовать штриховку, градиенты, изображения, шаблоны и многое другое. You can also paint a shape’s stroke or fill with gradients, images, patterns, and more. Дополнительные сведения см. в разделе закраске сплошным цветом и градиентом Обзор. For more information, see the Painting with Solid Colors and Gradients Overview.

Растягиваемые фигуры Stretchable Shapes

Line, Path, Polygon, Polyline, И Rectangle классы имеют Stretch свойство. The Line, Path, Polygon, Polyline, and Rectangle classes all have a Stretch property. Данное свойство определяет, каким образом Shape содержимое объекта (рисуемой фигуры) растягивается для заполнения Shape пространство макета. This property determines how a Shape object’s contents (the shape to be drawn) is stretched to fill the Shape object’s layout space. Объект Shape пространство макета — это объем пространства Shape выделяется системой макета, из-за явного Width и Height параметр или из-за его HorizontalAlignment и VerticalAlignment параметры. A Shape object’s layout space is the amount of space the Shape is allocated by the layout system, because of either an explicit Width and Height setting or because of its HorizontalAlignment and VerticalAlignment settings. Дополнительные сведения о макете в Windows Presentation Foundation, см. в разделе макета Обзор. For additional information on layout in Windows Presentation Foundation, see Layout overview.


Свойство Stretch принимает одно из следующих значений. The Stretch property takes one of the following values:

None: Shape Содержимое объекта не растягивается. None: The Shape object’s contents are not stretched.

Fill: Shape Содержимое объекта растягивается для заполнения пространства макета. Fill: The Shape object’s contents are stretched to fill its layout space. Пропорции не сохраняются. Aspect ratio is not preserved.

Uniform: Shape Содержимое объекта растягивается максимально для заполнения пространства макета с сохранением исходных пропорций. Uniform: The Shape object’s contents are stretched as much as possible to fill its layout space while preserving its original aspect ratio.

UniformToFill: Shape Содержимое объекта растягивается для полного заполнения пространства макета с сохранением исходных пропорций. UniformToFill: The Shape object’s contents are stretched to completely fill its layout space while preserving its original aspect ratio.

Обратите внимание, что, когда Shape растяжении содержимого объекта Shape рисования контура объекта после растяжения. Note that, when a Shape object’s contents are stretched, the Shape object’s outline is painted after the stretching.

В следующем примере Polygon используется для рисования создается очень маленький треугольник от (0,0), (0,1) и (1,1). In the following example, a Polygon is used to draw a very small triangle from (0,0) to (0,1) to (1,1). Polygon Объекта Width и Height устанавливаются в значение 100, и ее переноса задано значение Fill. The Polygon object’s Width and Height are set to 100, and its stretch property is set to Fill. В результате Polygon содержимое объекта (треугольник) растягивается для заполнения большее пространство. As a result, the Polygon object’s contents (the triangle) are stretched to fill the larger space.

Преобразование фигур Transforming Shapes

Transform Класс предоставляет средства для преобразования фигур на двумерной плоскости. The Transform class provides the means to transform shapes in a two-dimensional plane. Различные виды преобразования включают поворот (RotateTransform), масштабирование (ScaleTransform), наклон (SkewTransform) и преобразование (TranslateTransform). The different types of transformation include rotation (RotateTransform), scale (ScaleTransform), skew (SkewTransform), and translation (TranslateTransform).

Распространенным преобразованием фигуры является поворот. A common transform to apply to a shape is a rotation. Для поворота фигуры создайте RotateTransform и укажите его Angle. To rotate a shape, create a RotateTransform and specify its Angle. Angle 45, элемент поворачивается на 45 градусов по часовой стрелке; углом 90, поворачивает элемент на 90 градусов по часовой стрелке, и т. д. An Angle of 45 rotates the element 45 degrees clockwise; an angle of 90 rotates the element 90 degrees clockwise; and so on. Задайте CenterX и CenterY свойства, если вы хотите контролировать точку, вокруг которой вращается элемент. Set the CenterX and CenterY properties if you want to control the point about which the element is rotated. Эти значения свойств выражаются в системе координат преобразуемого элемента. These property values are expressed in the coordinate space of the element being transformed. CenterX и CenterY имеют нулевые значения по умолчанию. CenterX and CenterY have default values of zero. Наконец, примените RotateTransform к элементу. Finally, apply the RotateTransform to the element. Если вы не хотите, чтобы преобразование влияло на макет, задайте фигуры RenderTransform свойство. If you don’t want the transform to affect layout, set the shape’s RenderTransform property.

Цукерберг рекомендует:  Совет меняем поведение относительных URL с помощью тега base

В следующем примере RotateTransform используется для поворота фигуры 45 градусов относительно верхнего левого угла фигуры (0,0). In the following example, a RotateTransform is used to rotate a shape 45 degrees about the shape’s top left corner (0,0).

В следующем примере другая фигура поворачивается на 45 градусов, но на этот раз — вокруг точки (25, 50). In the next example, another shape is rotated 45 degrees, but this time it’s rotated about the point (25,50).

На следующем рисунке показаны результаты двух преобразований. The following illustration shows the results of applying the two transforms.

В предыдущих примерах к каждому объекту фигуры применяется одно преобразование. In the previous examples, a single transform was applied to each shape object. Чтобы применить несколько преобразований к фигуре (или любой другой элемент пользовательского интерфейса), используйте TransformGroup. To apply multiple transforms to a shape (or any other UI element), use a TransformGroup.

Реализация паттерна MVVM на примере C# (WPF). «Нестрогий» вариант

Model-View-ViewModel (MVVM) – архитектурный паттерн, ориентированный главным образом на платформы, поддерживающие связывание данных и элементов пользовательского интерфейса (например, WPF).

MVVM сравнительно «молодой» паттерн (впервые представлен Джоном Госсманом в 2005 году [1]).

Описание паттерна MVVM

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

Различие между этими паттернами лучше можно схематично представить следующими диаграммами.

Паттерн MVVM состоит из следующих компонентов:

  • Модель (англ.Model)
    Представляет собой бизнес-логику приложения;
  • Представление (англ.View)
    Графический интерфейс для работы с данными или их отображения (окна, кнопки, таблицы и т.д.);
  • Модель представления (англ.ViewModel)
    Обёртка подлежащих связыванию данных из модели, которая содержит методы, которые используются представлением для работы с моделью.


Применительно к WPF, окно приложения, это представление (всегда). Остальные компоненты паттерна принято реализовывать в виде не визуальных классов. Подробнее реализация MVVM в WPF будет рассмотрена далее на прикладном примере.

Пример реализации

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

Модель

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

⚛ Изучение: C#, WPF

У меня был выделен сайт ранее кем-то рекомендованный (не помню кем), вот ссылочка: [stepik.org]. На нем я нашел бесплатный курс по WPF (технологии которая мне в данный момент нужна для разработок, так как с WindowsForm перебрался именно на неё). В общем буду изучать.

На сайте указан курс от начала до конца, по этому просто буду строго следовать ему, выкладывать сюда результаты и какие-либо шаблоны (мало-ли в будущем пригодятся).

Так же это переходный пункт к цели: https://smartprogress.do/goal/269764/ — 100 задач по программированию

Критерий завершения

Изучил основные функции, свободно пользуюсь WPF.

WPF — центрирование содержимого в scrollviewer?

У меня есть scrollviewer, который содержит стекную панель элементов textblock (на самом деле, это, вероятно, tabitems, я использую панель стека внутри scrollviewer, чтобы переопределить вкладку по умолчанию в шаблоне tabcontrol). То, что я хотел бы сделать, — это когда выбранная вкладка изменена, переместите вновь выбранную вкладку в центр видимой области scrollviewer. В идеале это будет работать для всех вкладок, даже тех, которые находятся на дальних сторонах, но я бы согласился на то, что смог прокрутить прокрутку прокрутки таким образом, чтобы конкретный элемент был как можно ближе к центру.

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

C# — WPF центрирование

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1

Почему появилась эта публикация?

Недавно пришла мысль в голову: пора переходить на использование WPF! Ну и, соответственно, изучить надо его, чтобы также «виртуозно» использовать, как и WinForms. Заодно и более старшим, консервативным, коллегам доказать, что WPF использовать более эффективно и продуктивно. (И ПО на WPF работает «шутстрее».)

Вот и решил я этой публикацией «мешок зайцев настрелять»:

— Сравнить разработку компонента на WinForms (Ссылка на статью) и WPF;


— Доказать коллегам, что WPF – это продуктивно и эффективно;

— И сделать небольшой простой урок по освоению WPF (особенно для тех, кто привык к WinForms).

Изучение WPF для тех, кто с WinForms

В прошлой публикации ссылка я рассказал о разработке компонента на WinForms. Поэтому, цель следующая: сделать такой же «по-смыслу» компонент, но на WPF. В целом, подход такой же и советы для WinForms работают и на WPF.

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

Компонент (далее – «dpkEditWPF»), так же как и его «собрат» на WinForms является «partial» (разделён на несколько файлов (partial class), для удобства разработки).

У него также есть Свойство «Значение слова ДПК» (32 разряда) и «Текстовая метка» (чтобы там время отображать). Событие клика по «битовой ячейке» с номером бита также имеется, но только оно стало «маршрутизируемым».

Пример 1/*Общедоступные свойства, события, генераторы событий*/
public partial class DpkWordEditWPF
<
///
/// Значение слова ДПК (32 разряда)
///
uint _dpkValue;
///
/// Свойство — Значение слова ДПК (32 разряда)
///
public uint DpkValue < get < return _dpkValue; >set < _dpkValue = value; Paint(); InvalidateVisual(); >>
///
/// Текстовая метка (добавляется к текстовому значению слова ДПК)
///
string _txtMark;
///
/// Свойство — Текстовая метка (добавляется к текстовому значению слова ДПК)
///
public string TextMark < get < return _txtMark; >set < _txtMark = value; Paint(); InvalidateVisual(); >>
/******/
///
/// Событие — клик по значению
///
public event ReturnEventHandler ClickByValue;
///
/// Генератор события клик по значению
///
///

void OnClickByValue(int index)
<
if (ClickByValue != null)
ClickByValue(this, new ReturnEventArgs (index));
>
>

Расчёт размеров dpkEditWPF также – относительный, на основе текущих размеров.

Пример 2///
/// Установка пропорций
///
void SetProportions()
<
_hPropTextMark = 0.2;
_hPropAddress = 0.2;
_hPropAddressBinVal = 0.2;
_hPropData = 0.2;
_hPropDataBinVal = 0.2;
>
///
/// Установка размеров
///
void SetSizes()
<
/*TextMark*/
_heightTextMark = RenderSize.Height * _hPropTextMark;
/*Address*/
_heightAddress = RenderSize.Height * _hPropAddress;
/*AddressBinValue*/
_heightAddressBinVal = RenderSize.Height * _hPropAddressBinVal;
_w > /*Data*/
_heightData = RenderSize.Height * _hPropData;
/*DataBinValue*/
_heightDataBinVal = RenderSize.Height * _hPropDataBinVal;
_w > /*points*/
_ptTextMark = new Point(0,0);
_ptAddress = new Point(0,_heightTextMark);
_ptAddressBinVal = new Point(0, _heightTextMark + _heightAddress);
_ptData = new Point(0, _heightTextMark + _heightAddress + _heightAddressBinVal);
_ptDataBinVal = new Point(0, _heightTextMark + _heightAddress + _heightAddressBinVal + _heightDataBinVal);
>

Отрисовка компонента также разделена на несколько визуальных буферов и соответственно -процедур отрисовки.

Пример 3 ///
/// визуальный Буфер значения слова ДПК + текстовая метка
///
DrawingVisual _imgTextMark;
///
/// визуальный буфер значения адреса
///
DrawingVisual _imgAddress;
///
/// визуальный буфер двоичного значения адреса (кликабельные ячейки)
///
DrawingVisual _imgAddressBinVal;
///
/// визуальный буфер значения данных
///
DrawingVisual _imgData;
///
/// визуальный буфер двоичного значения данных (кликабельные ячейки)
///
DrawingVisual _imgDataBinVal;

Пример 4 ///
/// Отрисовка области текстового значения Адреса
///
void PaintAddress()
<
if (_imgAddress == null) return;
using (DrawingContext dc = _imgAddress.RenderOpen())
<
dc.DrawRectangle(Brushes.LightBlue, new Pen(Brushes.DarkGray, 1), new Rect(_ptAddress, new Size(RenderSize.Width, _heightAddress)));
string str = «Адрес: 0x» + (_dpkValue & 0xFF).ToString(«X»).PadLeft(2, ‘0’);
DrawTxt(dc, str, _ptAddress, new Size(RenderSize.Width, _heightAddress), Brushes.Black);
>
>

Реализация клика по ячейке двоичного значения («битовой ячейке» с номером бита) реализована с помощью обработчика MouseUp, в котором генерируется событие клика по ячейке.

Пример 5///
/// Обработка клика по ячейке
///
void DpkWordEditWPF_ClickByValue(object sender, ReturnEventArgs e)
<
uint mask = (uint)0x1 0)
_dpkValue &= (

mask);
else
_dpkValue |= mask;
Paint();
InvalidateVisual();
>
///
/// обработка клика мыши (превращение в клик по ячейке)
///
protected override void OnMouseUp(MouseButtonEventArgs e)
<
base.OnMouseUp(e);
Point curPt = e.GetPosition(this);
/*Клик в области адреса*/
if ((curPt.X >= _ptAddressBinVal.X) && (curPt.X = _ptAddressBinVal.Y) && (curPt.Y int index = (int)(curPt.X / _widthCellAddressBV);
OnClickByValue(index);
return;
>
/*клик в области данных*/
if ((curPt.X >= _ptDataBinVal.X) && (curPt.X = _ptDataBinVal.Y) && (curPt.Y int index = (int)(curPt.X / _widthCellDataBV);
OnClickByValue(index + 8);
return;
>
>

Масштабирование и вывод на экран сделаны по тому же принципу, что и в компоненте на WinForms. Масштабирование – вызов отрисовки в буфер и вывод на экран. Вывод на экран – отрисовка визуальных буферов.

Пример 6///
/// первая отрисовка при появлении
///
protected override void OnInitialized(EventArgs e)
<
base.OnInitialized(e);
_imgTextMark = new DrawingVisual();
_imgAddress = new DrawingVisual();
_imgAddressBinVal = new DrawingVisual();
_imgData = new DrawingVisual();
_imgDataBinVal = new DrawingVisual();
Paint();
InvalidateVisual();
>
///
/// обработка вывода на экран
///
protected override void OnRender(DrawingContext drawingContext)
<
base.OnRender(drawingContext);
if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
<
/*режим дизайнера*/
_dpkValue = 0xFFa42312;
Paint();
>
drawingContext.DrawDrawing(_imgTextMark.Drawing);
drawingContext.DrawDrawing(_imgAddress.Drawing);
drawingContext.DrawDrawing(_imgAddressBinVal.Drawing);
drawingContext.DrawDrawing(_imgData.Drawing);
drawingContext.DrawDrawing(_imgDataBinVal.Drawing);
>

Компонент написан на MS Visual Studio 2010, .Net Framework 4. Ссылка на проект: Ссылка на проект

В целом код получился компактнее, чем на WinForms и работает «шустрее». Два тестовых проекта были запущены на машине со следующими характеристиками: Windows XP SP2, процессор 1-ядерный, 1 Гб ОЗУ.

WPF продемонстрировал работу без фризов при изменении размеров формы, WinForms – в свою очередь, изрядно «подтормаживал» при тех же манипуляциях.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих