2009-09-11 3 views
14

Sto cercando di tracciare una linea con bordi morbidi, a prescindere dal pendio.Come posso tracciare una linea "soft" in WPF (presumibilmente utilizzando un LinearGradientBrush)?

Ecco il codice che ho finora:

<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> 

questo senso per me, poiché la linea è orizzontale, e il gradiente lineare è verticale, con i bordi essendo trasparente e mezzo della linea essendo verde fisso.

Il risultato è gradevole:
http://img15.imageshack.us/img15/4108/horizontalsoftline.png
ingrandito in modo da poter vedere il gradiente:
http://img225.imageshack.us/img225/5027/horizontalsoftlinezoomeb.png

Tuttavia, quando la linea non è più orizzontale, il gradiente è calcolato sulla base della linea rettangolo , piuttosto che sulla geometria della linea stessa. Il risultato è una linea obliqua, che è ombreggiata verticalmente, invece del gradiente essendo perpendicolare alla linea:
http://img183.imageshack.us/img183/7250/slantedsoftline.png

Chiunque sa WPF gestisce bordi morbidi? Non riesco a trovare nulla su Google o MSDN e so che c'è un modo per farlo in questo modo ...

+0

Buona domanda. Ho cercato di capire come creare bordi con linee del genere. Ho la sensazione che le risposte saranno correlate. –

risposta

5

Beh, non so se questo è applicabile al tuo scenario ma potresti semplicemente ruotare la linea orizzontale usando LayoutTransform e il gradiente andrà bene.

<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, questa è una soluzione accettabile ... Preferirei non farlo, perché questa soluzione ha il potenziale di rovinare il mio sistema di coordinate matematiche - ma questo sembra un prezzo piuttosto basso da pagare alla fine se il risultato è OK . Vorrei aggiungere che sto usando RenderTransform, invece di LayoutTransform. Presumo LayoutTransform produrrebbe gli stessi risultati, ma non ho provato. – Giffyguy

2

tenta di utilizzare una forma invece di una linea di

<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

È possibile impilare un sacco di percorsi con l'aumento dello spessore e diminuendo le tonalità di colore , disegnandone uno sull'altro.

Per tutti i percorsi per avere la stessa geometria, è necessario utilizzare Collegamento elemento alla proprietà di uno di essi.

Molto probabilmente un po 'di code-behind sarebbe utile per generare i percorsi e sfumature di colore in modo dinamico, se necessario.