2009-09-11 5 views
14

J'essaie de tracer une ligne avec des bords souples, quelle que soit la pente.Comment puis-je dessiner une ligne "douce" dans WPF (probablement en utilisant un LinearGradientBrush)?

Voici le code que j'ai jusqu'à présent:

<Line HorizontalAlignment="Stretch" VerticalAlignment="Center" 
     Stretch="Uniform" StrokeThickness="5" X1="0" Y1="0" X2="1" Y2="0"> 
    <Shape.Stroke> 
     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
      <GradientStop Color="Transparent" Offset="0" /> 
      <GradientStop Color="Green" Offset="0.5" /> 
      <GradientStop Color="Transparent" Offset="1" /> 
     </LinearGradientBrush> 
    </Shape.Stroke> 
</Line> 

Cela me semble logique, puisque la ligne est horizontale, et le gradient linéaire est vertical, les bords étant transparent et le milieu de la ligne étant vert solide.

Le résultat est agréable:
http://img15.imageshack.us/img15/4108/horizontalsoftline.png
zoomé afin que vous puissiez voir le gradient:
http://img225.imageshack.us/img225/5027/horizontalsoftlinezoomeb.png

Cependant, lorsque la ligne n'est plus horizontale, le gradient est calculé sur la base du rectangle de délimitation de la ligne plutôt que sur la géométrie de la ligne elle-même. Le résultat est une ligne oblique qui est ombrée verticalement, au lieu du gradient étant perpendiculaire à la ligne:
http://img183.imageshack.us/img183/7250/slantedsoftline.png

Est-ce que quelqu'un sait comment gère WPF bords souples? Je ne trouve rien sur Google ou MSDN, et je sais qu'il y a un moyen de le faire quelque part ...

+0

Bonne question. J'ai essayé de comprendre comment faire des frontières avec des lignes comme ça. J'ai le sentiment que les réponses seront liées. –

Répondre

5

Eh bien, je ne sais pas si cela est applicable à votre scénario, mais vous pouvez simplement faire pivoter la ligne horizontale en utilisant LayoutTransform et le dégradé sera correct.

<Line HorizontalAlignment="Stretch" VerticalAlignment="Center" 
    Stretch="Uniform" StrokeThickness="5" X1="0" Y1="0" X2="1" Y2="0"> 
<Shape.Stroke> 
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
     <GradientStop Color="Transparent" Offset="0" /> 
     <GradientStop Color="Green" Offset="0.5" /> 
     <GradientStop Color="Transparent" Offset="1" /> 
    </LinearGradientBrush> 
</Shape.Stroke> 
    <Line.LayoutTransform> 
     <RotateTransform Angle="40"/> 
    </Line.LayoutTransform> 

+0

Hmm, c'est une solution de contournement acceptable ... Je préfère ne pas le faire, parce que cette solution a le potentiel de gâcher mon système de coordonnées mathématiques - mais cela semble être un très petit prix à payer si le résultat est OK . Je devrais ajouter que j'utilise RenderTransform, au lieu de LayoutTransform. Je suppose que LayoutTransform produirait les mêmes résultats, mais je ne l'ai pas testé. – Giffyguy

2

Essayez d'utiliser une forme au lieu d'une ligne

<Path Data="M0,0 L25,25 z" Fill="#FFF4F4F5" StrokeThickness="5" Canvas.Left="122" Canvas.Top="58"> 
<Path.Stroke> 
    <LinearGradientBrush EndPoint="1.135,0.994" StartPoint="-0.177,-0.077"> 
     <GradientStop Color="Black"/> 
     <GradientStop Color="#FF68A8FF" Offset="1"/> 
    </LinearGradientBrush> 
</Path.Stroke> 

Tomer

0

Vous pouvez empiler beaucoup de chemins avec l'épaisseur et la diminution des teintes de couleur , en tirant l'un sur l'autre.

Pour tous les chemins d'accès ayant la même géométrie, vous devez utiliser la liaison d'élément à la propriété Data de l'un d'entre eux. Il est très probable qu'un code-behind serait utile pour générer dynamiquement les chemins et les dégradés de couleurs, si nécessaire.

Questions connexes