Как сделать масштабируемый интерфейс winforms

Добавил пользователь Евгений Кузнецов
Обновлено: 05.10.2024

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

Параметры графического интерфейса, такие как ширина и высота, задаются в Qt в пикселях, но при одинаковом разрешении экрана на компьютере и на смартфоне (например, 1366 на 768 пикселей) получится абсолютно разный результат. На компьютере кнопка размером 40 на 60 пикселей будет удобной, я бы даже сказал, большой, а на экране смартфона по ней уже будет сложно попасть пальцем.

Следовательно при разработке интерфейса одного приложения под множество платформ и экранов необходимо каким-то образом решать проблему масштабируемости интерфейса.

Масштабируемый интерфейс

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

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

После пересчёта пикселей Вы получите некую абстрактную величину, которая называется:

dip или dp - Density-independent Pixels . Независимый от плотности пиксель. Который позволит писать интерфейс приложения, не задумываясь о том, сколько будет пикселей по ширине и высоте экрана на смартфоне или планшете.

Разработка масштабируемого интерфейса под Android

Как известно, устройств под Android большое множество и все они имеют самые разные разрешения экранов, поэтому компания Google даёт следующую рекомендацию по разработке масштабируемого интерфейса:

  • Интерфейс необходимо создавать на основе dip (независимых от плотности пикселей)
  • И в общем случае применять следующую формулу для перевода dip в количество пикселей:

px = dp * (dpi / 160)

Это формула переводит соотношение плотности пикселей целевого устройства к плотности пикселей устройства с экраном mdpi, то есть medium dpi . Формула работает отлично и для 5-ти дюймовых full HD экранов.

Если говорить конкретно о Qt, то в данном случае необходимо заметить, что Qt не даёт возможности задания параметров интерфейса сразу в dip. Необходимо производить пересчёт плотности пикселей dpi в пиксели относительно dip. То есть использовать выше приведённую формулу.

При разработке Scalable интерфейса на Qt Qml можно использовать отдельный объект, который будет принимать Ваши dip пиксели и возвращать их эквивалент в физических пикселях экрана, как в программном коде, приведённом ниже.

Функция pixelDenstity возвращает плотность пикселей на мм, поэтому полученную величину Мы умножаем на 25.4 , чтобы перевести в дюймы. И далее функция данного объекта получая dip пиксели возвращает уже масштабированное количество физических пикселей на экране целевого устройства. При этом я добавил проверку на плотность пикселей меньше 120 dpi . Это необходимо для обычных декстопов, как например мой ноутбук с диагональю 15,6 дюйма и разрешением 1366 на 768 . В данном случае плотность равняется 72 dpi . И если эту величину ещё и поделить на 160, то тогда интерфейс получится очень маленького размера, что тоже не приемлемо для настольного ПК. Поэтому для десктопов не производится перевод dip в px. dip в данном случае приравнивается к px.

Итог. Scalable интерфейс

В результате работы функции данного объекта мне удалось получить следующее изображение разрабатываемого приложения на экране смартфона Meizu m1 note с full HD экраном на 5,5" и на 15,6" экране ноутбука




Рекомендуем хостинг TIMEWEB

Рекомендуем хостинг TIMEWEB

Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

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

Если вы не собираетесь делать форму масштабируемой, установите свойство Scaled=False и дальше не читайте.

Установите AutoScroll=False . AutoScroll = True означает 'не менять размер окна формы при выполнении' что не очень хорошо выглядит, когда содержимое формы размер меняет.

Установите шрифты в форме на самые распространенные TrueType шрифты, например Arial, Times New Roman, Courier. Если вдруг выбранного шрифта не окажется на пользовательском компьютере, то Windows выберет альтернативный шрифт из того же семейства. Этот шрифт может не совпадать по размерус исходным, что вызовет проблемы.

Установите св-во Position в любое значение, отличное от poDesigned . poDesigned оставляет форму там, где она была во время дизайна, и, например, при разрешении 1280x1024 форма может оказаться в левом верхнем углу и совершенно за экраном при 640x480.

