Comment puis-je appliquer un GradientBrush à plusieurs objets consécutifs dans XAML?

Question

J'ai un TextBlock et une ligne assis côte à côte dans leur propre StackPanel.

J'ai besoin d'étaler mon LinearGradientBrush sur les deux objets, plutôt que de les ombrer individuellement.

Mon projet ressemble actuellement à ceci:

http://img188.imageshack.us/img188/1268/seperategradients.png

<StackPanel Orientation="Horizontal"> 

    <TextBlock VerticalAlignment="Bottom"> 
     SomeTextContent 
     <TextBlock.Foreground> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 
       <GradientStop Offset="0" Color="Blue" /> 
       <GradientStop Offset="1" Color="Orange" /> 
      </LinearGradientBrush> 
     </TextBlock.Foreground> 
    </TextBlock> 

    <Line VerticalAlignment="Bottom" X2="100"> 
     <Line.Stroke> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 
       <GradientStop Offset="0" Color="Blue" /> 
       <GradientStop Offset="1" Color="Orange" /> 
      </LinearGradientBrush> 
     </Line.Stroke> 
    </Line> 

</StackPanel> 

Comme le montre, le gradient est appliqué à TextBlock séparement de la ligne. J'ai besoin de trouver un moyen d'appliquer le dégradé à travers le TextBlock et la ligne en un seul passage - comme s'ils étaient entièrement le même objet. Dans cet exemple, le texte devrait être principalement bleu et la ligne devrait être principalement orange.

Answer 1

Dans WPF, vous pouvez utiliser un pinceau visuel.

Ajouter une ressource de brosse à vos ressources de fenêtre ou de contrôle:

<Window.Resources>  
    <VisualBrush x:Key="stackPanel"> 
    <VisualBrush.Visual> 
     <StackPanel Orientation="Horizontal"> 
     <TextBlock VerticalAlignment="Bottom"> 
      SomeTextContent   
     </TextBlock> 
     <Line VerticalAlignment="Bottom" X2="100" Stroke="black"/>  
     </StackPanel> 
    </VisualBrush.Visual> 
    </VisualBrush> 
</Window.Resources> 

Ensuite, appliquez ce pinceau à la OpacityMask d'un rectange, par exemple:

<Rectangle OpacityMask="{DynamicResource stackPanel}"> 
    <Rectangle.Fill> 
     <LinearGradientBrush EndPoint="1.0,0.5" StartPoint="0,0.5"> 
     <GradientStop Color="Blue" Offset="0"/> 
     <GradientStop Color="Orange" Offset="1"/> 
     </LinearGradientBrush> 
    </Rectangle.Fill> 
    </Rectangle> 

Vous pouvez transformer le texte en un chemin aussi, mais vous perdrez la possibilité de changer le texte que.

Answer 2

Votre problème est que le texte n'est pas un vecteur et ne peut donc pas être combiné avec la ligne (de toute façon que je sache).

Je crois qu'il est possible de changer le texte en un chemin de vecteur dans Expression Blend et ensuite l'utiliser pour créer un chemin de détourage sur le gradient. Ou, en utilisant le tracé du vecteur de texte comme vous le feriez avec votre ligne, utilisez une bordure de hauteur non restreinte et un remplissage transparent sur le vecteur lui-même.

On dirait qu'il y a beaucoup de problèmes à régler. Avez-vous pensé à utiliser une troisième couleur pour fusionner les deux? Par exemple, le bloc de texte s'estompe de Bleu à Orange, puis sur la ligne Orange à la couleur de fond. Vous pourriez être en mesure d'obtenir un effet similaire pour beaucoup moins d'effort.