Develop Reference

How to add more than 3 GradientStop in RadialGradientBrush

I have a RadialGradientBrush Tag applied to a Path.Stroke and the Path.Data is a Circle
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Blue" Offset="1"/>
<GradientStop Color="Green" Offset="2"/>
</RadialGradientBrush>
But both Visual Studio designer and Application only show 2 RadientStop. I guess the gradient is too small but I change the Property RadiusX and RadiusY to a small number but I still don't get the result.

Scale ItemsControl Rectangle based on Grid width

EDIT:
I had hex value(string) that i converted to a Brush hence it did not take my color the following like takes my colors succesfully:
(Color)ColorConverter.ConvertFromString(colorArray[0])
The only problem remaining is the scaling (with colors).
My color bars seem to be transparent (once again) but now with the proper color attached to each bar. Also at start up of my program all the 6 bars displayed (but they should not get displayed because it has no value yet).
Code:
<Border Height="30" Margin="15" Grid.RowSpan="6" >
<Border.Background>
<LinearGradientBrush StartPoint="0.0,0" EndPoint="1.0,0">
<GradientStopCollection>
<GradientStop Offset="0.0" Color="{Binding FillBar, UpdateSourceTrigger=PropertyChanged}" />
<GradientStop Offset="{Binding Value, UpdateSourceTrigger=PropertyChanged}" />
</GradientStopCollection>
</LinearGradientBrush>
</Border.Background>
</Border>
How exactly do i get rid of the transparent color fading at the middle/end of the bar?
When i try adding the same color to the second Offset i am getting Full length bars (100%) and the scaling is nullified again.
On a sudden there is also a left empty part of the control. When the control is not turned 180 degrees this behavior is not happening at all!
I have a ItemsControl that uses a DataTemplate so the items get shown as rectangles.
The itemsControl is also turned around so the rectangles show in the right direction.
<DataTemplate x:Key="GrafiekItemTemplate">
<Border Width="Auto" Height="Auto">
<Grid>
<Rectangle StrokeThickness="0" Height="30"
Margin="15"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Width="{Binding Value, UpdateSourceTrigger=PropertyChanged}"
Fill="{Binding Fill, UpdateSourceTrigger=PropertyChanged}">
<Rectangle.LayoutTransform>
<ScaleTransform ScaleX="20" />
</Rectangle.LayoutTransform>
</Rectangle>
</Grid>
</Border>
</DataTemplate>
<ItemsControl x:Name="icGrafiek"
Margin="-484,3,0,0"
ItemsSource="{Binding Source={StaticResource Grafiek}}"
ItemTemplate="{DynamicResource GrafiekItemTemplate}"
RenderTransformOrigin="1,0.5" Grid.RowSpan="6">
<ItemsControl.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1" ScaleX="1"/>
<SkewTransform AngleY="0" AngleX="0"/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</ItemsControl.RenderTransform>
</ItemsControl>
The binding Fill give the size of those bars (rectangles).
The itemsControl itself is placed inside a Grid with 2 columns and 6 rows.
I have set the control its rowspan to 6 and the columnspan to 1.
What i want to achieve:
The largest value of the itemsControl should take the entire length of the second column of the grid. Currently i am doing some calculations (this returns a list with values) to pass to the Fill binding and i multiply this result by for example 100 or 1000. But that is hard coded which i want to avoid.
How can i make sure these lengths are dynamically instead of filling them up with a value that i multiply with 2000 to fill my screen. For example the size of a 2nd column in a Grid.
I also have Blend available to work with the layout of this.

1) don't use rectangle, a Border is enough (Borders have a fill), and Borders have content.
2) use normalized value in your binding NValue = Value/MaxValue (between 0.0 and 1.0)
3) you can achieve what you want in two ways :
1) with a grid in your DataTemplate with two columns.
The first Column Width is bound to NormalizedValue (unit is stars (*)) and the other one
to (1-NormalizedValue) (unit is stars also (*)).
Have your ViewModel return you SWNVAlue = NValue as a star width (new GridLength(NValue,GridUnitType.Star)) or write a converter to have a star width from a double.
2) with a Border filling all the space, and a gradientBrush that stop at normalized Value :
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1.0,0">
<GradientStopCollection>
<GradientStop Offset="0.0" Color="#fff" />
<GradientStop Offset="{Binding NormalizedValue}" Color="#fff" />
<GradientStop Offset="{Binding NormalizedValue}" Color="#000" />
<GradientStop Offset="1" Color="#000" />
</GradientStopCollection>
</LinearGradientBrush>
</Border.Background>
(example makes white rectangles on a blak background.)
4) you don't need to rotate/flip. Use (1-NValue) instead of NValue, or left align, or...
but you don't need to :=)
Edit : if you need to have your 'rectangles' all aligned on the right, and starting
at a different X, for example with the GradientStopCollection way, just use (1-NormalizedValue)
and swap colors :
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1.0,0">
<GradientStopCollection>
<GradientStop Offset="0.0" Color="#000" />
<GradientStop Offset="{Binding OneMinusNormalizedValue}" Color="#000" />
<GradientStop Offset="{Binding OneMinusNormalizedValue}" Color="#fff" />
<GradientStop Offset="1" Color="#fff" />
</GradientStopCollection>
</LinearGradientBrush>
</Border.Background>
in fact same goes for the grid solution.

WPF: How to set offset to PolyLine

I have 3 PolyLines that have same geometry.
I would like to set offset to two of them, so they would appear right next to each other.
How can i do that?
thanx.