Оставляйте по-крайней мере 4 точки между компонентами, чтобы при смене положения границы на одну позицию компоненты не "наезжали" друг на друга.

Для однострочных меток TLabel с выравниванием alLeft или alRight установите AutoSize=True . Иначе AutoSize=False .

Убедитесь, что достаточно пустого места у TLabel для изменения ширины фонта - 25% пустого места многовато, зато безопасно. При AutoSize=False Убедитесь, что ширина метки правильная, при AutoSize=True убедитесь, что есть свободное место для роста метки.

Будьте осторожны при открытии проекта в среде Delphi при разных разрешениях. Свойство PixelsPerInch меняется при открытии формы. Лучше тестировать приложения при разных разрешениях, запуская готовый скомпилированный проект, а редактировать его при одном разрешении. Иначе это вызовет проблемы с размерами. Не изменяйте свойство PixelsPerInch самостоятельно!

В общем, нет необходимости тестировать приложение для каждого разрешения в отдельности, но стоит проверить его на 640x480 с маленькими и большими шрифтами и на более высоком разрешении перед продажей.

Уделите пристальное внимание принципиально однострочным компонентам типа TDBLookupCombo . Многострочные компоненты всегда показывают только целые строки, а TEdit покажет урезанную снизу строку. Каждый компонент лучше сделать на несколько точек больше.

Даже при выполнении перечисленных инструкций, у вас могут возникнуть проблемы при переходе, например от Large fonts к Small fonts в Windows при одном и том же разрешении. Бороться с этим помогают специально для этого разработанные компоненты. Если же вы решите самостоятельно изменять размеры компонентов, лежащих на форме, то вам могут помочь методы TCanvas.TextWidth и TCanvas.TextHeight .

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




Не всё так просто в этой жизни.
Кроме разрешения экрана, Монитор может тоже иметь различные размеры
и если ты разрабатываешь программу на 19 дюймовом мониторе и приносишь её клиенту, а у него 17 дюймовый
монитор, вся хрень повторяется.
Вот как сделать чтобы форма учитывала:
1.Размер монитора.
2.Разрешение экрана
3.Масштаб (96 точек/на дюйм, 120 точек/на дюйм, особые параметры)

Не всё так просто в этой жизни.
Кроме разрешения экрана, Монитор может тоже иметь различные размеры
и если ты разрабатываешь программу на 19 дюймовом мониторе и приносишь её клиенту, а у него 17 дюймовый
монитор, вся хрень повторяется.
Вот как сделать чтобы форма учитывала:
1.Размер монитора.
2.Разрешение экрана
3.Масштаб (96 точек/на дюйм, 120 точек/на дюйм, особые параметры)

Вот что она мне рассказала :

