WPF: RadialGradientBrush without gradient? - wpf

I want to draw some circles in another circle like this:
alt text http://img38.imageshack.us/img38/6379/circles.png
Is there a way to tell a RadialGradientBrush not to use gradients but just fixed colors, so I can achieve this? Thanks for any hint!
(I guess this could be easily done using a DrawingBrush, I'm just wondering whether this could also be done using a RadialGradientBrush)

If you really, really want to do this, you can repeat the colors that you want at the offsets that you want.
For example:
<RadialGradientBrush>
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="0.25" Color="Black" />
<GradientStop Offset="0.25" Color="Red" />
<GradientStop Offset="0.75" Color="Red" />
<GradientStop Offset="0.75" Color="Salmon" />
<GradientStop Offset="1" Color="Salmon" />
</RadialGradientBrush>
That way, it will fill Black to Black from 0 to 0.25, Red to Red from 0.25 to 0.75, and Salmon to Salmon from 0.75 to 1.0.
Since the offsets match, there is no "room" for the Gradient to blend.

If you are trying to make a "bullseye" of absolute sizes, consider overlaying Ellipses in a grid instead of trying to use a brush.
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Ellipse}">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
</Grid.Resources>
<Ellipse Width="100"
Height="100"
Fill="Salmon" />
<Ellipse Width="50"
Height="50"
Fill="Red" />
<Ellipse Width="25"
Height="25"
Fill="Black" />
</Grid>
Since they are all in the same grid (column and row are both 0 by default, but you could set them), and have their horizontal and vertical alignments set to stretch, they will simply overlap. Be sure to put the biggest one first, of course.

Related

Creating button with specific geometry XAML

Please can anyone suggest a solution of my problem.
Most "custom buttons" on different tutorials based on standard geometry forms (triangle, rectangle, circle etc.) anŠ² changed only their appearance.
I trying to create button with specific geometry and changed it on mouse event.
what I have:
I created style where diskribe
I created a polygon in the form of a rectangle with rounded corners (this is important)
I created style where described my custom button, and in main window i added the Style attribute:
<Button Width="40" Margin="5,0,5,-15" DockPanel.Dock="Right" HorizontalAlignment="Right" Background="{x:Null}" BorderBrush="{x:Null}" Height="40" Style="{StaticResource ResourceKey=PLCButtonStyle}"/>
this is how i described geometry:
</Style.Resources>
<Setter Property="Cursor" Value="Hand"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}" >
<Grid>
<MAIN:RoundedCornersPolygon Name="Border" Points="0,0 75,0 75,15 75,30 0,30 "Stretch="Fill"
StrokeThickness="1" ArcRoundness="5" UseRoundnessPercentage="False" Stroke="Black" IsClosed="True
<MAIN:RoundedCornersPolygon.Fill>
<RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3" >
<GradientStop Color="lightgray" Offset="0" />
<GradientStop Color="black" Offset="1" />
</RadialGradientBrush>
</MAIN:RoundedCornersPolygon.Fill>
</SCADA:RoundedCornersPolygon>
I need to animate the transition of certain points of the polygon from one coordinate to another.
from Points="0,0 75,0 75,15 75,30 0,30 "
to Points="0,0 60,0 75,15 60,30 0,30 "
what i need to do for this?

WPF Progress Bar in different colors

