• Статья
Урок 5. Текст

Это пятая статья из серии «10 уроков по Silverlight 5».

Сначала вспомним, что такое Silverlight.

Microsoft Silverlight — это платформа создания полнофункциональных интернет-приложений. Среда выполнения Silverlight доступна для большинства веб-браузеров в виде подключаемого модуля и работает под управлением различных операционных систем, включая Windows, Mac и Linux.

На предыдущем уроке мы:

  • рассмотрели новые возможности Silverlight 5 по работе с мультимедиа;
  • научились воспроизводить звук с малой задержкой, используя классы XNA SoundEffect и SoundEffectInstance;
  • узнали, как реализовать поддержку пультов дистанционного управления и команд мультимедиа, отдаваемых с помощью клавиш.

В этой статье я расскажу о новых возможностях Silverlight 5 по работе с текстом: трекинге и сдвиге текста, применении связанного и многоколоночного текста, поддержке OpenType и использовании текста с привязкой пикселей и свойства TextOptions.

Связанный и многоколоночный текст

Рассмотрим пример, которым я пользовался раньше и который оказался очень полезен многим читателям. Поддержка связанного и многоколоночного текста обеспечивает «перетекание» текста из одного элемента управления RichTextBlock в другой. А последовательное объединение нескольких элементов управления RichTextBlockOverflow позволяет размещать текст в нескольких местах макета. Давайте рассмотрим снимок экрана, иллюстрирующий результаты совместного использования элементов управления RichTextBlock и RichTextBlockOverflow.

Как видно на этом снимке, в левом верхнем углу находится элемент управления RichTextBlock и его содержимое переходит в элементы управления RichTextBlockOverFlow #1, RichTextBlockOverFlow #2 и RichTextBlockOverFlow #3. Это можно рассматривать как аналог публикации в газете. При изменении размеров окна браузера содержимое заполняет доступную область.

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

          <Grid x:Name="LayoutRoot"
          Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.415*" />
            <ColumnDefinition Width="0.168*" />
            <ColumnDefinition Width="0.418*" />
       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
           <RowDefinition Height="0.373*" />
           <RowDefinition Height="0.143*" />
           <RowDefinition Height="0.483*" />
       </Grid.RowDefinitions>
       <Rectangle Fill="Blue"
                  Margin="0,1"
                  Stroke="Black"
                  Grid.Row="1"
                  Grid.ColumnSpan="3" />
       <Rectangle Fill="Blue"
                   Margin="-1,0,1,0"
                   Stroke="Black"
                   Grid.RowSpan="3"
                   Grid.Column="1" />
        <RichTextBlock x:Name="rtb1"
                     Margin="0,0,5,3"                     
                     OverflowContentTarget="{Binding ElementName=rtb2}"
                       
                  >
            <Paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.
   
            </Paragraph>
        </RichTextBlock>
        <RichTextBlockOverflow x:Name="rtb2"
                             Grid.Row="2"
                             OverflowContentTarget="{Binding ElementName=rtb3}"
                             
                             />
        <RichTextBlockOverflow x:Name="rtb3"
                             Grid.Column="2"
                             OverflowContentTarget="{Binding ElementName=rtb4}"
                             />
   
        <RichTextBlockOverflow x:Name="rtb4"
                             Grid.Column="2"
                             Grid.Row="2"
                             />
   
   
    </Grid>

Главное, что следует помнить, — это то, что RichTextBlock содержит свойство OverflowContentTarget, позволяющее привязывать специальный элемент управления RichTextBlockOverflow.

ПРИМЕЧАНИЕ. По итогам бета-тестирования корпорация Майкрософт внесла изменения: вместо класса RichTextBox стал использоваться класс RichTextBlock, не поддерживающий редактирование. Поэтому многие примеры, демонстрирующие эту функцию и опубликованные в Интернете до завершения бета-тестирования, теперь работать не будут. Так что вы поступили правильно, выбрав именно это руководство. =)

Межзнаковый интервал

