4- Graphiques

Les outils graphiques en WPF sont nombreux, on va les étudier un par un, sans tarder commençons par le premier :

  • Bitmap Effects :

Ils permettent d’appliquer des efets visuels simples sur le contenu d’une application WPF comme par exemple le flou ou l’ombre. Les effets Bitmap traite les pixels simples et nécessite un Bitmap surce et donne un autre Bitmap Source. Chaque effet Bitmap possède nombreux propriétés.

Les effets Bitmap sont :

    • BlurBitmapEffect
    • OuterGlowBitmapEffect
    • DropShadowBitmapEffect
    • BevelBitmapEffect
    • EmbossBitmapEffect

Pour appliquer un effect Bitmap sur un élément de l’interface graphique, par exemple bitmapeffect1 un bouton, on procède de la manière suivante et si on veut appliquer plus qu’un effet, on rajoute l’instruction suivante : <BitmapEffectGroup> :

<Grid>
        <Button Height=”50″ Margin=”133,36,45,0″ VerticalAlignment=”Top”>
            <Button.BitmapEffect>
                <BlurBitmapEffect Radius=”5″ KernelType=”Gaussian”/>
            </Button.BitmapEffect>
        </Button>
        <Button Margin=”133,106,45,106″>
            <Button.BitmapEffect>
                <BitmapEffectGroup>
                    <OuterGlowBitmapEffect GlowColor=”BurlyWood”/>
                    <BevelBitmapEffect BevelWidth=”9″ />
                </BitmapEffectGroup>
            </Button.BitmapEffect>
        </Button>
        <TextBlock Height=”21″ HorizontalAlignment=”Left” Margin=”11,50,0,0″ Name=”textBlock1″ VerticalAlignment=”Top” Width=”120″>Un seul effet Bitmap</TextBlock>
        <TextBlock Margin=”11,120,0,121″ Name=”textBlock2″ HorizontalAlignment=”Left” Width=”120″>Deux effets Bitmap</TextBlock>
    </Grid>

  • Pinceaux :

Les pinceaux permettent d’appliquer des effets visuels plus aboutis. Les différents types de pinceaux sont :

    • SolidColorBrush
    • LinearGradientBrush
    • RadialGradientBrush
    • ImageBrush
    • DrawingBrush
    • VisualBrush

 

  • SolidColorBrush  – LinearGradientBrush – RadialGradientBrush  – ImageBrush :

On résume ces quatres pinceaux dans ce code, le résultat est illustré dans la figure jointe :pinceaux1

<Grid>
        <Rectangle Height=”50″ Width=”50″ HorizontalAlignment=”Left” Margin=”43,36,0,0″ VerticalAlignment=”Top”>
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Color=”White”  Offset=”0.0″/>
                    <GradientStop Color=”Red” Offset=”0.5″/>
                    <GradientStop Color=”Bisque”  Offset=”1.0″/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Height=”50″ Width=”50″ HorizontalAlignment=”Right” Margin=”0,36,55,0″ VerticalAlignment=”Top”>
            <Rectangle.Fill>
                <SolidColorBrush Color=”Red”/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Width=”50″ HorizontalAlignment=”Left” Margin=”43,120,0,92″>
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Color=”Red” Offset=”0.0″/>
                    <GradientStop Color=”Linen”  Offset=”0.5″/>
                    <GradientStop Color=”Beige”  Offset=”1.1″/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Width=”50″ HorizontalAlignment=”Right” Margin=”0,120,55,92″>
            <Rectangle.Fill>
                <ImageBrush ImageSource=”naruto.jpg”/>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock Height=”23″ Margin=”21,10,0,0″ Name=”textBlock1″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Width=”97″>LinearGradientBrush</TextBlock>
        <TextBlock Height=”23″ Margin=”21,95,0,0″ Name=”textBlock2″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Width=”97″>RadialGradientBrush</TextBlock>
        <TextBlock Height=”23″ Margin=”0,10,21,0″ Name=”textBlock3″ VerticalAlignment=”Top” HorizontalAlignment=”Right” Width=”97″>SolidColorBrush</TextBlock>
        <TextBlock Height=”23″ Margin=”0,95,26,0″ Name=”textBlock4″ VerticalAlignment=”Top” HorizontalAlignment=”Right” Width=”83″>ImageBrush</TextBlock>
    </Grid>

  • - Les masques d’opacité :