I am having a alarm status. I want to reflect the alarm status on the progress bar with the help of colors.
If an operator has handled the alarm till 30% status, so Progress Bar will show the 30% color and if Operator has handled till 60%. So Progress Bar will show the first 30% in red color and then next 30% in blue color.
I am setting the value of the progress bar to 30 and getting green color. My question is when i want to set it to 60% it will show green for first 30% and red for next.
Below is the example for you. Set MyProgressBarStyle for the ProgressBar. I have set the background of the progress bar as 30% red, 30% Green and 30% Blue using LinearGradientBrush. And reversed the PART_Indicator. So you need to use SetMyProgressBarValue function to set the percentage value for the ProgressBar. Try it its working for me.
XAML
<Grid Background="Gray">
<Grid.Resources>
<Style x:Key="MyProgressBarStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="200">
<Border Name="PART_Track" CornerRadius="2" BorderBrush="Transparent" BorderThickness="1" >
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.GradientStops>
<GradientStop Color="red" Offset="0" ></GradientStop>
<GradientStop Color="red" Offset="0.3" ></GradientStop>
<GradientStop Color="Green" Offset=".3" ></GradientStop>
<GradientStop Color="Green" Offset=".3" ></GradientStop>
<GradientStop Color="Green" Offset=".6" ></GradientStop>
<GradientStop Color="Blue" Offset=".6" ></GradientStop>
<GradientStop Color="Blue" Offset="1" ></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border
Name="PART_Indicator"
CornerRadius="2"
Background="Gray"
BorderBrush="Transparent"
BorderThickness="1"
HorizontalAlignment="Right" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ProgressBar x:Name="MyProgressBar" Style="{StaticResource MyProgressBarStyle}" Minimum="0" Maximum="100" Height="80" Value="20"></ProgressBar>
</Grid>
Function to set percentage value for MyProgressBar
public void SetMyProgressBarValue(Double percentageValue)
{
MyProgressBar.Value = 100 - percentageValue;
}

Creating a block of text with Silverlight

All i am trying to do create rectangles with radial corners and content within them. Content can be any image, textual data or multimedia something like http://www.spicynodes.org/. so
How do I create that rectangle ( can i have xaml markup)
Can i have arrows from one rectangle to another if so how?
the nearest I got to was below but unable to add text data
<Grid Name="containerPanel" Width="800" Height="500" Background="AntiqueWhite" VerticalAlignment="Center" HorizontalAlignment="Center">
<Rectangle Name="centerNode" Width="300" Height="150" RadiusX="12" RadiusY="12" VerticalAlignment="Center">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="3" BlurRadius="2" Color="Black"></DropShadowEffect>
</Rectangle.Effect>
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Gray" Offset="0.1"></GradientStop>
<GradientStop Color="Beige" Offset="0.2"></GradientStop>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.StrokeThickness>
2
</Rectangle.StrokeThickness>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="AliceBlue" Offset="0.4" />
<GradientStop Color="White" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Instead of using a Rectangle, you might want to use a container control. Assuming the content of your will consist of one element (i.e.: Either an image, either a textblock, either a ....), the first thing that comes to mind would be to use a Border, which will accept exactly one child element as its content:
<Border Width="300" Height="200" BorderBrush="Green" BorderThickness="5" CornerRadius="10">
<Border.Effect>
<DropShadowEffect ShadowDepth="5"/>
</Border.Effect>
<TextBlock Text="Inside the bounding box" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
As for the arrows going from one box to another:
Of course it's possible, but you will have to "connect" them manually. There's no out-of-the-box "connect and draw an arrow between these two elements" functionality.
Why not use a container like another grid, style it as you prefer, then add an image or textblock element inside it instead of a rectangle?

Vignette effect without coding

Is there any method exist to create vignetting/frame effect on picturebox, ie another picturebox with png image as overlay/mask? I don't want to see sharp edges between picture and background.
You could use OpacityMask : something like
<Image Width="200" Source="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg">
<Image.OpacityMask>
<RadialGradientBrush>
<GradientStop Offset="0.8" Color="#ffff"></GradientStop>
<GradientStop Offset="1" Color="#0fff"></GradientStop>
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
would give a vignette effect.

Fixed gradient with a moving rectangle?

