I have a method that is triggered every time a user performs an action, within this method I want to trigger the color of an image to change color/illuminate every time the method is called.
Is there a simple way to change the color an image programmatically? I can't see any obvious methods or properties to do this attached to the image.
So the method below is as follow just not sure how to set the image color for BoxBagImage
void matcher_GestureMatch(Gesture gesture)
{
lblGestureMatch.Content = gesture.Name;
scoreCntr++;
boxBagImage. // <-- don't see any color or background property belonging to the image
lblScoreCntr.Content = scoreCntr;
}
What would setting it do? How WPF should guess what "background" you have in mind? There's couple of things that could be called 'background'. Also, how would WPF guess how large area you consider to be the background?
Let's start with the fact that Image displays a bitmap (or such) all over its area, so direct Foreground or Background are rather meaningless here. They would be overdrawn by the bitmap immediately. It's not like TextBox or Canvas.
That's probably why Image does not have such property.
--
If your bitmap itself has a "background" (ie. a drawing of a Tree on a blue sky, sky=background), it is still the content of the bitmap. WPF is not an image-editing program and will not change it for you easily. If you want to change the "background" withing your image, you can load the bitmap, modify its pixels, and load the modified bitmap into Image control. Or apply some smart filter (so-called "effect") at rendering stage.
Or, if your bitmap is transparent (for example, PNG with alpha channel, a Tree on a completely-alphaized-transparent pixels), and you want the "some background" to be seen through that "transparent gaps", then you have to set the background of not the image itself, but the component that the image lies on. So, if you have for example:
<Grid> <Image Source=.... /> </Grid>
then apply the Background on the Grid. Transparent-Image placed on a Blue-Grid will look as if were on blue background, just like drawing on a glass placed on blue table. In fact, the Grid here simply forms the background. You can get any layout or effect in that way. If you dont want to have whole grid in that color, you can inject another grid:
<Grid>
<Grid Background="Blue" Margins="30,30,30,30"> <Image Source=.... /> </Grid>
</Grid>
or whatever you like.
Or, if you meant the "background" of the Image control that shows up when the Image has its Stretch property set in a such way, that the bitmap does not fill the whole area (Stretch=Uniform likes to do that unless you carefully set Width/Height) - then simply look above. The "area" is simply transparent, so just add some color to the component beneath Image.
Related
Question
How can I scale an image in XAML quickly without anti-aliasing applied?
Background
I am trying to make a pixel editor as a Windows 8 XAML/C# app. I'm using c#/XAML because most of my experience is with c#/WPF.
Method 1: WriteableBitmap + Image control. Originally, I used a WriteableBitmap to store and edit an image. That image is displayed in a resized XAML Image control. The problem is that the image does not get scaled properly because of anti-aliasing. (XAML does not seem to provide the BitmapScalingOptions that are available in WPF)
Method 2: Redrawn WriteableBitmap + Image control. Next I tried writing my own scaling, where I take my original image and write to a larger WriteableBitmap so that the scaled image is pixelated. The scaled image is then presented inside a XAML Image control. This process is slow and inefficient.
Method 3: SharpDX + Direct2d ?? I am pretty sure a solution exists somewhere between SharpDx, SurfaceImageSource, and Direct2d. Event still, I can't quite figure out how to display a SharpDx.WIC.Bitmap inside a Windows.UI.Xaml Image control, and am generally getting lost in the documentation.
What exactly is a recommended setup for achieving my desired end? Are there c# samples available which might point me in the right direction?
I don't know if you mean by scaling it by resizing it with the mouse or just with a button click to auto scale to a predetermined size.
But the thing you can do is to use an Image panel and then, just set it to image.Stretch = Stretch.Fill; so if you override and create a method for the Resize event of the Image Panel, your image will take the size to fill the Image panel.
I hope you can help me with this problem, attached videos to explain in a simpler way.
First example
Panel (has a textured background) with labels (the labels have a png image without background)
Events: MouseDown, MouseUp and MouseMove.
As you will notice in the video to drag the label the background turns white panel and regains its background image when I stop dragging the label
Panel controls have a transparent background as property, but changing the background with any color, let the problem occurred related to the substance, I do not understand why this happens and how to fix less.
Second Example
Contains the above, with the only difference that the panel controls instead of having transparent background, I chose black color for that property
You have to use double buffer and you don't have to stop using an image on the background, you can have everything running smoothly.
You have a couple of ways to do this, the fast way (not enough most of the time) is to enable doublebuffer of the panel.
The "slow" but better way is to do your own Double Buffer using a Bitmap object as a buffer.
This example creates a "side buffer" and accepts an image as parameter and draws it using created buffer.
public void DrawSomething(Graphics graphics, Bitmap yourimage)
{
Graphics g;
Bitmap buffer = new Bitmap(yourimage.Width, yourimage.Height, graphics);
g = Graphics.FromImage(buffer);
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
g.DrawImage(yourimage, 0, 0);
graphics.DrawImage(buffer, 0, 0);
g.Dispose();
}
Call this on your OnPaint event.
BTW... this is just a double buffer example.
Cheers
Change DoubleBuffered to true for both form and panel. I think that should solve your problem.
this is totally normal, because System.Windows.Forms.Control based items were not designed to do this kind of advanced Graphics operations.
in fact the reason that this effect happens here, is that when you assign any value other than 255 to the alpha component of a control BackColor, the form does the following when you change the control size or position:
it sets the new control position
it redraws the parent control
it gets the background of the control's parent as an image
it draws acquired image into the control body to seem as if the control is transparent
the control body gets drawn on top of the previously drawn background
the control children are drawn
* this is is a simplified explanation for the sake of illustration to deliver the idea
steps 1, 2 are responsible for the flickering effect that you see.
but you have two ways to solve this,
-the first is some kinda advanced solution but it's very powerful, which is you would have to create a double buffered custom control that would be your viewport.
the second is to use WPF instead of windows forms, as WPF was designed exactly to do this kind of things.
if you can kindly provide some code, i can show you how to do both.
I've got a large image in memory which I convert to an System.Windows.Media.ImageBrush and use it as the Fill for a System.Windows.Shapes.Rectangle. You can move this rectangle around with your cursor.
Basically I want to use the rectangle as a "viewport". Thus I need to change which parts of the image get displayed within the rectangle, i.e., define a rectangular subsection of the image.
How can I do that?
I see ImageBrush.Viewport but that doesn't seem to mean the same thing.
I'm open to alternative solutions that don't involve a rectangle, such as drawing directly on a canvas or something, but AFAIK WPF doesn't let you access pixel data directly (at least not easily).
To achieve this your going to have to create your own rectangle user control to allow the user to create/resize a rectangle. Then I would create a CroppedBitmap of the image in the rectangle portion Cropped Bitmap MSDN Stackoverflow example
Edit
No, no, no #Mark, You dont turn the CroppedBitmap into a UserControl. You create a USerControl that exposed the CroppedBitmap. Basically, you create a UserControl with the following DependencyProperties
The Image
The Width of he cropped portion
The Height of the cropped portion
The Left of the cropped portion
Top of the cropped portion
Then as soon as any of these properties your DP callback will do a RenderTargetBitmap Crop of the new region.
I want to set an image to have a transparent background, but I do not want to replace all pixels of a specific colour with transparency.
To be more specific, the image is a thumbnail image for a folder, obtained via IShellItemImageFactory.GetImage. This gives me a Bitmap, as displayed in Windows Explorer thumbnail view, but the background is solid white.
I can use Bitmap.MakeTransparent on it, and that will work in most cases, but in any cases where the thumbnail image contains white itself (for example, a folder that contains images, which include white colours).
Incidently, this is the first time in over 10 years as a developer that, after googling my question, I have not found an answer anywhere, and I've actually had to ask it myself. (I think that means I just levelled up! Yippee, I am now a level 2 developer...)
Use flood-fill algorithm to fill pixels of the same color from the OUTSIDE as you need it. It is something similar to magic wand in photoshop.
http://en.wikipedia.org/wiki/Flood_fill
What I would do is flood-fill with some obscure color (Magenta always does it for me), then replace that color with transparent (I don't know if flood filling with transparent pixels is feasible).
So what you're getting from IShellItemImageFactory.GetImage is a composite image that contains the original image on a white background? I suspect the white background is there if the image doesn't have the same aspect ratio as the thumbnail size. For example, if you ask for a 96x96 thumbnail of a 640x480 image, there's going to be some white space at top and bottom.
If that's the case, you have a problem. You can't differentiate between white pixels that are contained in the image, and white pixels that are added by GetImage.
There are a few things you could do. You could load the image and resize it yourself. That's probably the easiest. You'd want to maintain your own thumbnail cache then.
Or you could examine the image returned by GetImage to look for white space on the sides. Basically, if every pixel on a row (or column) is white, then make that row (or column) transparent. It's a little more complicated than that (the NBA logo, for example). But that's essentially what you'd want to do.
How do you get the REAL position of objects in silverlight?
I have a header image centered on the screen. When I make the browser window smaller, obviously, the header's left side goes off the screen. Finding out the actual position is good to know if you want to position objects on top of the image.
I capture the Content_Resized and I run a little test:
if (App.Current.Host.Content.ActualWidth > header.Width)
{
TEST = Canvas.GetLeft(header);
}
else
{
TEST = Canvas.GetLeft(header);
}
TEST always returns zero.
EDIT: header sits on a grid instead of a canvas. "Well, there is your problem..." So a better question might be this. How would I get the margins of an image sitting on a grid?
I probably should just answer the question but how to find the position of an element relative to another is probably something that has been answered before (by myself and others) here and elsewhere on the tinternet.
However if your goal is to place an item over an image then place the image in a Grid and then add the item as child of the Grid. That way you assign the relative position over the image as the margin of the item and let Silverlight's layout system do the rest.
As a general rule if you feel that you need to write code to move stuff about when the size of things change then unless you are writing a custom panel or something you're probably not using Silverlight layout system properly.
Edit:
Try this experiment:-
<Grid x:Name="LayoutRoot">
<Grid x:Name="headerContainer" Margin="50, 60, 0, 0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Source="YourLargeImage" />
<Image Source="YourSmallerImage" HorizontalAlignment="Center" VerticalAlignment="Top" />
</Grid>
</Grid>
Now try changing the inner grid's Margin to move its position around the screen. Note the smaller image always remains at the top center of the large image.
I got it working.
First of all, these images are on a grid, not a canvas. But switching the grid to a canvas caused lots of other problems one of which is that I could not have the header image centered like before.
The solution was to change the margin of the smaller image sitting on top of the larger header image when the content resized like this:
blankbarimage.Margin = new Thickness((App.Current.Host.Content.ActualWidth - header.Width) / 2, 0, 0, 0);
and, by the way, you create a content resized method like this:
App.Current.Host.Content.Resized += new EventHandler(Content_Resized);
So, to answer my own question, the way you get the REAL position of object in silverlight is (if they are on a grid) by looking at their margin settings.