Accueil > Silverlight, Silverlight 5 > [SL5] : Silverlight 5 Text improvements

[SL5] : Silverlight 5 Text improvements

Nouveauté de silverlight 5 étant de pouvoir manipuler l’espacement des caractères dans les éléments Control, TextBlock, etc.
Ceci est très simple ! il suffit de faire varier la valeur de la propriété CharacterSpacing et LineHeight :

CharacterSpacing

XAML

<UserControl x:Class="Silverlight5Tests.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Slider x:Name="CharacterSpacingSlider"
                Minimum="0"
                Maximum="1000"
                Value="0"
                Margin="5" />
        <TextBlock Text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
                   CharacterSpacing="{Binding Value, ElementName=CharacterSpacingSlider}"
                   Grid.Row="1"
                   TextWrapping="Wrap"
                   Margin="5" />
    </Grid>
</UserControl>

Normal
Silverlight 5 CharacterSpacing

Avec CharacterSpacing
Silverlight 5 CharacterSpacing augmented

LineHeight

La modification du LineHeight permet d’augmenter ou de diminuer l’espacement entre les lignes d’un texte. Pour cela il suffit de faire varier la propriété LineHeight.

Une subtilité supplémentaire est d’utiliser le LineStackingStrategy afin d’indiquer la façon dont le block de texte doit s’afficher : sur le haut de la ligne, sur le bas de la ligne, etc.

XAML

<UserControl x:Class="Silverlight5Tests.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel>
            <TextBlock Text="Character spacing" />
            <Slider x:Name="CharacterSpacingSlider"
                    Minimum="-1000"
                    Maximum="1000"
                    Value="0"
                    Margin="5" />
            <TextBlock Text="Line height" />
            <Slider x:Name="LineHeightSlider"
                    Minimum="0"
                    Maximum="1000"
                    Value="0"
                    Margin="5" />
            <TextBlock Text="Line height strategy" />
            <ComboBox x:Name="LineHeightStrategy"
                      SelectedIndex="0">
                <system:LineStackingStrategy>BaselineToBaseline</system:LineStackingStrategy>
                <system:LineStackingStrategy>BlockLineHeight</system:LineStackingStrategy>
                <system:LineStackingStrategy>MaxHeight</system:LineStackingStrategy>
            </ComboBox>

        </StackPanel>

        <TextBlock Text="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
                   CharacterSpacing="{Binding Value, ElementName=CharacterSpacingSlider}"
                   Grid.Row="1"
                   TextWrapping="Wrap"
                   LineHeight="{Binding Value, ElementName=LineHeightSlider}"
                   LineStackingStrategy="{Binding SelectedItem, ElementName=LineHeightStrategy}"
                   Margin="5" />
    </Grid>
</UserControl>

MaxHeight

silverlight5characterspacinglineheightandstrategy

BlockLineHeight

Silverlight5CharacterSpacingLineHeightAndStrategyBlockLineHeight

RichTextBoxOverflow – Sample 1

Gros manque depuis plusieurs années en Silverlight, à présent corrigé !, est la capacité d’avoir du texte liés et multi-colonnes. Cela permet d’afficher un texte comme dans les journaux ou les magazines !

Dans cet exmple nous allon faire un texte en multicolonne

XAML

<Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <RichTextBox OverflowContentTarget="{Binding ElementName=OverflowBox}"
                     VerticalScrollBarVisibility="Disabled" IsReadOnly="True"
                     HorizontalScrollBarVisibility="Disabled" BorderThickness="0">
            <Paragraph>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
            </Paragraph>
        </RichTextBox>

        <RichTextBoxOverflow x:Name="OverflowBox"
                             VerticalScrollBarVisibility="Disabled"
                             HorizontalScrollBarVisibility="Disabled"
                             BorderThickness="0"
                             Grid.Column="1">

        </RichTextBoxOverflow>
    </Grid>

Resultat

Silverlight5RichTextBoxOverflow

RichTextBoxOverflow – Sample 2

Dans cet exemple, quelque chose de souvent demandé : pouvoir faire un texte flottant tout autour d’une image (comme on peut le faire avec des div en HTML)

XAML


 <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="200" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!--SAMPLE IMAGE-->
        <Image Source="https://slouge.files.wordpress.com/2011/02/83983-silverlight-logo1.jpg"
               Margin="0,0,0,5"
               Stretch="Uniform" />

        <!--INITIAL TEXT-->
        <RichTextBox OverflowContentTarget="{Binding ElementName=OverflowBox}"
                     VerticalScrollBarVisibility="Disabled"
                     IsReadOnly="True"
                     HorizontalScrollBarVisibility="Disabled"
                     BorderThickness="0"
                     Grid.Column="1"
                     Margin="5,0,0,0">
            <Paragraph>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
            </Paragraph>
        </RichTextBox>

        <!--OVERFLOW TEXT-->
        <RichTextBoxOverflow x:Name="OverflowBox"
                             VerticalScrollBarVisibility="Disabled"
                             HorizontalScrollBarVisibility="Disabled"
                             BorderThickness="0"
                             Grid.ColumnSpan="2"
                             Margin="0,-5,0,0"
                             Grid.Row="1" />
    </Grid>

Resultat

Silverlight5RichTextBoxOverflowWithImage

Cela ouvre donc de belles perspective pour le rendu de pages éditoriales en Silverlight 😀

Publicités
Catégories :Silverlight, Silverlight 5
  1. Aucun commentaire pour l’instant.
  1. 16 avril 2011 à 8 h 13

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

%d blogueurs aiment cette page :