I have a WPF 'monitor widget' that displays CPU, RAM and disk performance as small percentage bars. I use the following gradient as a resource to divide the bars into 4 sections (ie. 0% - 25%, 25% - 50%, etc.)
<LinearGradientBrush x:Key="Quarters" StartPoint="0,0" EndPoint="0,15" MappingMode="Absolute">
<GradientStop Color="LightGreen" Offset="0.0" />
<GradientStop Color="LightGreen" Offset="0.24" />
<GradientStop Color="Yellow" Offset="0.25" />
<GradientStop Color="Yellow" Offset="0.49" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Orange" Offset="0.74" />
<GradientStop Color="Red" Offset="0.75" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
Originally, the bars' 0% position was at the top (bar.Height = 0) and 100% was at the bottom (bar.Height = 15). The bar size would change by simply adjusting its Height property. Everything worked fine, but I would prefer the bars' 0% position to be at the bottom instead, ie. the bars will 'grow' upward.
Making the bars grow upward was no problem, but the problem I do have is that the gradient now moves with the rectangle, so that the top of the rectangle is always green, no matter how small it is. I understand that this is because I am now using Canvas.SetTop to move the top of the rectangles (bars) as well as change their height. How can I force the gradient to an absolute position, regardless of the position of the rectangle?
(background opacity)
Sorry, I know the image is small, but you should just be able to make out that the middle bar starts from the top (green) and grows downward, ending in orange (50% -75% value). The left bar starts at the bottom (this is what I want), but the gradient in this bar moves with the height... this is the problem. Note that I'll reverse the gradient when I can fix this problem, so that red will represent the top 25%. In this example, the bottom quarter should be red, the next quarter orange and the remainder yellow.
I can't believe that there is no simple solution for this... come on brain-boxes. :) How about moving the absolute position of the gradient with the rectangle... is this possible???
(Relating post: Determining a computer's maximum hard drive data transfer rate programmatically with C#)
Update
Clip the rectangle with values set at runtime.
<Window.Resources>
<LinearGradientBrush x:Key="Quarters" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="LightGreen" Offset="0.0" />
<GradientStop Color="LightGreen" Offset="0.24" />
<GradientStop Color="Yellow" Offset="0.25" />
<GradientStop Color="Yellow" Offset="0.49" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Orange" Offset="0.74" />
<GradientStop Color="Red" Offset="0.75" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
</Window.Resources>
<Canvas Height="100">
<Rectangle Fill="{StaticResource Quarters}" Width="30" Height="100" Canvas.Bottom="0" Canvas.Left="0">
<Rectangle.Clip>
<RectangleGeometry x:Name="ClipRect" Rect="0, 100, 30, 100" />
</Rectangle.Clip>
</Rectangle>
</Canvas>
Code:
ClipRect.Rect = new Rect(0, 20, 30, 100); //80%
ClipRect.Rect = new Rect(0, 70, 30, 100); //30%
Original Solution
Use 2 rectangles for each bar.
One rectangle with 100% height and the colored gradient. Then overlay a black rectangle over the first rectangle. Adjust the black rectangles height(as you were before) to expose the gradient below.
eg If the value is 25% set the overlay height to 75%
I solved a similar issue using clipping. Create rectangles for 100% and fill with the brush. Then use clipping to only show part of the rectangle, see sample code below which shows two rectangles:
<Window x:Class="GradientTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<Window.Resources>
<LinearGradientBrush x:Key="Quarters" StartPoint="0,1" EndPoint="0,0">
<GradientStop Color="LightGreen" Offset="0.0" />
<GradientStop Color="Yellow" Offset="0.25" />
<GradientStop Color="Orange" Offset="0.5" />
<GradientStop Color="Red" Offset="0.75" />
</LinearGradientBrush>
</Window.Resources>
<Canvas Height="100">
<!--21%-->
<Rectangle Fill="{StaticResource Quarters}" Width="30" Height="100" Canvas.Bottom="0" Canvas.Left="0">
<Rectangle.Clip>
<RectangleGeometry Rect="0, 79, 30, 100" />
</Rectangle.Clip>
</Rectangle>
<!--68%-->
<Rectangle Fill="{StaticResource Quarters}" Width="30" Height="100" Canvas.Bottom="0" Canvas.Left="40">
<Rectangle.Clip>
<RectangleGeometry Rect="0, 32, 30, 100" />
</Rectangle.Clip>
</Rectangle>
</Canvas>
</Window>
Yes, the 0,0 point of gradient fill's StartPoint/EndPoint always seems to be the top left of the object.
So one way around that is to rotate the object 180 degrees using a RenderTransform.
Then you can just set the height of the rectangle, but the gradient fill will stay anchored to the bottom.

Resources