Растяжение графики и ViewBox в WinRT

WinRT --- Растяжение графики и ViewBox

И класс Image, и класс Shape определяют свойство Stretch, которое может использоваться для растяжения растровой или векторной графики по размерам контейнера. Это свойство не является универсальным для всех потомков FrameworkElement. Да и кому придет в голову растягивать подобным образом элемент TextBlock?

Вообще-то иногда именно это и требуется. Предположим, вы выводите группу объектов с текстовыми заголовками, которые должны ограничиваться заданной областью, однако длина текста является переменной величиной (например, текст вводится пользователем). Возможно, вы захотите уменьшить слишком длинный текст, чтобы он поместился в прямоугольнике. И хотя нужное значение FontSize всегда можно вычислить в файле фонового кода, было бы удобнее, если бы размеры TextBlock автоматически подгонялись под конкретную область.

Эта задача хорошо подходит для класса Viewbox, у которого имеется свойство Child типа UIElement; он растягивает дочерний элемент по своим размерам. Viewbox, как и Image с Shape, определяет свойство Stretch. По умолчанию используется значение Uniform (такое же значение по умолчанию, как у Image), но в следующей программе свойству Stretch задается значение Fill, чтобы элемент TextBlock заполнял экран без сохранения пропорций:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Viewbox Stretch="Fill">
            <TextBlock Text="Привет Windows 8!" />
        </Viewbox>
</Grid>

Высота TextBlock всегда вычисляется вместе с диакритическими знаками и подстрочными выносными элементами, даже если они не существуют в тексте, поэтому текст растягивается не на полную высоту окна.

Впрочем, исходные пропорции текста явно не сохранились. В отличие от Image и Shape, Viewbox определяет свойство StretchDirection, которое может принимать значения UpOnly, DownOnly или Both (используется по умолчанию). С его помощью можно приказать Viewbox только увеличивать размер дочернего элемента или только уменьшать его, если потребуется.

Предположим, нам необходимо изменить программу с векторной графикой (векторный текст HELLO), которую мы рассмотрели в предыдущей статье, таким образом, чтобы каждая буква выводилась своим цветом. Один элемент Path придется разбить на пять элементов. Но если вы после этого попробуете использовать свойства Stretch элемента Path, чтобы растянуть каждую букву по размерам окна, такое решение не сработает, потому что буквы имеют разные размеры.

Вместо этого следует разместить все пять элементов Path в элементе Grid и поместить Grid в Viewbox:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Viewbox Stretch="Fill">
            <Grid Margin="6 6 0 0">
                <!-- H -->
                <Path Stroke="Red"
                      StrokeThickness="12"
                      StrokeLineJoin="Round"
                      Data="M 0 0 L 0 100 M 0 50 L 50 50 M 50 0 L 50 100" />

                <!-- E -->
                <Path Stroke="#C00040"
                      StrokeThickness="12"
                      StrokeLineJoin="Round"
                      Data="M 125 0 C 60 -10, 60 60, 125 50, 60 40, 60 110, 125 100" />

                <!-- L -->
                <Path Stroke="#800080"
                      StrokeThickness="12"
                      StrokeLineJoin="Round"
                      Data="M 150 0 L 150 100, 200 100" />

                <!-- L -->
                <Path Stroke="#4000C0"
                      StrokeThickness="12"
                      StrokeLineJoin="Round"
                      Data="M 225 0 L 225 100, 275 100" />

                <!-- O -->
                <Path Stroke="Blue"
                      StrokeThickness="12"
                      StrokeLineJoin="Round"
                      Data="M 300 50 A 25 50 0 1 0 300 49.9" />
            </Grid>
        </Viewbox>
</Grid>

Теперь размеры всех векторных графических объектов в группе изменяются одинаково:

Также обратите внимание на то, что Viewbox увеличивает толщину линий с увеличением размеров графики, а при задании свойства Stretch для элемента Path этого не происходит.