Un masque d’opacité consiste à rendre une partie graphiqe trasparente partiellement ou totalement. Pour créer un masque d’opacité ( OpacityMask, on crée d’abord un Brush( Instaciation de la classe Brush ), puis on applique la propriété OpacityMask. Le masque peut etre n’importe quel type de Brush( ImageBrus, LinearGradientBrush… ). Il manque tout de meme une chose, il faut définir deux point, un point de départ ( StartPoint ) et un point d’arrivée ( EndPoint ) ainsi que la couleur qui peut etre simple ou créé avec avec un pinceau. Voici un exemple simple pour mieux assimiler :

<Grid>
<Image Margin=”43,17,35,95″ Name=”image1″ Stretch=”Fill” Source=”bizerte.jpg”>
<Image.OpacityMask>
<RadialGradientBrush>
<GradientStop Color=”White” Offset=”0.0″/>
<GradientStop Color=”Transparent” Offset=”1.1″/>
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
</Grid>

On peut aussi utiliser une image comme masque d’opacité, dans ce cas là il faut que cette image ait un format qui supporte plusieurs niveaux de transparence tel que le format PNG, sinon le reste n’est pas très différent de l’exemple précédent.

<Grid>
<Image Margin=”40,16,38,96″ Name=”image1″ Stretch=”Fill” Source=”fond.jpg”>
<Image.OpacityMask>
<ImageBrush ImageSource=”religion.png”/>
</Image.OpacityMask>
</Image>
</Grid>

Application :

On va essayer de résumer ce q’on a appris dans ce cours et les cours précédents dans uen petite application toute sympa, cet application doit afficher le CV d’une personne quand on clique sur sa photo.

Alors on commance tout d’abord par ouvrir un nouveau projet et d’aller sur l’editeur XAML, on rajoute tout d’abord un TextBlock et deux boutons dans un Layout due type Grid ( une grille ), c’est un choix personnel, vous pouvez utilisez le StackPanel par exemple. Je place mes deux boutons et mon TextBlock grace aux propriétés de Grid.

Ensuite, je glisse les deux photos des deux personnes ayant les CV dans le projet. C’est fait ! Alors, on doit placer ces deux photos sur les deux boutons de telle façon que les boutons soit remplis les photos ( propriété Stretch , valeur Fill ).

<Grid.ColumnDefinitions>
            <ColumnDefinition Width=”93*” />
            <ColumnDefinition Width=”92.872*” />
            <ColumnDefinition Width=”92.239*” />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=”201*” />
            <RowDefinition Height=”201*” />
            <RowDefinition Height=”201*” />
        </Grid.RowDefinitions>
        <TextBlock FontSize=”14″ TextWrapping=”Wrap” Foreground=”Black”  Name=”texblock1″ Grid.ColumnSpan=”2″ Grid.RowSpan=”3″ >
            <TextBlock.Background>
                <RadialGradientBrush>
                    <GradientStop Color=”DarkSalmon”  Offset=”0.0″/>
                    <GradientStop Color=”Bisque” Offset=”1.1″/>
                </RadialGradientBrush>
            </TextBlock.Background>
        </TextBlock>
        <Button Name=”bouton1″ Opacity=”0.5″ Grid.Column=”2″ Click=”bouton1_Click_1″ Margin=”0,0.333,0,0″>
            <Button.Content>
                <Image Source=”imed.jpg” Stretch=”Uniform”  Width=”160″ Height=”193″  />
            </Button.Content>
        </Button>
        <Button Name=”bouton2″ Opacity=”0.5″ Grid.Column=”2″ Click=”bouton2_Click” Margin=”0,0,0,200″ Grid.RowSpan=”2″ Grid.Row=”1″>
            <Button.Content>
                <Image Source=”kaoutar.jpg” Stretch=”Uniform”  Width=”160″ Height=”193″ />
            </Button.Content>
        </Button>
        <Image Grid.Column=”2″ Grid.Row=”2″ Margin=”4,44,4,55″ Name=”image1″ Stretch=”Fill” Source=”ensisa.jpg” />

Maintenant, on va dire aux boutons que quand un des deux est cliquée, il doit afficher le texte du CV dans le TextBlock. Pour cela, double-clic sur le premier bouton, on passe alors au code C#, dans la méthode qui gère l’événement click ( dans notre cas, cette méthode s’appelle bouton1_Click_1 ), on rajoute l’instruction suivante qui attribue au texte du TextBlock, le message qu’on veut, qui est le CV.

private void bouton1_Click_1(object sender, RoutedEventArgs e)
        {
            texblock1.Text = “NOM : TALBI \n Prénom : Imededdine \n Origine : Tunisie …”;
        }

On fait de meme pour le bouton 2 :

private void bouton2_Click(object sender, RoutedEventArgs e)
        {
            texblock1.Text = “NOM: ZAHI \n Prénom : Kaoutar \n Origine : Maroc …”;
        }

Une fois que c’est fait, compilez le programme et vérifiez que ça marche, dans notre exemple que vous pouvez téléchargez dans le section Ressources, vous allez remarquez que nous avons travailler légérement sur la forme de l’application , par exemple, l’arrière-plan ( Background) du TextBlock est peint avec un pinceau RadialGradientBrush.


Laisser un commentaire