Главная » Silverlight » Свойства, используемые для размещения элементов

0

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

Все свойства, приведенные в табл. 3.3, наследуются от базового класса FrameworkElement. Следовательно, они поддерживаются всеми графическими элемен­тами, которые можно использовать на странице Silverlight.

Примечание. Как показано в главе 2, контейнеры могут предоставлять дочерним элементам подключенные свойства. Например, каждый дочерний элемент объекта Grid получает от него свойства Row (Строка) и Column (Столбец), позволяющие позиционировать элемент в заданной ячейке. С помощью подключенных свойств можно устанавливать значения, специфичные для типа контейнера, однако свойства, приведенные в табл. 3.3, достаточно общие и применимы ко многим контейнерам.

Таблица 3.3. Свойства дочерних элементов, определяющие визуальную структуру страницы

Имя свойства

Описание

HorizontalAlignment

Способ позиционирования дочернего элемента в контейнере, когда есть свободное пространство по горизонтали; доступны значения Center (По центру), Left (По левому краю), Right (По правому краю) и stretch (Растяжение)

VerticalAlignment

Способ позиционирования дочернего элемента в контейнере, когда есть свободное пространство по вертикали; доступны значения Center, Тор (По верхнему краю), Bottom (По нижнему краю) и Stretch

Margin

Добавление пустой внешней полоски вокруг дочернего элемента; свойство Margin содержит экземпляр структуры System.Windows . Thickness, в которой отдельно хранятся значения ширины полоски сверху, снизу, слева и справа

MinWidth и MinHeight

Минимальные ширина и высота дочернего элемента; если элемент слишком большой, не поместившееся содержимое элемента отсекается

MaxWidth и MaxHeight

Максимальные ширина и высота дочернего элемента; если в контейнере остается свободное пространство, элемент не станет больше, чем задано значениями MaxWidth и MaxHeight, даже если свойства выравнивания имеют значения stretch

Width и Height

Явное задание размеров элемента; эти свойства переопределяют значения stretch свойств выравнивания, однако значения MinWidth, MinHeight, MaxWidth и MaxHeight имеют более высокий приоритет, чем Width и Height

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

Чтобы понять, как работают свойства размещения, вернемся к рис. 3.3. Свойство VerticalAlignment (Выравнивание по вертикали) не влияет на внешний вид страницы, поскольку каждому элементу присвоена необходимая ему высота, и ни пикселя больше. Однако свойство HorizontalAlignment (Выравнивание по горизонтали) влияет на стра­ницу, потому что оно определяет, как элемент выровнен в своей строке.

Обычно свойству HorizontalAlignment по умолчанию присваивают значения Left (для надписи) и Stretch (для кнопки). Поэтому каждая кнопка на рис. 3.3 занимает по ширине весь столбец. Изменим значения HorizontalAlignment следующим образом.

<StackPanel Background="White"> <TextBlock HorizontalAlignment="Center" Text="PHfl кнопок"></TextBlock> <Button HorizontalAlignment="Left" Content="Кнопка l"X/Button> <Button HorizontalAlignment="Right" Content="KHoпKa 2"></Button> <Button Content="кнопка 3"></Button> <Button Content="Кнопка 4"x/Button>

</StackPanel>

Результат показан на рис. 3.5. Первые две кнопки получили минимальные размеры и были выровнены соответственно заданным значениям HorisontalAlignment. Две ниж­ние кнопки по-прежнему растянуты по всей ширине контейнера StackPanel. Попробуйте изменить размеры страницы путем перетаскивания, и вы увидите, что надпись остается посредине, а первые две кнопки выравниваются по левому и правому краям.

Рис. 3.5. Контейнер StackPanel с выровненными кнопками

Примечание. Контейнер StackPanel имеет собственные свойства HorizontalAlignment и VerticalAlignment. По умолчанию они равны Stretch, в результате чего панель заполняет весь внешний контейнер (в данном примере — окно браузера). Если задать для VerticalAlignment другое значение, панели будут присвоены достаточно большие размеры, чтобы на ней поместился самый широкий элемент управления.

Внешние пустые полоски

В правильно спроектированной странице между элементами должно быть неболь­шое свободное пространство, поскольку "слипшиеся" элементы выглядят некрасиво. Его можно добавить с помощью свойств Margin[1], принадлежащих дочерним элементам.

Установить одинаковые по ширине внешние полоски со всех сторон кнопки можно помощью следующей разметки.

<Button Margin="5" Content="Кнопка 3"></Button>

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

<Button Margin="5,10,5ДО" Content="KHonKa 3"></Button>

Установить внешние полоски в коде можно с помощью структуры Thickness.

