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
Related
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.
In my WP8 application I want to make a color inversion effect. I have no idea what tools I should use so I'll just explain what I want in a very general terms.
How it is supposed to work: say I have a UserControl that consists of black rectangle and some white text on top of it. I want to apply something to that user control that will invert colors of a part of UserControl that it covers. Some invisible rectangle that spans say 50% of UserControl and in that area background will be white and text will be black. I want it to be dynamic so I can change the area it covers at runtime.
Here's an image to illustrate this:
Inversion effect applied to a half of control.
I believe it's possible to achieve this by using two controls with same text, inverted colors and opacity mask but I wonder if this can be done in a more clean and direct way?
I think what you're looking for ideally would either be two TextBlocks with OpacityMask applied to the one on top like;
<Grid MaxWidth="100">
<TextBlock Text="Hey check it out we can change object gradients! yay!" Foreground="Red"
TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="Hey check it out we can change object gradients! yay!" Foreground="Blue"
TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.OpacityMask>
<LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.322" Color="Black"/>
<GradientStop Offset="0.739" Color="Transparent"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.OpacityMask>
</TextBlock>
</Grid>
Or you could just apply a LinearGradientBrush directly to the Foreground (or Background of other element) itself like;
<Border Width="100" Height="50">
<Border.Background>
<LinearGradientBrush StartPoint="0.062,0.552" EndPoint="0.835,0.548">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.5" Color="White"/>
<GradientStop Offset="0.5" Color="Black"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="White"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Border>
or gettin 80's style fancy;
<Border Width="100" Height="50">
<Border.Background>
<LinearGradientBrush StartPoint="0.472,0.047" EndPoint="0.47,0.942">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.541" Color="White"/>
<GradientStop Offset="0.548" Color="Black"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0.472,0.047" EndPoint="0.47,0.942">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.631" Color="Black"/>
<GradientStop Offset="0.635" Color="White"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Border>
Give that a shot, hope this helps.
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 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));