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));
Related
I use Telerik component for serial port plot data on chart, I need to know how can i have more space between X-Axis item now x-axis show compressed and i need to know if the plot point increase how can add chart auto scroll,this is my XAML code :
<telerik:RadCartesianChart x:Name="myChart" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid/>
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis IsStepRecalculationOnZoomEnabled="True" LabelOffset="0" LastLabelVisibility="Visible" LineThickness="1" MajorTickOffset="0" MajorTickLength="5" MajorTickInterval="1" PlotMode="BetweenTicks" SmartLabelsMode="None" TickThickness="1" ZIndex="0"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis BorderThickness="0,4,0,0">
<telerik:LinearAxis.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF0E0EF5" Offset="1"/>
</LinearGradientBrush>
</telerik:LinearAxis.BorderBrush>
<telerik:LinearAxis.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFE41F1F" Offset="1"/>
</LinearGradientBrush>
</telerik:LinearAxis.Background>
</telerik:LinearAxis>
</telerik:RadCartesianChart.VerticalAxis>
</telerik:RadCartesianChart>
I was push my project to Github
I found my answer, Add those tag to radCartesianChart root element
ScrollViewer.HorizontalScrollBarVisibility="Auto"
HorizontalZoomRangeStart="0.9"
HorizontalZoomRangeEnd="1"
Complete format :
<telerik:RadCartesianChart
x:Name="myChart"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
HorizontalZoomRangeStart="0.9"
HorizontalZoomRangeEnd="1"
Margin="0,0,445,162">
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.
Is there a way to execute attached behavior last, after initialization of list properties in following example
<LinearGradientBrush local:FreezeBehavior.IsFrozen="True">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
It can be done like this
<GradientStopCollection x:Key="SomeKey">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</GradientStopCollection>
<LinearGradientBrush GradientStops="{StaticResource SomeKey}" local:FreezeBehavior.IsFrozen="True"/>
But it will require to create dozens of unnecessary ResourceDictionary entries.
P.S.: related question (in case someone see this as duplicate, then vote close it instead of this one, here I already know the problem and it's more clearly described).
I guess execution flow is based on XAML Parser, and in parse properties as they appear. So you can try to reorder declarations of properties. Something like this:
<LinearGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
<local:FreezeBehavior.IsFrozen>True</local:FreezeBehavior.IsFrozen>
</LinearGradientBrush>
May be you'll have to use <sys:Bool>True</sys:Bool> as value of FreezeBehavior.IsFrozen
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 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