среда, 4 мая 2011, bobasoft

Silverlight 5 привнес много новых возможностей, иногда это и мелочи но приятно. Речь идет о новом контроле RichTextBoxOverflow, который упрощает создание газетного расположения текста в Silverlight приложениях. Это может быть не настолько круто, как API 3D графики, но RichTextBoxOverflow поможет создать читалки новостей, журналов, книг или другого контента - путем равномерного расположения текста в колонках в зависимости от размера текста и его контейнера.

Чтобы это продемонстрировать, я создал простой пример который можете скачать и попробовать сами (если конечно у вас установлено Silverlight 5 beta). При запуске будет следующие:

Теперь возьмите слайдер, который находиться прямо под текстом, и передвиньте его вправо. Размер текста будет увеличиваться и автоматически переходить из колонки 1 в колонку 2.

Дальше, используя нижний слайдер, измените отступы между символами (это тоже новая фишка в Silverlight 5):

Изменение отступа между символами приводит к тому, что текст переходит между колонками, так как изменяется объем текста. Вы также можете изменить расположение текста, изменив размер окна браузера.

Все это очень сложно сделать в Silerlight 4, но в Silverlight 5 это легко и просто.

То как это работает? Как можно отобразить и расположить текст по колонкам? Вот разметка из MainPage.xaml:

    <RichTextBox x:Name="Column1"
      OverflowContentTarget="{Binding ElementName=Column2}"
      FontFamily="Georgia" FontSize="{Binding Value, ElementName=FontSizeSlider}"
      CharacterSpacing="{Binding Value, ElementName=CharacterSpacingSlider}">
        .
        .
        .
    </RichTextBox>

    <RichTextBoxOverflow x:Name="Column2" />

Сначала мы объявляем RichTextBox контрол с именем column1. Дальше добавляем RichTextBoxOverflow контрол с именем column2 и соединяем их, указав контрол RichTextBoxOverflow в свойстве OverflowContentTarget контрола RichTextBox. Теперь любой текст, который не влез в RichTextBox контрол, будет автоматически переходить в RichTextBoxOverflow. Если вы хотите добавить третью колонку, нужно просто добавить еще один RichTextBoxOverflow контрол и привязать его к первому RichTextBoxOverflow используя все тоже свойство OverflowContentTarget.

Для отступа между символами нужно использовать свойство CharacterSpacing. В этом примере, я просто привязал свойство CharacterSpacing контрола RichTextBox к слайдеру (Slider), также как и привязал FontSize. Заметьте, что я не устанавливал FontFamily, FontSize и другие текстовые свойства для RichTextBoxOverflow, потому-что эти свойства переходят с RichTextBox также как и текст.

Сложно представить, что может быть еще проще. Интересно будет увидеть как разработчики будут использовать эти возможности для улучшения интерфейса.

---