Drawing a custom button with hot or pressed state - c#

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...

Related

UWP-xaml InkCanvas: Is there a way to deny painting on specific zones?

I am trying to make a UI prototype for a bus route design app. The intended behaviour is to let the user paint with a brush over the streets, but not over buildings. The idea is to get something like you see in the image below where the pink line represents the route that the user just painted.
I am currently using a basic InkCanvas and InkToolbar in order to do this.
My problem is that I have no idea on how to prevent users from painting over buildings. I tried to create several InkCanvas, each one of them representing a unique street, but that's a very clunky solution. Should I stick to this "solution" or is there any other thing that allows me to prevent the user from painting?
UWP-xaml InkCanvas: Is there a way to deny painting on specific zones?
Great question, for your requirement, the better way is that draw line in MapControl with MapPolyline.
If you want to draw the line with ink-canvas, You need to declare that the building is not available. and please check official code sample scenario 8. When the stroke
cross the circle, it will be removed.

OpenCV C# - Detecting simple object in static image

I have no experience with images. I have to detect simple object in static image. For example I have image like:
I want to detect edges and remove background. Just to compare them.
Something like this.
Do u have any solutions of this problem? Images have often white backgrounds.
I've just thought about detect edges, and take everything what they contains.
To segment out the shoe-
Anadptive Threshold to remove the smooth changing background.
Sobelx, which removes the apparent background line, which i assume is
common for images of this setup.
dilate, closing operation to separate out the shoe.
Find contours, bounding box etc as per your choice.
Do an additional threshold if you want to remove the shadow at the bottom.

Interactive(clickable) map

I have a map of a camping, this is it:
Now, on this map, there are a lot of camping places. And all of the places(yellow, pink and the striped yellow), need to be clickable.
So my question is, how would i achieve this? I was thinking about using SVG or something. Is this a good solution?
Basic idea: Create a color map to look up which spot the user has clicked.
To create that color map, start with the original map, overlay it with an empty bitmap and write a small tool application to help you:
it should let you paint a filled circle in a special color for each site spot
ideally those colors should allow you to re-construct the number and type of the places
upon each click the next color should be prepared
you don't need to match the place too exactly, but it is up to you to improve the colormap with a paint program; put the orginal map in a layer under it and use an eyedropper tool to get the right color and then draw the places a little better
as many of the places have consecutive numbers you can
count them up with each click
use an input box to set new starting numbers
For the actual application you should
hold the color map in memory
use the MouseClick of a PictureBox to get the coordinates of the place
multiply (or rather divide) those with the zoom factor
use GetPixel on the color map to get the color and then
extract the place number.
An ARGB color has 3 color bytes; two will suffice for the place numbers and you will still have one byte for the color coded types of places..
The zoom factor is 1f * PictureBox.clientSize.Width / PictureBox.Image.Width.
For best user experience I would use the PictureBox.MouseMove to look up the place in the color map and give feedback whenever the color changes, including setting and clearing the mouse cursor betwenn Hand and Default whenever the location is clickable, i.e. has a non-transparent color on the color map..
To avoid artifacts the color map must be stored asPNG , not as JPG!
If you want more info with the places you could (and should) create a Place class and hold a Dictionary<Color, Place> to look up Place by Color..
If you put the image in a PictureBox, say, you could use the MouseClick event.

Overlaying a 'dot' on to an image on click

I am trying to write a simple program that lets me overlay a dot on top of an image when the image is clicked. I can save the X and Y data back to my database but then I will want to be able to call that information back at a later date and overlay the dots again via code unlike the first time when the user had to click the image.
I got as far as capturing the X and Y of the click no problem but I am having trouble finding examples specifically for what I am trying to do. All of the examples online seem to be for saving the image with the added graphic but I do not need to do that as it will be the same image every time.
Once I can do this, I also need to work out a way that I can detect what area of the image has been clicked. The areas I need to mark out vary in shape and size so I need to try and work out a way to 'map' these areas and then cross reference with the co-ordinates of the users click (I assume that I may need to do some clever geometry stuff for that?)
If anyone has any suggestions of what subjects/classes/methods etc. to research for either of my queries, I would very grateful.
Thanks in advance
You can use the System.Drawing namespace to achieve this.
Create a control and override OnPaint and OnPaintBackground. Store your clicks in a List
In OnPaintBackground, draw the image using DrawImageUnscaled using the graphics object which is passed to you as a parameter.
In OnPaint, loop through your points array and call graphics.FillElipse or similar to draw a little dot.
Because this isnt a retained mode graphics system, you need to keep drawing these items so this may not suit a large number of dots. In that case, you can create an in memory bitmap and get a graphics drawing object using graphics.FromImage.

How do I create a colour that will match the current visual style?

For our winforms application, we've been asked to colour invalid cells in a DataGridView in a red colour. We need to find a red colour that matches the current visual style but which is still distinctive if the user has chosen a palette with mostly reds. How do I create a colour that will match the current visual style? How do I make sure I avoid clashes?
I don't think the original poster is looking to make a palette of colors (colours), instead he is trying to highlight an invalid cell. The chosen highlight color is red, but he is concerned that red might not stick out if the user has chosen a red palette.
How about this: When painting an invalid cell, use SystemColors.Window for the text and SystemColors.WindowText for the background. (or whatever equivalents there are for a DataGridView). This way, you are guaranteed that the invalid cell will be the opposite colors of a normal cell.
I think that you are looking at this the wrong way. Red is often chosen for several reasons. It is (in western culture among others) commonly used to depict that something is wrong or danger. But red is also a colour that usually stands out. However, when trying to direct a users attention to something on the page, there are two infallible methods.
1) Animated gifs or videos (annoying as f***) or
2) Clashing colours
Usually red stands out, but in your situation where a user may have a red themed style, your best bet is to go with a colour that will clash. It is possible to have clashing colours that go together (if that makes sense).
Here are a few websites that I have used in the past to help me find colour schemes that may help you as well:
Kuler, Color Combos and Color scheme designer
This may not have been the answer you were looking for but i hope it helps
The question is a bit ambiguous and a little subjective; it much easier to comment directly on examples. However, there are a multitude of on-line tools that will help you create colour palettes for websites, and these may be useful to gauge how a particular shade of red interacts with various other colours.
Hope this helps.
You could maybe try to use the Light and Dark methods of the ControlPaint class? I do something similar, although kind of in the opposite direction. I needed to make some rows in a grid stand out, but not stand out as much as the selected rows. So I created a color that was a bit lighter than the default selection color like this:
checkedColor = ControlPaint.Light(grid.DefaultCellStyle.SelectionBackColor, 1.65f);
Could try to use that, maybe with some added logic, and base it on some system color that is made to stand out. For example System.Drawing.SystemColors.HighLight or System.Drawing.SystemColors.HotTrack.
take a look at the Krypton Toolkit (http://www.componentfactory.com). They offer a free toolkit for WinForms controls with a theme manager. This theme manager provides ready to use methods to extract the current color values.
I have nothing to do with them. I use it for my own Product (Royal TS at http://www.code4ward.net) and found it really useful.
If you want to build beautiful UI, you should take a look at the Krypton stuff.

Categories