calculate selection brush color in WPF - wpf

I have noticed when setting the selection of a text box in wpf to red, and using a color picker to verify the color, the color faded to #FF9999.
I have a specific color my client requires for the selection brush. Is there a way to calculate what color i should set the SelectionBrush to so when the text is selected, the exact color is displayed?
Currently I need to have the selection brush as #6599D1, but once set, the color is #C1D6ED.
How can I calculate the starting color so the end color is what I need?

Following up on the answer by H.B.
I've calculated opacity with the following formula in the past
Red = OriginalRed * Opacity + (1-Opacity) * BackgroundRed
which inverts to
(Red - (1-Opacity) * BackgroundRed) / Opacity = OriginalRed
The TextBox has default Background set to White and SelectionOpacity set to 0.4.
As H.B. explained, you can't achieve your color with these default settings since the Red value will come out as -130. This leaves you with 3 options, Change Background, change SelectionOpacity or don't do it :)
Changing the TextBox Background probably isn't something you wanna do so that leaves option 2, change SelectionOpacity
We don't want Red to go below 0 so
(101 - (1-Opacity) * 255) = 0
which gives
1 - (101/255) = Opacity
This results in 0,604 so with this SelectionOpacity value you can calculate that the SelectionBrush needs to be set to #0056B3 to become #6599D1 once the Opacity has been applied.
Here's how the TextBox look with these values
<TextBox SelectionBrush="#0056B3"
SelectionOpacity="0.604" />

Good question but i think this is impossible. If there is some overlay inside the ControlTemplate you cannot formulate a function which calculates a darker colour which then will end up as the intended colour.
e.g. when you input red which is: 255,0,0 you get 255,153,153, now the function that would need to be applied to your initial colour would need to darken the Red, this of course could only be done in the red channel as green and blue are already zero. The problem is not the red channel however (which ends up as 255 and hence is not affected), so any changes to that will only serve to desaturate the colour even more instead of darkening it.
Edit: To make this a bit more mathmatical, the function that is applied by the transparency of the selection is:
f(x) = 0.4x + 153
If you apply this to all the channels of your colour you will see that this is indeed the case. Now how do we get the values we want? Quite simple, we invert the function, which is this:
f^(-1)(x) = -2.5(153.0 - x)
Great! Now lets apply that to your colour:
R: -130.0
G: 0
B: 140
Hmm, not so great after all i suppose.
This negative value is exactly why this is not always possible, every colour which has components below 153 is not reversible.

Related

Windows Phone 7 ProgressBar color of the incomplete part

I'm using a determinate ProgressBar control to indicate completeness of a block in ListView (for example the amount of points scored in a level compared to the maximum.
I can change the Foreground property of the progress bar to change color of the "completed" part of the bar, but I cannot alter color of the incomplete part of the bar.
For example, if Value is 5, Maximum is 20, and Width is 100 px, then color of line from 0 to 25 would be Red, and the color of line from 25 to 100 is what I'm trying to change.
You can check the colour slightly by setting the Background property of the ProgressBar control. If you do this you will see the colour of the incomplete part being a shade of the colour you define due to some opacity being set on the incomplete part. If you want a solid colour rather than a colour with opacity set then you will have to look at altering the style of the control itself.
If you open your page in Expression Blend, and then Right Click on the ProgressBar control and select Edit Template > Edit a Copy... then a new style will be created. The part of the Style you are looking to edit is as follows :-
<Rectangle x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" Height="4" Opacity="0.1"/>
If you alter the Opacity value or remove it all together then a solid colour will be allowed.

How a Slider control in WPF can snap on specific values?

I want to create a slider, with values from 0 to 100 that I can slide like any other slider... but at position 30, 42 and 55 (for example) I want to snap to these values, to make easy to the user to stop the slider at them
edit: my solution was to have 2 slider, the first one is invisible, value 0 to 200, and the other one is the visible on, value 0 to 100
The visible one cannot be slide, only the the invisible. Like this i can make a gap, ex: when I'm between 50 and 75 on the invisible slider, it's equals to 50 on the visible one...
You have to override OnValueChanged. See this article DiscreteSlider - Adding Functionality with a Simple Control Subclass and then this artice Silverlight slider control that snaps for a detailed explanation.
Instead of using SmallChange, you would check where between your values the slider sits and snap to the nearest.

Change TextBlock foreground color based on the background [duplicate]

This question already has answers here:
Progress bar with dynamic text & text color update
(3 answers)
Closed 2 years ago.
I'm looking for a simple way to change the foreground color of a TextBlock based on the color of what is behind it, so that it is more readable. Since an image is more explicit than words, here's what I want:
I assume it could be done with a custom shader effect, but I have no idea how to create it... Anyway, perhaps there is a simpler solution.
Any idea would be welcome!
Assuming the above is a progressbar, here is a great solution:
WPF progress bar with dynamic text & text color update
Quick and dirty method:
Add both the white and grey textblocks, ensuring the white textblock is "on top" of the grey textblock. Bind the text of the white textblock to that of the grey textblock, so they stay the same.
Add an opacity mask to the white textblock, of which the position and/or size (or whatever required!) is bound to the position and/or size of the green rectangle (not sure if that's a templated ProgressBar or a custom control, but either way it could be done).
This would then give the effect of the text over the green bar being white.
You could write an Valueconverter (implement IValueConverter) and pass the BackgroundColor as the converter Parameter. based on the parameter you convert the forground of the Textblock to the desired Value.

Setting the background of my image in WPF

Im having a grid in whre the user can specify an image to be shown, and its alignment. If the user chooses a small image and aligns it bottom -right, i want to provide the user with an option to assign a background color to fill in the rest, eg. pink/black/white. When the user now chooeses a small image the background is always white and i cant seem to get it right at runtime:
byte r = (byte)Convert.ToInt32(backcolorR);
byte g = (byte)Convert.ToInt32(backcolorG);
byte b = (byte)Convert.ToInt32(backcolorB);
((Grid)container).Background = new SolidColorBrush(Color.FromArgb(0, r, g, b));
This isnt working, its like, the image fille the entire grid and i should set the background color on the image instead... is this possible?
The first argument of Color.FromArgb represents the Alpha blending value. 0 meaning fully transparent, 255 meaning totally not transparent (fully opaque). You're requesting a fully transparent color which means you don't see any color, just the background. I guess the color of the element your grid is on is white. Use this code to fix your problem:
Color.FromArgb(255, r, g, b)
// or
Color.FromArgb(r, g, b)

Textbox validation border

I currently have the following red Border, signifying invalid entry, around TextBoxes in an application.
It just doesn't look right to me, it has square borders around rounded corners and the drop shadow is the wrong colour.
What is the best way of achieving a decent looking border around the text boxes?
Valid XHTML http://www.gumpshen.com/images/window.gif
Extract the TextBox template using Expression Blend and modify the ValidationStates to suit your desires.
This doesn't directly answer your question, but as a user, I almost prefer that the Background color change to a shade of red, with a low opacity value. It catches the eye well without being too "in your face".
That said, can you get the desired Border effect to look better simply by specifying the red border's CornerRadius value, while changing the TextBox's BorderThickness to 0?

Resources