cmd.Margin = new Thickness (5) ;

При установке внешних полосок текущего элемента необходимо учитывать, какие внешние полоски заданы для соседних элементов. Например, если две соседние кнопки расположены одна под другой и для каждой задано свойство Margin="5", то между ними будет создано пустое пространство шириной 10 пикселей.

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

<StackPanel Margin="3" Background="White"> <TextBlock Margin="3" HorizontalAlignment="Center"

Text="PHfl кнопок"X/TextBlock> <Button Margin="3" HorizontalAlignment="Left"

Content="кнопка l"x/Button> <Button Margin="3" HorizontalALignment="Right"

Content="Кнопка 2"X/Button> <Button Margin="3" Content="кнопка 3"></Button> <Button Margin="3" Content="Кнопка 4"x/Button>

</StackPanel>

Страница выглядит привлекательно, если расстояние между двумя кнопками равно расстоянию между кнопкой и рамкой контейнера. На рис. 3.7 показано, как значения Margin определяют внешний вид страницы.

Минимальные, максимальные и явно заданные размеры

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

Рассмотрим правила применения размеров на примере кнопки. Предположим, кнопке предоставлена возможность растягиваться до размеров родительской панели StackPanel, но заданы следующие ограничения: ширина кнопки должна быть не более 200 и не менее 100 пикселей (по умолчанию кнопки получают минимальную ширину 75 пикселей). Ниже приведена разметка, выводящая такую кнопку.

<StackPanel Margin="3"> <TextBlock Margin="3" HorizontalAlignment="Center"

Text="A Button Stack"></TextBlock> <Button Margin="3" MaxWidth="200" MinWidth="100"

C0ntent="KH0nica l"X/Button> <Button Margin="3" MaxWidth="200" MinWidth="100"

Content="KHonKa 2"></Button> <Button Margin="3" MaxWidth="200" MinWidth="100"

Результат показан на рис. 3.6.

Рис. 3.6. Добавление внешних пустых полосок

Content="кнопка 3"></Button> <Button Margin="3" MaxWidth="200" MinWidth="100" Content=" кнопка4"></Button>

</StackPanel>

Рис. 3.7. Объединение значений ширины внешних полосок

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

•       Минимальный размер. Каждая кнопка всегда имеет размеры не менее минимальных.

•       Максимальный размер. Каждая кнопка всегда имеет размеры не более макси­мальных (если максимальный размер ошибочно не задан меньше минимального).

•       Содержимое. Если содержимое кнопки требует большей ширины, объект Stack- Panel пытается увеличить ширину кнопки.

•       Размеры контейнера. Если минимальная ширина кнопки меньше ширины па­нели StackPanel, часть кнопки будет отсечена. Однако, если минимальная ши­рина не установлена или установлена меньшей, чем значение Width, кнопке не будет разрешено растянуться шире панели, даже если на кнопке не помещается весь текст.

•       Выравнивание по горизонтали. По умолчанию свойство HorizontalAlignment кнопки имеет значение Stretch. В этом случае панель попытается увеличить кнопку по горизонтали до полной ширины панели.

Таким образом, минимальное и максимальное значения ширины задают абсолют­ные границы диапазона. Внутри диапазона панель StackPanel пытается вместить со­держимое и удовлетворить параметры выравнивания.

На рис. 3.8 показана панель StackPanel с кнопками. Слева ширина окна браузера уменьшена. Кнопки имеют минимальную ширину 200 и максимальную ширину 300. Если уменьшить ширину окна до такой степени, что на панели не сможет поместиться кнопка шириной 200 пикселей, правая часть кнопки будет отсечена. Попробуйте пере­тащить границу окна браузера, чтобы убедиться в этом.

Рис. 3.8. Ограничение размеров кнопки

При увеличении панели по горизонтали кнопка растягивается до 300 пикселей. После этого ширина кнопки перестает увеличиваться, а справа и слева от кнопки до­бавляется пустое пространство (рис. 3.8, справа).

Примечание. В некоторых ситуациях желательно использовать код, проверяющий реальные размеры элемента на странице. Свойства Height и Width для этого бесполезны, поскольку они содержат заданные размеры, не всегда совпадающие с реальными. В идеале каждому элементу следовало бы предоставить возможность самостоятельно устанавливать свои размеры таким образом, чтобы в нем поместилось его содержимое, а свойства Height и width не задавать вообще. Однако идеалы, как вы знаете, редко достижимы. Реальные размеры элементов можно извлечь из свойств ActualHeight и Actualwidth. Не забывайте, что при изменении размеров страницы или содержимого эти значения немедленно изменяются.

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

По теме:

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