Главная » Разработка для Windows Phone 7 » Элемент Border Windows Phone 7

0

В TextBlock не предусмотрена рамка, которой можно было бы обвести текст. К счастью в Silverlight есть элемент Border, и он может использоваться для создания рамок вокруг TextBlock или любого другого элемента. Border включает свойство Child (Потомок) типа UIElement. Это означает, что в Border может быть помещен лишь один элемент, но этим элементом может быть панель, в которой может располагаться множество элементов.

Загрузите в Visual Studio приложение XamlExperiment из предыдущей главы и поместите TextBlock в Border следующим образом:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Border Background="Navy" BorderBrush="Blue" BorderThickness="16" CornerRadius="25"> <Border.Child>

<TextBlock Text="Hello, Windows Phone 7!" /> </Border.Child> </Border> </Grid>

Свойство Child является атрибутом ContentProperty элемента Border, поэтому теги Border.Child не нужны. Если свойства HorizontalAlignment и VerticalAlignment не заданы, элемент Border

занимает всю область Grid; и TextBlock занимает всю область Border, даже если сам текст располагается в верхнем левом углу. TextBlock в Border можно центрировать:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin=мl2,Q,12,Qм> <Border Background=MNavyM BorderBrush="Blue" BorderThickness="16" CornerRadius="25"> <TextBlock Text=MHello, Windows Phone 7!"

HorizontalAlignment=MCenterM VerticalAlignment=MCenterM />

</Border> </Grid>

Или можно центрировать Border в Grid:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin=мl2,Q,12,Qм> <Border Background="Navy" BorderBrush="Blue" BorderThickness="16" CornerRadius="25" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock Text="Hello, Windows Phone 7!" /> </Border> </Grid>

Здесь Border уменьшается до размера, достаточного лишь, чтобы вместить TextBlock. Также можно задать свойства HorizontalAlignment и VerticalAlignment для TextBlock, но сейчас это не возымеет никакого действия. Немного увеличить область внутри рамки можно, задавая свойства Margin или Padding для TextBlock или свойство Padding самого Border:

Теперь наш TextBlock обведен симпатичной рамкой. Свойство BorderThickness (Толщина рамки) типа Thickness (эта же структура используется для Margin или Padding), что обеспечивает возможность сделать толщину рамки разной со всех сторон. Свойство CornerRadius (Радиус скругления углов) типа CornerRadius. CornerRadius – это структура, которая также позволяет задавать четыре разных значения для четырех углов. Свойства типа Background и BorderBrush, что позволяет использовать градиентные кисти.

Если требуется получить Border «нормальной» толщины, можно использовать предопределенные ресурсы:

<Border BorderThickness="{StaticResource PhoneBorderThickness}"

В данном случае получаем рамку толщиной в 3 пиксела. Ресурс PhoneStrokeThickness (Толщина обводки в телефоне) обеспечивает такое же значение.

Что произойдет, если задать RenderTransform для TextBlock? Попробуем:

<Grid x:Name=MContentPanel" Grid.Row="1M Margin="12,0,12,0"> <Border Background="Navy"

BorderBrush="Blue" BorderThickness="16" CornerRadius="25" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20"> <TextBlock Text="Hello, Windows Phone 7!"

RenderTransform0rigin=M0.5,0.5"> <TextBlock.RenderTransform>

<RotateTransform Angle=м45м /> </TextBlock.RenderTransform> </TextBlock> </Border> </Grid>

Вот что мы получаем:

Свойство RenderTransform называется трансформацией визуального представления не просто так: оно оказывает влияние только на формирование визуального представления и не касается того, как элемент рассматривается в системе компоновки. (В Windows Presentation Foundation есть второе свойство под именем LayoutTransform (Трансформация компоновки), которое изменяет компоновку. Если бы мы создавали код в WPF и использовали в данном случае LayoutTransform, Border расширился бы, чтобы вместить развернутый текст, но при этом сам не разворачивался бы. Однако в Silverlight пока нет свойства LayoutTransform, хотя, как видите, иногда его явно не хватает.)

Но не стоит падать духом! Перенесем RenderTransform (и RenderTransformOrigin) из TextBlock в Border:

<Grid x: Name="ContentPanel" Grid.Row “1" Margin= «12,0,12,0»

<Border Background="Navy" BorderBrush="Blue" BorderThickness="16" CornerRadius="25" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20"

RenderTransform0rigin="0.5 0.5"> <Border.RenderTransform>

<RotateTransform Angle="45" /> </Border.RenderTransform>

<TextBlock Text="Hello, Windows Phone 7!" /> </Border> </Grid>

Теперь трансформирован не только элемент, к которому применили трансформацию, но и все его дочерние элементы, что отчетливо демонстрирует данный снимок экрана:

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

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

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