Властивостi монiтора:
Iм'я монiтора Samsung SyncMaster 971P/MagicSyncMaster CX913P/CX971P (Analog)
ID монiтора SAM0247
Модель SyncMaster
Тип Монітора 19" LCD (SXGA)
Макс. видима область екрана 38 cm x 30 cm (19.1")
Спiввiдношення сторiн 5:4
Частота рядкiв 30 - 81 кГц
Частота кадрiв 56 - 75 Гц
Maximum Pixel Clock 750 МГЦ
Максимальниа роздільна здатність 1280 x 1024
Гама 2.20
Пiдтримуванi режими DPMS Active-Off

Пiдтримуванi вiдеорежими:
640 x 480 75 Гц
800 x 480 75 Гц
800 x 600 75 Гц
1024 x 600 75 Гц
1024 x 768 75 Гц
1152 x 864 75 Гц
1280 x 720 75 Гц
1280 x 768 75 Гц
1280 x 800 75 Гц
1280 x 1024 75 Гц

Властивостi Робочого столу:
Технологiя пристрою Растровий дисплей
Роздільна здатність 1280 x 1024
Глибина кольору 32 бiт
Площини кольору 1
Роздільна здатність шрифту 96 dpi
Піксельна ширина / висота 36 / 36
Піксельна дiагональ 51
Частота регенерацiї 75 Гц
и т.д.
--------[ Debug - PCI ]-------------------------------------------------------------------------------------------------

Если это сделал Эверест, значит, может сделать я, ты, он, она - вместе, целая страна.
Потом делаем столько форм, сколько возможных комбинаций, при установке программы или после с определенной периодичностью проверяем все эти параметры, и , если что-то изменилось, подсовываем пользователю идеальный вариант.
Просто покажите мне того, кто это сделает.
А так , я просто смотрю, как выглядит на моем супер-пупер рабочем столе DOS-овское окно и не треплю себе нервы. Если окно windosowskoye , то главное, чтобы я в любом случае мог прочитать самый мелкий шрифт, или попасть в самый мелкий контрол.
И пользователи, как правило попадают.
И действительно, разрабатывать надо на 15"-ке, хотя сегодня попробуйте меня заставить это делать.
Но если уж придется, то вспомню, какие там были размеры окна на 15", сделаю такую форму, и выставлю себе 120 точек. И все равно получится через одно место.
И какие там были размеры формы в ВСВ6? Width = 696 х Height = 480 ?
А какие стали в ВСВ2010 ? ClientWidth = 418 х ClientHeight = 282 ?
Похоже, ребята из борланда сами подталкивают к какому-то решению.

Форма является основным компонентом графического интерфейса программы. Именно на ней размещаются управляющие интерфейсы.

Рассмотрим некоторые из свойств формы, которые влияют на её внешний вид.

Объявляем форму

Для того что бы объявить форму, нам надо добавить библиотеку System.Windows.Forms.dll

После объявляем форму $main_form

Отобразим форму $main_form.

В результате получилась вот такая форма:

DefaultForm

Что бы в загаловке формы отобразить текст нужно присвоить его свойству Text нашей формы:

Текст отобразится в заголовке:

DefaultFormTextHello

Изменение размера формы:

Давайте изменим размер формы.

Это можно сделать через свойства Width(ширина) и Height(высота) формы, где значения параметров это кол-во пикселей.

Этого же результата можно добиться используя параметр формы Size:

Так же можно задать размер с помощью параметра DesktopBounds:

Так же для изменения размеров можно воспользоваться свойством ClientSize

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

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

Для этогу существуют такие параметры , как MinimumSize(минимальный размер формы) и MaximumSize (максимальный размер формы). Если задать эти параметры, то в период жизни форма не сможет за них выйти.

Пример объявления данных свойств:

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

Для этого с начала надо разрешить менять размер формы, в зависимости от расположения объектов в области видимости свойством AutoSize перевести его в значение true

После надо выбрать режим автоматического подбора размера формы и указать его в свойстве AutoSizeMode. Существует два режима этого свойства GrowOnly и GrowAndShrink:

GrowOnly — режим разрешает ужимать размер формы если в этой области нет элементов управления, но не меньше, чем указанов параметрах Width и Height

GrowAndShrink — режим разрешает ужимать размер формы если в этой области нет элементов управления, игнорируя параметры Width и Height но не меньше чем MinimumSize, при этом форма не будет растягиваться по требованию пользователя, но форму можно будет развернуть на всё окно.

Шрифты

Так же не малую роль в отображении формы влияют шрифты. К тому же настройки шрифтов наследуются на управляющие элементы принадлежащие этой форме.

Настройки шрифта хранятся в свойстве формы Font данное свойство наследуется другим упавляющим компонентам на форме. Изменять свойства Font по отдельности нельзя, но можно переопределить его польностью следующим образом:

Что бы поменять цвет шрифта существует следующее свойство ForeColor:

Не малуюроль в определении размеров управляющих элементов играет размер шрифта его можно узнать из свойства AutoScaleBaseSize, его так же можно перераспределить.

Шаблон окна

Шаблон окна формы опредиляется парметром FormBorderStyle, который может принимать семь значений Fixed3D, FixedDialog, FixedSingle, FixedToolWindow, None, Sizabl, SizableToolWindow по умолчанию стоит значение Sizable. Заметим, что внешний вид формы на примерах может существенно отличаться на разных компьютерах и существенно зависит от OC. Так же после назначения определённого шаблона окна в дальнейшем его можно будет редактировать другими свойствами формы.

Рассмотрим шаблоны формы:

Fixed3D — Фиксированная трехмерная граница. Форме запрещено менять размер, однако её можно развернуть на весь экран или свернуть.

FormBorderStyleFixed3D

FixedDialog — Толстая фиксированная граница в диалоговом окне-стиля. Так же как и в Fixed3D запрещено менять размер. Однако иконка в левой верхней части окна не отображается.

FormBorderStyleFixedDialog

FixedSingle — фиксированная, одно строковая граница.

FormBorderStyleFixedSingle

FixedToolWindow — Граница окна инструментов, которое нельзя изменить. Окно инструментов не отображается в панели задач или в окно, которое появляется при нажатии пользователем клавиши ALT+TAB. Хотя форма FixedToolWindow не отображается в панели задач, однако лучше явно необходимо установить свойство ShowInTaskbar в значение false.

FormBorderStyleFixedToolWindow

None — Форма без рамки. Она не умеет изменять размер, и свёртываться в панель задач, но её можно развернуть.

FormBorderStyleNone

Sizable — Граница с изменяемыми размерами. Данная форма может изменять размер, разворачиваться и сворачиваться в панель задач.

FormBorderStyleSizable

SizableToolWindow — Окно может изменять размер окна, разворачивать окно на всё окно, сворачивать в панель задач. Однако кнопки MaximizeBox и MinimizeBox не отображаются. Так же окно не отображается в панели задач однако окно появляется при нажатии клавиш ALT+TAB.

FormBorderStyleSizableToolWindow

Управляющие кнопки

Для управления отображения управляющими кнопками используются следующие свойства ControlBox, MaximizeBox и MinimizeBox.

Свойство ControlBox управляет видимостью всей областью управляющих кнопок. По умолчанию она находиться в состоянии true.

DefaultFormTextHello

Зададим данному свойству значение false

FormControlBoxFalse

Если в форме свойству Text присвоить пустое значение, то шапка формы совсем исчезнет.

Вот так будет выглядеть форма:

FormNotTitle

Включим назад ControlBox и рассмотрим следующие свойства: MaximizeBox и MinimizeBox. Они тоже булевые и служат для того, что бы выключать кнопки развернуть окно и свернуть окно. По умолчанию они имеют свойство true. Рассмотрим как выглядит их выключение:

FormMaximizeBoxFalse

FormMinimizeBoxFalse

Однако, если выключить и MaximizeBox и MinimizeBox кнопки перестают быть видимыми:

FormMaximizeBoxMinimizeBoxFalse

Заметим так же, что отключение кнопок по одиночке или одновременно влияет не только на отображение этих кнопок и возможностями их использовать, но так же и на свойство формы. Так на форме с выключенным свойством MaximizeBox пользователю отключаются все стандартные возможности распахнуть форму на весь экран. Так же дела обстоят и с MinimizeBox.

Иконка.

Иконка отображаемая в левом верхнем углу формы, а так же отображаемая в панели задач может определить через свойство формы Icon например вот так:

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

Элемент захвата

Для того, чтобы задать видимость захвата для изменения размера, отображаемого в правом нижнем углу формы. Нужно воспользоваться свойством SizeGripStyle. Оно имеет 3 значенич Auto, Hide, Show

Данное значение стоит по умолчанию. Форма сама решает отображать этот элемент или нет.

Элемент будет скрыт с формы.

FormSizeGripStyleHide

элемент отображается на форме

FormSizeGripStyleShow

Цвет и прозрачность.

Что бы задасть цвет формы нужно воспользоваться свойством BackColor, этот параметр будет наследоваться размещённым на данной форме управляющим элементам. Сделаем цвет рабочей области, например синим:

FormBackColor

Но однотонный цвет може не совсем удовлетворять нашим потребностям… для этого можно указать картинку в качестве заднего фона, с помощью свойства формы BackgroundImage

FormBackgroundImage

А в свойстве TransparencyKey формы мы должны указать, какой цвет будет заменяться на прозрачный.

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

FormTransparencyKey

Это свойство можно использовать для рисования не стандартных окон убрав перед этим рамку формы

Если же мы не хотим делать дырки в форме, а всеволишь сделать её слегка прозрачной, мы можем воспользоваться свойством Opacity, значения в ней колеблятся от 0 это полностью прозрачная до 1, не прозрачная.

FormOpacity

Курсор

Для изменения вида курсора в приложении можно воспользоваться свойством формы Cursor:

Так же можно узнать перехватывается ли курсор приложением в даннй момент, для этого нужно посмотреть данные свойства формы Capture

Что бы уведомить пользователя о текущем процессе, можно так же включить курсор ожидания указав в свойстве UseWaitCursor значение true

Состояние окна.

Что бы узнать в каком состоянии находиться окно или изменить его, можно воспользоваться свойством формы WindowState оно принимает три значения Maximized, Minimized, Normal.

Что бы развернуть окно:

Свернуть в панель задач:

Перевести в обычный(свободный) режим:

Зеркальный вид окна

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

Для этого нам нужно сначала включить поддержку ввода текста с права на лево свойством формы RightToLeft

У этого свойства кроме значения YES, который включает поддержку ввода текста с права на лево, существуют другие параметры. Это NO выключает поддержку ввода текста с права на лево. И Inherit — наследовать значения от родительского элемента, установленно по умолчанию.

Только после этого можно отобразить форму зеркально установив свойство формы RightToLeftLayout в значение true

FormMirrored

Посмотреть отображается ли форма в зеркальном виде можно из свойства формы IsMirrored.

Отображение в Панели задач.

Видимость окна.

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

Для формы существуют параметры видимости, но для отображения формы лучше пользоваться функция Enabled если установить его в значение false, то его не удасться отобразить методом ShowDialog().

Так же если надо скрыть форму, то это можно сделать изменив свойство Visible на false. Можно так же отобразить форму, но это может быть не всегда хорошей идеей, лучше пользоваться методом ShowDialog.

Комментарии:

Комментарии 12

Огромное спасибо за подробный разбор!
Очень сильно помогло в пониманиии концепции построения GUI для повершела =)