That depends on the container you are using. If you use Grid (with no rows or colums) or canvas, they are directly on top of each other. You can space them apart by means of Margin (grid) or Left/Top (canvas).
Or use a different Panel, like Stackpanel, that arranges them next to each other automatically.
Edit:
In the comments, we developed the idea of using a LinearGradientBrush to color a single Geometry, like this:
<Polyline StrokeThickness="20" Points="30,250 200,250">
<Polyline.Stroke>
<LinearGradientBrush StartPoint="30,200" EndPoint="30,250" MappingMode="Absolute">
<GradientStop Color="Red" Offset="1" />
<GradientStop Color="Red" Offset="0.66" />
<GradientStop Color="Yellow" Offset="0.66" />
<GradientStop Color="Yellow" Offset="0.33" />
<GradientStop Color="Green" Offset="0.33" />
<GradientStop Color="Green" Offset="0" />
</LinearGradientBrush>
</Polyline.Stroke>

I think I understood your exact need: you wish to draw polylines like on a road map, where multiple lines follow the same path but always keep the same distance between them.
This is a much more complicated problem. There is an excellent article by Key Johnson where he creates geometric visual brushes: Stacked Geometry Brush Factory.
An example of what he manages to do:

Linear Gradient Brush Fade WPF

I have a brush that colors the background of a header. I like the way the brush looks but would like it to fade to transparent in the bottom third. Any ideas how to do this?
<LinearGradientBrush
x:Key="HeaderBackgroundBrush"
EndPoint=".5,1"
StartPoint="1,0">
<GradientStop Color="#006699" Offset="1"/>
<GradientStop Color="#80A8CC" Offset="0.5"/>
</LinearGradientBrush>

I'm not sure you can do it by working only at the brush level, however you could apply an OpacityMask to your control:
<LinearGradientBrush
x:Key="HeaderBackgroundOpacityMask"
StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="0.667"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
...
<Border Background="{StaticResource HeaderBackgroundBrush}"
OpacityMask="{StaticResource HeaderBackgroundOpacityMask}">

just specify the colors as ARGB (including alpha) like this: #AARRGGBB. Then give your last gradient stop an alpha value of 0 (fully transparent; in your case #0080A8CC). HTH.

If you want to do it in C# use the following code. This will give you a light pink/salmon to fully transparent brush. Change the #FF and #00 to get a different transparency gradient.
var startColour = (SolidColorBrush)new BrushConverter().ConvertFrom("#FFff99a8");
var endColour = (SolidColorBrush)new BrushConverter().ConvertFrom("#00ff99a8");
_dirtyColourBackground = new LinearGradientBrush(startColour.Color, endColour.Color,new Point(0,0),new Point(1,0));

Custom Brush - I want two gradients chaining them together

I am making a bar chart and I want two separate gradients for each bar. First I want a gradient to go from top to bottom solid red to transparent red. I want to paint over the top of that a gradient that goes from right to left, black to opaque.
So - In the bottom left we should have;
Bottom left - Alpha 0
Bottom right - Alpha 0
Top left - Alpha 255 Colour Red
Top Right - Alpha 255 Colour Black
So in effect I want to take a solid colour, add a left to right gradient to black then take the output of that and add a top to bottom gradient to transparency.
All this and I want it to be in a single brush, is this even possible?

Yes. Use a VisualBrush whose Visual is a Rectangle inside a Border to combine the other two brushes.
Something like this:
<LinearGradientBrush x:Key="UnderBrush" EndPoint="0,1">
<GradientStop Color="#FFFF0000" Offset="0" />
<GradientStop Color="#00FF0000" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="OverBrush" EndPoint="1,0">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#FF000000" Offset="1" />
</LinearGradientBrush>
<VisualBrush x:Key="CombinedBrush">
<VisualBrush.Visual>
<Border Background="{StaticResource UnderBrush}">
<Rectangle Fill="{StaticResource OverBrush}" Width="1" Height="1" />
</Border>
</VisualBrush.Visual>
</VisualBrush>
CombinedBrush can be used to paint your bars, and you will get the effect you describe.
Silverlight version
Since Silverlight has no VisualBrush you must build a WritableBitmap in code and use it with an ImageBrush:
<ImageBrush x:Key="CombinedBrush">
<my:VisualBrushSimulator.Visual>
<Border Background="{StaticResource UnderBrush}">
<Rectangle Fill="{StaticResource OverBrush}" Width="1" Height="1" />
</Border>
</my:VisualBrushSimulator.Visual>
</ImageBrush>
Here is how the VisualBrushSimulator might be implemented:
public class VisualBrushSimulator : DependencyObject
{
public Visual GetVisual(DependencyObject obj) { return (Visual)obj.GetValue(VisualProperty); }
public void SetVisual(DependencyObject obj, Visual value) { obj.SetValue(VisualProperty, value); }
public static readonly DependencyProperty VisualProperty = DependencyProperty.RegisterAttached("Visual", typeof(Visual), typeof(VisualBrushSimulator), new PropertyMetadata
{
PropertyChangedCallback = (obj, e) =>
{
int width=1000;
int height=1000;
var bitmap = new WritableBitmap(width, height);
bitmap.Render((Visual)e.NewValue, new ScaleTransform { ScaleX = width, ScaleY = height });
((ImageBrush)obj).ImageSource = bitmap;
}
});
}
Note that this is not a true VisualBrush simulation, since changes to the Visual do not affect the brush.

If the template for your bar is based on Grids, you could then overlay the 2 gradients as below. I am not sure I fully understood what you wanted for your 2nd gradient, but I assume you mean left-to-right, transparent black to solid black. If I misunderstood, it is easy to change the 2nd gradient in the XAML below.
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Width="100" Height="300" >
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFF0000" Offset="0" />
<GradientStop Color="#00FF0000" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#FF000000" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
</UserControl>
Paste this XAML into Charles Petzold's XAML Cruncher to see the results.
Good luck,
Jim McCurdy
Face to Face Software and YinYangMoney