Главная » Silverlight » Установка размеров и размещение фигур

0

При создании пользовательского интерфейса жесткое кодирование размеров — не идеальное решение. Оно ограничивает возможности управления динамическим содер­жимым и затрудняет локализацию приложения.

Однако при создании фигур эти проблемы появляются не всегда. Часто необходи­мо точно управлять размерами и размещением фигур. В некоторых случаях размеще­ние фигур можно сделать более гибким. Например, элементы Ellipse и Rectangle мо­гут сами устанавливать свои размеры на основе доступного пространства.

Если свойства Height и Width не заданы, размеры фигуры определяются размерами контейнера. Например, если задано пропорциональное поведение контейнера Grid, то с помощью следующей разметки можно создать эллипс, заполняющий страницу.

<Grid>

<Ellipse Fill="Yellow" Stroke="Blue"></Ellipse>

</Grid>

Данная разметка определяет одну пропорциональную строку Grid, заполняющую весь контейнер. Следовательно, эллипс заполняет всю строку.

Размеры зависят от свойства Stretch, определенного в классе Shape. По умолча­нию оно имеет значение Fill, в результате чего фигура заполняет свой контейнер (если размеры не установлены явно). Доступные значения свойства Stretch приведены в табл. 8.2.

Таблица 8.2. Элементы перечисления stretch

Имя элемента

Описание

Fill

Фигура растягивается по горизонтали и вертикали, пока позволяют размеры контейнера; пропорции не соблюдаются; если высота и ширина фигуры установлены явно, значение Fill игнорируется

None

Фигура не растягивается; если с помощью свойств Height, width, MinHeight и MinWidth заданы нулевые высота и ширина фигуры, она не появляется на экране

Uniform UniformToFill

Высота и ширина увеличиваются пропорционально, пока фигура не достигнет границы контейнера; эллипс превращается в окружность максимального диаметра, помещающуюся в контейнере; прямоугольник превращается в квадрат с максимально возможной длиной стороны; при явно заданных размерах фигура ограничивается минимальным размером, например, если width=10, a Height=l00, будет выведен квадрат со стороной 10×10 пикселей

Высота и ширина фигуры пропорционально увеличиваются, пока позволяет больший размер контейнера; не поместившаяся часть фигуры отсекается; например, если страница имеет размеры 100×200 пикселей, а выводится прямоугольник размером 200×200 пикселей, то часть прямоугольника будет отсечена; явно заданные значения высоты и ширины интерпретируются как размеры контейнера; например, если width=l0, Height=100, а прямоугольник имеет размеры 100×100 пикселей, то будет выведен отсеченный прямоугольник размером 10×100 пикселей

На рис. 8.4 показано несколько эллипсов при разных значениях свойства Stretch.

Рис. 8.4. Заполнение трех ячеек решетки Grid; снизу при­ведены значения stretch

Обычно присвоение значения Stretch свойству Fill эквивалентно присвоению это­го же значения свойствам HorizontalAlignment и VerticalAlignment. Отличие прояв­ляется, когда для фигуры явно установлены свойства Height и Width. Тогда свойства HorizontalAlignment и VerticalAlignment игнорируются, но значение Stretch свой­ства Fill влияет на фигуру; в этом случае оно определяет способ установки размеров фигуры в заданных границах.

Совет. Рекомендуется либо установить размеры фигуры явно, либо позволить ей растянуться до заданных размеров или размеров контейнера. Комбинация этих способов используется редко.

До сих пор мы рассматривали размеры объектов Rectangle и Ellipse, однако, кро­ме установки размеров фигур, их еще нужно позиционировать в контейнере. Фигуры подчиняются тем же правилам позиционирования в контейнере, что и другие элементы Silverlight. Некоторые контейнеры (например, StackPanel, DockPanel, WrapPanel) плохо подходят для размещения фигур, поскольку они разрабатывались для элементов дру­гих типов. Часто фигуры размещают в контейнере Grid, позволяющем позициониро­вать фигуры в отдельных ячейках. Идеальным для фигур является контейнер Canvas, вынуждающий задавать координаты каждой фигуры с помощью подключенных свойств Left (Слева), Тор (Сверху), Right (Справа) и Bottom (Снизу). Эти свойства предоставляют полный контроль над перекрывающимися элементами.

<Canvas>

<Ellipse Fill="Yellow" Stroke="Blue" Canvas.Left="100" Canvas.Top="50"

Width="100" Height»"50"></Ellipse> <Rectangle Fill="Yellow" Stroke="Blue" Canvas.Left="30" Canvas.Top="40"

Width»"100" Height»"50"></Rectangle>

</Canvas>

В контейнере Canvas важна последовательность де­скрипторов в разметке. Например, в приведенной выше разметке эллипс определен раньше, поэтому на экране сна­чала рисуется он, а затем — прямоугольник. В результате прямоугольник закрывает эллипс (рис. 8.5). Чтобы вывести эллипс поверх прямоугольника, нужно либо поменять ме­стами дескрипторы в разметке, либо применить подклю­ченное свойство Canvas . ZIndex для перемещения нужного элемента вверх или вниз в последовательности вывода. Не забывайте, что контейнер Canvas не обязательно дол­жен занимать всю страницу. Например, его можно поместить в одну ячейку контейнера Grid. Этот прием позволяет зафиксировать визуальную форму сложной составной фи­гуры в динамичном пользовательском интерфейсе.

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

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