Приятно осознавать, что мой блог помогает людям. 🙂

Немного удивила проблема. А разве всё работает не так, как вы описали? 🙂
Как добирусь до винды с powershell попытаюсь состряпать какойнить пример… предположительно это будет завтра.

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

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

Например, легче встретить мониторы (особенно на портативных компьютерах), которые имеют плотность пикселей в 120 dpi или 144 dpi (точек на дюйм), чем более традиционные 96 dpi. При их встроенном разрешении эти мониторы располагают пиксели более плотно, создавая напрягающие глаз мелкие элементы управления и текст. В идеале приложения должны использовать более высокую плотность пикселей, чтобы отобразить больше деталей. Например, монитор с высоким разрешением может отображать одинакового размера значки панели инструментов, но использовать дополнительные пиксели для отображения мелкой графики. Подобным образом можно сохранить некоторую базовую компоновку, но обеспечить более высокую четкость деталей.

По разным причинам такое решение было невозможно в прошлом. Хотя можно изменять размер графического содержимого, нарисованного в GDI/GDI+, компонент User32 (который генерирует визуальное представление распространенных элементов управления) не поддерживает реального масштабирования.

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

Так выглядит картина в целом, но нужно уточнить еще несколько деталей. Самое важное, что следует осознать — WPF базирует свое масштабирование на системной установке DPI, а не на DPI физического дисплейного устройства. Это совершенно логично — в конце концов, если вы отображаете приложение на 100-дюймовом проекторе, то, скорее всего, отойдете подальше на несколько шагов и будете ожидать увидеть огромную версию окон. Конечно, не желательно, чтобы WPF масштабировал приложение, уменьшая его до "нормального" размера. Аналогично, если вы используете портативный компьютер с дисплеем высокого разрешения, то хотите увидеть несколько уменьшенные окна; это цена, которую приходится платить за то, чтобы уместить всю информацию на маленьком экране. Более того, у разных пользователей разные предпочтения на этот счет. Некоторым нужны расширенные подробности, в то время как другие хотят увидеть больше содержимого.

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

