Set unfocused window to grayscale - WPF C# - c#

I've got an colorful application which I want to display in grayscale when it's not focused.
This is what the application looks like when focused:
-- HA! 10 reputation needed to add pictures.
Anyway, the top bar already changes to gray thanks to mahapps (metro), but the content is still colored when the window is unfocused. Is there a way to put some kind of layer on the content?
While searching on this topic, I only got flooded by questions on how to convert an image to grayscale.
There are TabControls, Labels, Buttons, WebBrowsers, TextBlocks and all kind of stuff in my application, and all the content is contained in a grid, if that helps.
Any thoughts on this are very much appreciated.

This can be done using PixelShaders to create a WPF Effect. It would be a very long answer to explain it all.
See this link for a full guide on how to create and use a greyscale pixel shader effect:
Grayscale Effect - A Pixel Shader Effect in WPF
Apply the effect to each Window as and when required.

Related

Is it possible to rotate a picture box without C# code on the Form Designer or change shape of picture box border?

I am very new to C# and WinForms. I am trying to create a segmented display where certain segments turn on and off (Using Microsoft Visual Studio 2015).
Right now I am placing picture boxes with segments I cropped and removed the background on in GIMP and it works fine so long as the segments are far enough away from each other, or are perfectly square.
When they overlap, with setting the picture box background transparent, the picture box is transparent straight through another picture box and just shows the background of the form window where the rectangular picture box is covering.
I tried two different things:
Changing default rectangular shape of picture box to any shape I can draw; not really sure how to do it and i don't think it is possible
Adding a bunch of picture boxes with a dark black picture and then rotating them and moving them to the correct position and turning them on when the particular segment comes on to cover up the problem. However, I don't think I can, or know how to just rotate an entire picture box when I am placing it? I have seen some code online on rotating picture boxes in C# but I am not sure how to implement it. I feel like with anything else there has to be a rotate option I am just missing.
Attached is a picture of the problem, notice how I sent the segment (line) to the back and the SMS quote image to the front. The dotted lines are the picture boxes:
You can use a WPF project to accomplish what you want. It is much more flexible than WinForms. Plus it supports true transparency. It does have a bit of a learning curve, but if you're just starting out, I think you would be better served to start with WPF.
You can rotate an Image (PictureBox) in WPF as follows:
<Window x:Class="WpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="467" Width="616">
<Grid>
<Image Source="C:\MyFolder\MyImage.gif">
<Image.LayoutTransform>
<RotateTransform Angle="45" />
</Image.LayoutTransform>
</Image>
</Grid>
</Window>
The winforms designer does not have features for real UX design. It's mainly targeted for designing simple UI for data oriented application. You will not find any advanced features. You can resize the controls, align them, moving between containers.
There are advanced ways, how to change the shape of controls. But it is not available in winforms designer.
The transparency in winforms is fake. Actualy the transparency means "I'll show the background color of my parent". If you want "true transparency" you must draw the other controls as the background image of target control.

Glow effect for lines drawn in InkCanvas

I'm using the WPF InkCanvas for a drawing application. The canvas is over a image. I can scribble over the image OK but I need it to have a glow effect - i.e. the actual lines drawn must have this effect. Is there a way to do this in XAML or in the C# code?
You want to use a ShaderEffect and attach it to the UIElement.Effect of the InkCanvas. This MSDN article contains a sample that shows how to write ShaderEffects.
Try starting with the excellent set of ShaderEffects implemented in the Windows Presentation Foundation Pixel Shader Effects Library.

How to resize an image/chat bubble accordingly?

I am making something like the WhatsApp Chat. When you send a message, a greenish rectanglepops up with a small arrow on the top right hand which resizes according to the amount of text you put in.
I would like to ask for help in doing the same using Xamarin Android (C#)
How do I resize a rectangle according to the text one inputs??
Thanks!!
P.S. - Please provide me the greenish color of the rectangle whatsapp uses
I don't know how Xamarin does it but in Android we use 9-patch images for these kind of backgrounds. It is very simple actually. You can check the below links.
http://radleymarx.com/blog/simple-guide-to-9-patch/
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
Using a textview you can set a background for it.
add some padding so the text doesnt go off the edge.
if the background image is a bubble it should stretch to the text.(try use a slightly high res).

WPF control for image manipulation

I need to load an image in a WPF window, an be able to read and modify individual pixels (in an efficient way), zoom the image (and scroll it), get the value RGB/grayscale of the pixel under the cursor, select areas (I guess knowing the cursor position and being able to modify pixels I could draw myself the square which represents the selected area)...
What is the best combination of WPF controls and classes to accomplish this?
I've been trying to do it loading a System.Windows.Media.Imaging.BitmapImage and putting it into a System.Windows.Controls.Image, but it's taking much longer than I expected.
Thank you very much
I once used this WPF Interactive Image Cropping Control. Go check it out, it should at the very least give you a good place to start. Oh, and welcome to Stackoverflow. :)

Best way to create button displaying selected color

You know those color picker buttons with a little rectangle in it, displaying the currently selected color? Like in MS Office products.
I would like to implement one using C# / .NET. So I've got a nice little icon with a magenta-colored rectangle (which is to display the color) and a transparent background.
I can think of two ways how this could be done, but they're both not really elegant:
Edit the icon using graphics software to have a solid background color instead of transparency and resize it to be exactly as large as the button containing it. This would allow to use TransparentColor=Manenta in combination with the button Background, however the icon would have to be edited whenever button size, toolbar BackColor or something else changes.
Edit the icon programmatically whenever a new color is selected. Would work, but seems a little bit to complex (regarding development and performance) to me.
So. Maybe I am missing the obvious, easy way to implement such a button?
Thanks in advance for any hints/suggestions/inspiration :)
You can easily override the OnPaint method and draw a rectangle with any color you desire.
Obviously, there is no elegant solution. I chose the first one, using PNG transparency and BackColor, with the drawback of having to color the png background like the background of the containing panel. Seems to be least painful this way.
I see no reason to use an icon, PNG, or any other image resource for this. That seems a complete waste of resources.
Just draw the boxes from code, drawing the colors that are currently part of the control's color list. Ideally, your control will allow the caller to add their own colors. And it wouldn't require any fiddling around with images.
I just used an owner-draw combo box when I did this, but I drew a color box as I'm describing. Very easy.

Categories

Resources