Элементы управления TextBox и TextBlock предоставляют удобные средства управления расстоянием между символами в тексте. Давайте рассмотрим снимок экрана, на котором показан текст с разной величиной межзнакового интервала, отображаемый в элементе управления TextBlock.

А теперь давайте рассмотрим код.

          <Grid x:Name="LayoutRoot" >
       <StackPanel>
           <TextBlock CharacterSpacing="1000" FontSize="14"
                      Text="The quick brown fox jumps over the lazy dog" />
           <TextBlock CharacterSpacing="500" FontSize="14"
                      Text="The quick brown fox jumps over the lazy dog" />
           <TextBlock CharacterSpacing="250" FontSize="14"
                      Text="The quick brown fox jumps over the lazy dog" />
           <TextBlock CharacterSpacing="100" FontSize="14"
                      Text="The quick brown fox jumps over the lazy dog" />
            <TextBlock CharacterSpacing="-100" FontSize="14"
                       Text="The quick brown fox jumps over the lazy dog" />
        </StackPanel>
    </Grid>

Как видно, чтобы изменить межзнаковый интервал, достаточно изменить значение свойства CharacterSpacing элемента управления TextBlock. Обратите внимание, что если указать отрицательное значение этого свойства, символы «слипнутся».

Шрифты OpenType

Silverlight 5 поддерживает ряд новых возможностей при работе с классом Typography в элементе управления TextBlock. Поскольку этих усовершенствований очень много, лучше всего проанализировать класс целиком. Мы рассмотрим две новых возможности.

  1. ContextualAlternates — позволяет извлекать и устанавливать значение, определяющее, можно ли использовать пользовательские формы глифов, на основании контекста отображаемого шрифта.
  2. StylisticSet — позволяет извлекать и устанавливать значение, показывающее, можно ли использовать стилистический набор формы шрифта (доступны 20 наборов StylisticSet).

Давайте рассмотрим пример, использующий ContextualAlternates и StylisticSet.

Соответствующий код выглядит следующим образом.

          <TextBlock FontSize="80"
            FontFamily="Gabriola" 
            Text="Michael Crump"                   
            Typography.ContextualAlternates="True"
            Typography.StylisticSet5="True" />

Текст с привязкой пикселей и свойство TextOptions

Silverlight 5 поддерживает ряд новых возможностей при работе со свойством TextOptions в элементе управления TextBlock.

  1. TextFormattingMode — позволяет определить значениеTextFormattingMode для элемента.
  2. TextHintingMode — извлекает и устанавливает значение, показывающее, оптимизировано ли отображение текста для удобства чтения или для анимации.
  3. TextRenderingMode — устанавливает параметр TextRenderingMode для элемента. Доступны следующие значения: Aliased, Auto, ClearType и Grayscale.

Давайте рассмотрим пример, в котором эти значения используются вместе (Display, Fixed и Aliased). Поскольку в демонстрационном примере это может быть незаметно, попробуйте добавить подобный код в ваше приложение.

Соответствующий код выглядит следующим образом.

          <TextBlock FontSize="30" Text="The quick brown fox jumps over the lazy dog"
                 TextOptions.TextFormattingMode="Display"
                 TextOptions.TextHintingMode="Fixed"
                 TextOptions.TextRenderingMode="Aliased" />

Заключение

На этом уроке мы научились использовать в приложениях Silverlight 5 трекинг и сдвиг текста, связанный и многоколоночный текст, шрифты OpenType, текст с привязкой пикселей и свойство TextOptions и рассмотрели еще несколько возможностей Silverlight 5. На следующем уроке я расскажу о новых возможностях интеграции с операционной системой: службах платформенных вызовов (P/Invoke), использовании нескольких окон и неограниченном доступе к файловой системе в режиме полного доверия. Еще раз спасибо за внимание. Встретимся на следующем уроке.

Чтобы обратиться ко мне напрямую, посетите мой блог http://michaelcrump.net/ или мой микроблог в Twitter http://twitter.com/mbcrump.

Перевод статей от Michael Crump.