Единицы WPF

Окно WPF и все элементы внутри него измеряются в независимых от устройства единицах. Такая единица определена как 1 /96 дюйма. Чтобы понять, что это означает на практике, нужно рассмотреть пример.

Предположим, что вы создаете в WPF маленькую кнопку размером 96x96 единиц. Если вы используете стандартную установку Windows DPI (96 dpi), то каждая независимая от устройства единица измерения соответствует одному реальному физическому пикселю. Это потому, что WPF использует следующее вычисление:

По сути, WPF предполагает, что ему нужно 96 пикселей, чтобы отобразить один дюйм, потому что Windows сообщает ему об этом через системную настройку DPI. Однако в действительности это зависит от применяемого дисплейного устройства. Например, рассмотрим 20-дюймовый жидкокристаллический монитор с максимальным разрешением в 1600x1200 пикселей. Используя теорему Пифагора, вы можете вычислить плотность пикселей для этого монитора, как показано ниже:

В этом случае плотность пикселей составляет 100 dpi — немного больше того, что предполагает Windows. В результате на этом мониторе кнопка размером 96x96 пикселей будет несколько меньше одного дюйма.

С другой стороны, рассмотрим 15-дюймовый жидкокристаллический монитор с разрешением 1024x768 пикселей. Здесь плотность пикселей составит около 85 dpi, поэтому кнопка размером 96x96 пикселей окажется размером немного больше 1 дюйма.

