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:
Related
Apart from using images and dithering the gradient in software (or messing around with pixel shaders that do the dithering for me), what can I do to avoid color banding in monochrome gradients in WPF using .NET 4.6.1?
Related: Is there a way to force WPF to use 16bpc color behind the scenes?
A way I've found was to add the gradient to a container, give it a small negative margin so it spills over a little, add a BlurEffect to the gradient, and then turn on ClipToBounds on the parent container. This way the gradient evens out a bit nicer at the expense of performance.
Depending on your use case, this may not be viable, however.
Example:
<Grid Height="26" Margin="-5,0" ClipToBounds="True">
<Grid Margin="-5">
<Grid.Effect>
<BlurEffect Radius="6" />
</Grid.Effect>
<Grid.Background>
<LinearGradientBrush>
<GradientStop x:Name="GradientStop7" Color="Magenta" Offset="0.0" />
<GradientStop x:Name="GradientStop8" Color="DarkOrchid" Offset=".2" />
<GradientStop x:Name="GradientStop9" Color="Purple" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
The negative gradient should be equal to the blur radius so that it doesn't become transparent on the edges.
I want to know that, How offset works in WPF in GradientStop
<Grid.Background>
<LinearGradientBrush>
<GradientStopCollection>
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="Red" Offset="1" />
</GradientStopCollection>
</LinearGradientBrush>
</Grid.Background>
I'm pretty sure it's the point at which the gradient switches completely over to the next color. So something like:
<Rectangle Width="200" Height="100">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
from 0 to 25% of the rectangle will flow from yellow to red. 25% to 75% of the rectangle will flow from red to blue. From 75% - 100% the rectangle will be blue to lime green.
So in your example, the color will go from black to red, with the colors only being completely black at the start and completely red at the end.
StartPoint has default value 0,0 and EndPoint has default value 1,1. As you have not specified StartPoint and EndPoint, these values are implicitly used. See http://msdn.microsoft.com/en-us/library/system.windows.media.lineargradientbrush(v=vs.110).aspx
Finally, it is important to note that brushes have a BrushMappingMode property which defaults to RelativeToBoundingBox. As you have not specified that, RelativeToBoundingBox is used and offset determines the position of the color between your endpoints. Another option is Absolute, which is where the magnitude of EndPoint-StartPoint starts mattering.
When you specify a gradientstop at offset 0.3 using BrushMappingMode RelativeToBoundingBox, you're specifying the color of the linear gradient 30% between StartPoint and EndPoint.
I'm getting unwanted behavior from a TextBlock I'm using in my DataTemplate. It seems that the LinearGradientBrush that I'm using for the Foreground property is not drawing the gradient consistantly across the font for words that contain "descenders" like the lower-case 'p' in the word Vampire in the example picture.
I tried setting the LineHeight to the same as the FontSize; no change.
I tried setting the Height of the TextBlock; no change to the color, but added height to the bottom of the TextBlock.
Has anyone else dealt with this and found a solution before? I tried searching Google and StackOverflow for answers but I've come up with nothing so far.
Edit: The problem is the gradient is not applied the same to each textbox, because the descenders increase the height of the font. Look at the difference between the lower-case 'a' in the words Vampire and Brave, and you will see what I mean.
TextBlock XAML
<TextBlock Text="{Binding Title}" FontWeight="Bold" FontStyle="Italic"
FontSize="20" Padding="3" LineHeight="20">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStopCollection>
<GradientStop Color="White" Offset="0.2"/>
<GradientStop Color="AliceBlue" Offset="0.4"/>
<GradientStop Color="#6AB0EE" Offset="0.6"/>
<GradientStop Color="DarkOrange" Offset="0.8"/>
</GradientStopCollection>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
Try to set MappingMode property like this:
<LinearGradientBrush MappingMode="Absolute" StartPoint="0,0" EndPoint="0,1" >
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.
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