Ласкаво просимо до dev.net.ua Увійти | Приєднатися | Допомога

Helen

designer for developers

Новини

Полезные ссылки

Почему я люблю Border и Rectange

В общем-то, два простых элемента. Border – элемент компоновки, контейнер. Rectangle –прямоугольная форма. Часто, из-за своей простоты, один или другой элемент используется в качестве фона, подложки или рамочки. Изменение значения свойства Visibility или Opacity такого элемента в различных состояниях (MouseOver, Pressed, Focused, etc) создает эффект подсветки.

Что ж, давайте посмотрим на различия и особенности применения того или иного элемента в определенных случаях. Возьмем две базовые кнопки, визуально идентичные, но в одной из них для фона и подсветки используется Border, а в другом – Rectangle.

1

2

 

3

Общие особенности

В обоих случаях у основного элемента x:Name="BgNormal", отвечающего за визуальное отличие в состоянии Normal, можно сделатьTemplate Binding на фон и очерчивание. Хоть и имена свойств разные, но суть от этого не меняется.

Border
BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"

Rectangle
Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"

С толщиной очерчивания дело обстоит немного сложнее.

Border
BorderThickness="{TemplateBinding BorderThickness}"

Rectangle
Завязаться на Template Binding не получится, но тем не менее можно просто задать StrokeThickness="0" или любое другое значение.

Различия

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

Скругление

Border

Свойство CornerRadius. Заданное значение позволяет скруглить все уголки.

4

Либо задать скругление для каждого из 4-х, например, CornerRadius="7,0,7,0" создаст такое закругление:

5

Rectangle

Одновременного эффекта скругления, наподобии свойства CornerRadius у Border позволят создать такие свойства Recrangle, как  RadiusX="7" RadiusY="7"

6

Скруглить только один уголок не удасться, но зато можно добиться другого результата – задать разные значения RadiusX="7" RadiusY="15". Это будет выглядеть вот так. Странный вид, скажем так, на любителя Smile 

7

Тип очерчивания

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

8

Rectangle
У Rectangle же открывается большое поле для экспериментов.  Раскрыв список Advanced Properties сразу после StrokeThickness, можно например задать массив из точек и интервалов, создав равномерную штрихпунктирную линию либо хаотичную.

9

StrokeDashArray="4 4" будет выглядеть так

10

а при StrokeDashArray="4 4 1 4" и толщине StrokeThickness="2" вот так

11

При StrokeThickness более 2 становится заметно скругление самих точек в шрихпунктире

12
Вот такой эффект можно получить если задать StrokeDashArray="0 1.5" StrokeDashCap="Round" StrokeThickness="2"

Толщина очерчивания

Border
У Border можно задать разные толщины для каждой отдельной границы – левой, правой, верхней,  нижней. В итоге можно легко добиться следующего эффекта, всего лишь задав BorderThickness="5,0,0,0"

13

Rectangle
У Rectangle толщина очерчивания задается сразу для всех, например, StrokeThickness="1".

Вложенность

Border
Главное преимущество Border – это то, что он является контейнером. Это значит что внутрь мы можем положить еще один Border, элемент или еще один контейнер и так до бесконечности. В связи с этим можно создавать, например, эффекты из наружных и внутренних границ или поместить внутрь Grid с колонками, в одной из которых находится иконка, а в соседней располагается контент для кнопки.

15

14

Эксперименты с разной толщиной границ и вложенностью дают свои результаты – расположение кнопок одна за одной в Toolbar-e.

16

Rectangle
Так как Rectangle – не контейнер, то в него вложить ничего не получится.

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

Если у Вас есть свои интересные способы использования того или иного элемента, то буду рада услышать.

Posted: Thursday, December 1, 2011 11:04 AM від Helen

Коментарі

likefire сказав:

Доброго дня и хорошего настроения!

По данной теме имею один вопрос по Border. Вопрос следующий: не сталкивались ли Вы лично с таким эффектом как размытие и смаз содержимого и визуальных свойств границ объекта на готовых интерфейсах? Если сталкивались то как удавалось с этим бороться?

Меня также не затруднит пояснить контекст моего интереса. Разрабатывая WPF-приложение я заметил, что общий размер формы, способы выравнивания и прочего влияют на качество отображения элементов. Например, я заметил, что высоты различных элементов могут принимать нецелые значения, отчего граница толщиной в 1 пк не со всех сторон объекта выглядит чётко: верхняя грань прорисовывается хорошо, а вот нижняя может размазаться. Потратив достаточно много времени на исследования я сделал вывод о том, что нужно следить за высотами элементов, не допускать дефолтных величин высот и ширин, задавая их целыми значениями и тогда вроде бы всё неплохо, но есть подозрение, что существует свойство, позволяющее контролировать описанное мной без необходимости заниматься выверкой всех высот и ширин.

Если подскажете - буду благодарен. В благодарность могу задать ещё пару-тройку вопросов. :)

# November 7, 2012 3:33 AM
Анонімні коментарі деактивовані. Увійдіть або Зареєструйтесь щоб мати доступ до ресурсів Спільноти.