В обоих случаях, если вы уменьшите размер экрана (скажем, переключившись на разрешение 800x600), то кнопка (и любой другой экранный элемент) станет пропорционально больше. Причина в том, что системная установка DPI останется 96 dpi. Другими словами, Windows продолжает предполагать, что 96 пикселей составляют дюйм, несмотря на то, что при меньшем разрешении потребуется существенно меньше пикселей.

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

Системная установка DPI

До сих пор пример кнопки WPF работал точно так же, как любой другой интерфейсный элемент в Windows-приложении любого иного типа. Отличие проявляется при изменении вашей системной установки DPI. В предыдущем поколении Windows это средство иногда называли крупными шрифтами. Это потому, что системная установка DPI влияет на размер системных шрифтов, часто оставляя прочие детали неизменными.

Многие Windows-приложения не полностью поддерживают увеличенные установки DPI. В худшем случае увеличение системной установки DPI может привести к появлению окон, в которых некоторое содержимое увеличено, а другое — нет, что может привести к утере части содержимого или даже к нефункциональным окнам.

Здесь поведение WPF отличается. WPF воспринимает системную установку DPI естественным образом и без особых затрат. Например, если вы измените системную установку DPI на 120 dpi (распространенный выбор пользователей экранов с большим разрешением), WPF предполагает, что для заполнения дюйма пространства нужно 120 пикселей. WPF использует следующее вычисление для определения того, как он должен транслировать логические единицы в физические пиксели устройства:

Другими словами, когда вы устанавливаете системную настройку DPI в 120 dpi, то механизм визуализации WPF предполагает, что одна независимая от устройства единица измерения соответствует 1,25 пикселя. Если вы отображаете кнопку 96x96, то физический ее размер составит 120x120 пикселей (потому что 96 х 1,25 = 120). Именно такого результата вы и ожидаете — кнопка размером в 1 дюйм имеет такой же размер на мониторе с повышенной плотностью пикселей.

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

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

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