How do I apply a GradientBrush to multiple sequential objects in XAML?
I have a TextBlock and a line sitting next to each other in their own exclusive StackPanel.
I need to unfold the LinearGradientBrush across two objects, not shade them separately.
Currently my project looks like this:
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>
As shown, the gradient is applied to the TextBlock separately from the line. I need to find a way to apply the gradient across the TextBlock and Line in one pass - as if they were the same object entirely. In this example, the text should be mostly blue and the line should be mostly orange.
source to share
In WPF, you can use the Visual Brush.
Add a brush resource to the window or manipulate resources:
<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>
Then apply this brush to the opacity mask of the rectangle, for example:
<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>
You can also rotate the text in a path, but you will lose the ability to change the text than.
source to share
Your problem is that the text is not a vector and therefore cannot be merged with a line (in any way that I am aware of).
I believe it is possible to change the text to a vector path in Expression Blend and then use that to create a gradient clipping path. Or, using a vector vector path, as you would with your line, use an unlimited background border and a transparent fill on the vector itself.
It seems like you have a lot of problems. Have you thought about using a third color to merge the two? For example, the text box fades from blue to orange and then on the line orange to the background color. You could get a similar effect for much less effort.
source to share