Главная » Silverlight » Элементы ContentControl

0

Элементы, наследующие класс ContentControl {для краткости их часто называют "элементы ContentControl"), — это специальный тип элементов управления, которые могут содержать только один вложенный элемент. Этим они отличаются от контейне­ров, способных содержать произвольное количество вложенных элементов.

Как показано в главе 3, все контейнеры Silverlight наследуют класс Panel, предо­ставляющий им возможность содержать много элементов. В то же время все элементы, способные содержать только один элемент, наследуют класс ContentControl. Иерархия классов показана на рис. 5.6.

Как видно из рис. 5.6, несколько самых популярных элементов управления факти­чески являются элементами ContentControl, включая ToolTip, Button, RadioButton и CheckBox. Есть также специальные элементы ContentControl, такие как ScrollViewer (рассматривается в главе 3). Некоторые элементы ContentControl предназначены для использования с другими, специальными, элементами. Например, элемент ListBoxItem должен быть вложен в ListBox.

Свойство Content

Обратите внимание на то, что в классе Panel определена коллекция Children, со­держащая вложенные элементы, а в классе, наследующем ContentControl, определено свойство Content, содержащее один объект. Свойство Content может содержать объект любого типа, благодаря чему существует три способа вывода содержимого.

•       Элементы. Если в качестве содержимого класса ContentControl используется элемент, наследующий класс UIElement, этот элемент выводится на экран.

•       Другие объекты. Если поместить в свойство Content объект, не являющийся элементом, будет вызван метод ToString (), возвращающий текстовое представ­ление объекта. Для многих типов объектов метод ToString () возвращает вполне осмысленное текстовое представление. Для других он возвращает полностью ква­лифицированное имя класса, которому принадлежит объект.

•       Другие объекты с шаблонами данных. Если поместить в свойство Content объект, не являющийся элементом, и присвоить шаблон данных свойству ContentTemplate, элемент ContentControl выведет шаблон данных и приме­нит определенные в нем выражения для извлечения данных из свойств дру­гих объектов. Этот способ полезен при работе с коллекциями объектов данных (см. главу 16).

Рассмотрим простую кнопку. Для генерации ее содержимого достаточно простой текстовой строки.

<Button Margin="3" content="Teкстовое содержимое кнопки"> </Button>

Текстовая строка является содержимым кнопки и выводится на ее поверхности.

Совет. При заполнении кнопки неформатированным текстом иногда полезно применить свойства шрифтов (см. табл. 5.2), наследуемые классом кнопки от класса Control и дублирующие свойства класса TextBlock.

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

<Button Margin="3"> <Image Source="happyface. jpg"></Image>

</Button>

В кнопку можно также поместить изображение и текст, заключив их в какую-либо оболочку, например в контейнер StackPanel (см. главу 3).

<Button Margin="3"> <StackPanel>

<TextBlock Margin="3" Text="Текст кнопки"></TextBlock> <Image Source="happyface.jpg" />

<TextBlock Margin="3" Text="Eiue немного текста… "> </TextBlock> </StackPanel>

</Button>

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

Какие преимущества предоставляют элементы ContentControl по сравнению с обычными? Ведь в кнопке можно разместить изображение, не достаточно ли этого? Однако модель вложения содержимого все же имеет ряд важных преимуществ.

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

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

<Button Margin="3" Height="70" Width="215"> <Grid Margin="5"> <Polygon Points="100,25 125,0 200,25 125,50" Fill="LightSteelBlue" /> <Polygon Points="100,25 75,0 0,25 75,50" Fill="White"/> </Grid>

</Button>

Рис. 5.7. Векторная кнопка

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

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

Примечание. Нужного эффекта всегда можно достичь, изменив содержимое элемента управления. Например, несмотря на то что в кнопке можно разместить любое содержимое, некоторые эффекты кнопки все же невозможно создать. К ним относятся затенение фона, изменение радиуса скруглення рамки, подсвечивание кнопки при наведении на нее указателя и т.д. Однако эти эффекты можно создать другим способом: применив шаблон элемента управления. Изменение внешнего вида и поведения элементов управления с помощью шаблонов рассматривается в главе 13.

Выравнивание содержимого

В главе 3 рассматривается выравнивание элементов управления в контейнере с помощью свойств HorizontalAlignment и VerticalAlignment, определенных в ба­зовом классе FrameworkElement. Однако если в элемент включено содержимое, мож­но применить другой уровень методов размещения. Для этого необходимо решить, как содержимое элемента управления ContentControl должно быть выровнено от­носительно его рамки. Выравнивание содержимого выполняется с помощью свойств HorizontalContentAlignment и VerticalContentAlignment.

Для свойств HorizontalContentAlignment и VerticalContentAlignment доступны те же значения, что и для HorizontalAlignment и VerticalAlignment. Это означает, что содержимое можно выровнять по одному из краев рамки {значения Top, Bottom, Left и Right), центрировать (значение Center) или растянуть, пока оно не заполнит до­ступное пространство (значение Stretch). Эти значения применяются непосредствен­но к вложенному содержимому, однако можно также создать много уровней вложения для реализации сложной визуальной структуры. Например, если контейнер StackPanel вложен в элемент Button, свойство Button.HorizontalContentAlignment опреде­ляет лишь, где расположен элемент StackPanel, а остальные параметры визуальной структуры определяются свойствами выравнивания и установки размеров контейнера StackPanel и его дочерних элементов.

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

<Button Content="Кнопка без Padding"></Button>

<Button Padding="3" Content="кнonкa с Padding"></Button>

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

Примечание. Свойства HorizontalContentAlignment, VerticalContentAlignment и Padding определены в классе Control, а не в специальном классе ContentControl. Это объясняется тем, что некоторые элементы управления не наследуют класс ContentControl, но все же могут иметь содержимое. Один из примеров такого элемента управления — текстовое поле TextBox. Для включенного в него текста, определяемого свойством Text, нужно каким-либо образом задавать выравнивание и ширину внутренних полосок. Это делается с помощью указанных выше свойств.

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

По теме:

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