I am trying to get a ToolStripPanel to have the same drawing style as the embedded ToolStrips, so that it looks like one continuous bar. I have the ToolStrips using the ToolStripProfessionalRenderer so that they are styled the same as the Windows Task Bar.
I have gotten close by creating a new Renderer derived from ToolStripProfessionalRenderer:
class CustomRenderer : ToolStripProfessionalRenderer
{
protected override void OnRenderToolStripPanelBackground(ToolStripPanelRenderEventArgs e)
{
base.OnRenderToolStripPanelBackground(e);
LinearGradientBrush lgb = new LinearGradientBrush(e.ToolStripPanel.ClientRectangle, this.ColorTable.ToolStripGradientBegin, this.ColorTable.ToolStripGradientEnd, LinearGradientMode.Vertical);
e.Graphics.FillPath(lgb, e.ToolStripPanel.ClientRectangle);
}
}
This creates the gradient look with the correct colors, but they do not match up quite right. It seems as if the gradient has a higher number of colors, so the spread is drawn out longer.
I have accounted for the border of the ToolStrips (which is not shown in this code), yet they still don't match up quite right.
Anyone know how to make this happen?
I finally figured this out -- and I seems so obvious now.
The ColorTable in the ToolStripPanelProfessionalRenderer has three colors we are interested in:
ColorTable.ToolStripGradientBegin
ColorTable.ToolStripGradientMiddle
ColorTable.ToolStripGradientEnd
The background needs to be painted in two parts -- the top gradient, and the bottom gradient.
The top goes from the 'Begin' color to the 'Middle' color, and the bottom goes from the 'Middle' color to the 'End' color.
Looks perfect...
Check the color depth of your setup. We had a similar issue on systems that didn't have 32-bit color. Anything less than 32-bit color, resulted in subtle differences. 32-bit color systems looked fine.
We never did find a solution, but maybe you can push the 32-bit color requirement onto your users. ;-)
Related
I've created a custom button control. Basically one button-rectangle, but with two areas inside the rectangle that have a different behavior. For that reason I want to draw the hot and pressed state ONLY for the specific areas, not the hole button.
My current approach is drawing the basic-button using ButtonRenderer.DrawButton(...) with an emtpy text, draw the hot or pressed state if required and finally drawing the text. So far so good, but how do I get the (gradient) colors for the hot/pressed state?
I've tried SystemColors, KnownColors and VisualStyleRenderer.GetColor(ColorProperty.XYZ) but none of them seems to match? How can I read those colors from the host system?
EDIT:
Sample picture below:
I want the colors of both the hot and the pressed button-state - (light) blue in case of this win7 screenshot. If you zoom in you can see that a slight color gradient in both the upper and the lower half is used.
The last button shows what I want to accomplish.
Sure, I could extract the colors from the screenshots and hardcode them or use images like suggested, but that would work only for this specific system, wouldn't it?
Thanks for your answers, Jimi.
According to the accepted answer of your linked SO-question I checked ButtonBaseAdapter and ButtonStandardAdapter. As you also mentioned, ButtonRenderer.DrawButton calls VisualStyleRenderer.DrawBackground which calls the native API UxTheme.DrawThemedBackground to draw the button - the color determination happens inside.
This native API call also draws the button-border and thats the reason why I can't use it.
But I was able to solve my Problem, an unusual way, but it works.
I render both relevant states (hot and pressed) to a bitmap and extract the colors using .GetPixel. In OnPaint I create LinearGradientBrush-instances from the extracted colors and draw the hot/pressed effect over the specific areas of the normal button.
It's not the exact same behavior like a normal button (for both states the border color also changes), but I think it would look really strange if I change the border color only for a part of the button (where the hot/pressed effect is displayed) to match the normal button behavior...
If no other answers or solutions come up I'll mark this post in a few days as an answer...
I'm currently creating a Xamarin.Forms app. One of my pages uses SkiaSharp to allow users to highlight parts of an image in a text marker style (i.e. a yellow brush with low opacity).
This is how the related SKPaint object is defined:
var strokePaint = new SKPaint()
{
Color = Color.FromRgba(255, 255, 0, 100).ToSKColor(),
Style = SKPaintStyle.Stroke,
StrokeWidth = StrokeWidth
};
That's working fine so far, but what bothers me is that the opacity "increases" when I have multiple overlapping paths, until at some point the underlying picture isn't visible anymore.
What could I do to avoid this overlapping? I was thinking about merging all paths into one, but that doesn't seem to work because the user is allowed to change StrokeWidth in between strokes and I didn't see any way of drawing paths with varying width.
I hope any of you guys has some help for me. Any idea is appreciated!
I'm not super familiar with Skia, but I took a look at the documentation for SKPaint, and it looks like it has a BlendMode property. Based on how similar things work in other systems, that should control how colors are combined. You might have to try different values to get the effect you are looking for. Dst, or Modulate look like good candidates. – Bradley Uffner
Thanks for your answer Bradley! I went with the Darken blend mode and set opacity to 255, which creates a very nice effect when highlighting text (only the darker color is visible, so dark text on a light background becomes dark text on a background of my marker color).
I noticed ugly banding issues when using Gradients in WPF, and saw that a solution was to set the "bits per pixel" property to 32.
The thing is that the property seem to be Windows Phone only, ie not working on a program for desktop devices, since trying to add this string in the ApplicationManifest didn't seem to do anything.
Does anyone know if/how I can set this property?
Thank you.
My function which draws the gradients:
public LinearGradientBrush getGradient(Color c1, Color c2, double opacity)
{
LinearGradientBrush gradient = new LinearGradientBrush();
gradient.StartPoint = new Point(0, 0);
gradient.EndPoint = new Point(1, 1);
gradient.GradientStops.Add(new GradientStop(c1, 0.0));
gradient.GradientStops.Add(new GradientStop(c2, 1.0));
gradient.Opacity = opacity;
return gradient;
}
I draw the gradients off of the two most dominant colors in an AlbumCover. You can see the two colors on the top left of the window. I then call the getGradient-function with this:
getGradient(Colors[0], Colors[1], 0.5); // 0.5 is dynamic depending on the brightness of those colors. Tried with 1 opacity but it's still the same.
Here are the sample images (in PNG and uploaded without compression)
Image1
Image2
Image3
As you can see, there is banding going on. There are worse examples but I can't remember what Cover gave it.
Please notice that Image1 does not have banding on it's AlbumCover. Even though there is a gradient on it.
By doing a quick search I found some suggestions that the issue may be just a visual effect that is a result of having only 256 values for each of R, G and B channels that defines a color and the way that gradients work. If You try to cover a large area with a gradient, it'll divide it into smaller areas filled with solid colors, slightly changing between neighbouring areas. Additionally, there is an optical illusion called Mach bands that makes the borders of the areas even more visible.
Take a look at those links for more information and some suggested solutions:
how to make the brush smooth without lines in the middle
http://social.msdn.microsoft.com/Forums/vstudio/en-US/cea96578-a6b3-4b29-b813-e3643d7770ae/lineargradientbrush-can-see-individual-gradient-steps?forum=wpf
After digging around a long time I finally found the best solution:
Adding a little bit of noise to the image! This does mean I have to draw the gradient myself, but I believe the quality will be much better.
I will update this post with the algorithm itself and examples when I'm done writing.
Stay tuned I guess.
This may seem like a strange question, but I have a set of pictures I want to use as a fading screen saver, and I want each picture to have an accompanying quote, but each quote will be in a different place, relative to the picture.
Rather than coding a Rectangle for the area of each image, it would be easier just to draw a rectangle in the image, and have it drawn in there.
Now, the drawn shape would be a stark, uniform coloured border (lime green, for instance) because the colour doesn't appear in the pictures, and it would be on a solid coloured background, like black for instance.
My question is: If I draw a lime green rectangle on each image, how could I then, using C#, find that rectangle in the image, get the dimensions of it, and replace the lime green with the background colour, so in the end product, it'd look like the shape was never there to begin with?
I have not tried anything, I have no code to show, because it's an idea I had and though I'm sure it must be possible, I don't even know what to start searching for.
I hope this is possible, if it isn't, then I'll just draw a rectangle for each one, but that's a last resort. :)
Have you thought about using either the emgucv or aforge libraries? They are able to detect shapes in images quite easily. Though they don't detect edges perfectly, if all you want to detect is a rectangle, either one should work well.
Here are two tutorials on shape detection for emgu cv and aforge. Once you have the shape detected, then you can easily cut it out for the background. Say, for example, that you used the aforge Detection of quadrilaterals (in the link), then you could easily get the rectangles position and size by the calling of blobs[i].Rectangle; and create a rectangle with same size and position with picture background color.
If you need more clarification please feel free to comment. Nice idea!
I am having trouble getting my Form background image to display correctly with a gradient transparency. That is, the edge of the image (or anywhere for that matter) has a fading or non-255 Alpha value. The result is that everywhere the Alpha is NOT 255 (or 0 - I can't remember) I see my background color. Here is a screen shot:
What I have in this setup is a 24bit bmp file with a green background that I'm trying to key out via the Form.TransparencyKey property:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
Color key = ((Bitmap)this.BackgroundImage).GetPixel(0, 0);
this.TransparencyKey = key;
}
I have also tried setting the Form's BackColor property to the same key value but that did not make a difference.
I also tried saving my image as a png with transparency and keying out the entire form background but that didn't work either.
I know this is possible somehow, I've seen applications like Photoshop use this for a decade. I'm on WinXP Pro if that matters.
Anyone have experience with this and have an idea what step I'm missing or doing incorrectly?
The WinForms implementation of Form only permits a solid colour to be used as the transparency key. It's not possible to have varying levels of transparency.
Most apps with splash screens like yours take a screenshot of the desktop (within the bounds that their splash screen will occupy) and then composite their splash screen on top of this screenshot. They then display the resulting bitmap to the user, giving the impression of an alpha gradient.
I've had my share of failure time with exactly that.
I found that WinForms is simple weak at handling this.
Here is some solutions that you might find useful:
http://www.c-sharpcorner.com/UploadFile/scottlysle/XparentFormsCS10282007212944PM/XparentFormsCS.aspx
Link
http://www.vcskicks.com/splash-screen.php