Taking a round screenshot in WPF?

Question

0.00/5 (No votes)

See more:

Hey guys, need some help asap!
i have a "create new user" window which in it i have an option to take profile image. Now, the profile image, when loaded, is entered inside System.Windows.Shape.Path control in an imageBrush control and inside the path.Data i have CombineGeometry with EllipseGeometry (lets call it "circle").
Now, when the mouse is hover the picture, the "circle" is follow the cursor wherever it go and on a mouse_double_click event i want the code to take screenshot of the circle and only the circle.
printing the path itself is no problem (since its class is "Visual"). printing the "circle" component is somthing else ("Media" class).
does anyone has any idea how to get started with this???
i'm adding the relevent xaml but i'm not sure the code will be readable in here:
<path x:name="pathFront" rendertransformorigin="0.5,0.5" xmlns:x="#unknown">
Stroke="Transparent" StrokeThickness="1" Stretch="None" Margin="1" >
<path.rendertransform>
<transformgroup> <skewtransform anglex="0" angley="0">
<rotatetransform x:name="rtAngle2" angle="0">
<translatetransform x="0">
<path.fill>
<ImageBrush x:Name="imgFront"
Stretch="Fill" AlignmentX="Center" AlignmentY="Center" Opacity="1"/>

<path.effect>
<blureffect x:name="imgFrontBlurRadius" radius="15" renderingbias="Quality" frameworkelement.flowdirection="RightToLeft">

<path.data>
<combinedgeometry geometrycombinemode="Exclude">
<combinedgeometry.geometry1>
<ellipsegeometry x:name="circle2" radiusx="113" radiusy="113" center="115,115">

<combinedgeometry.geometry2>
<ellipsegeometry x:name="circle" center="120,120" radiusx="65" radiusy="65">

What I have tried:

i have tryed to take screenshot of the area inside the circle with no luck, tryed to create rectangle with the same radius of the circle and then print it and again with no luck...

Posted 10-May-16 8:28am

oronsultan

Updated 12-May-16 6:51am

Add a Solution

Comments

Sergey Alexandrovich Kryukov 10-May-16 14:56pm

Not clear. You can take a screenshot and leave the circle area, but what do you want to do with remaining area? Make it transparent? Anything else? What prevents you from doing so?
"With no luck" is not informative. Software development is not done via "luck".
—SA

oronsultan 10-May-16 15:12pm

ooohhh dear sa, how much i miss reading your notes!
when i take the screenshot of the whole path, i'm getting a round png which is actually the original image selected by the user. infact, i want to take only the circle inside the image (this is the part that user choose to be the profile image). the circle is ellipsegeometry which make it preety dam hard to take screenshot. regarding your question, i dont want to make the rest of the image transparent, i just dont want to take it at all. if you have any more qusetion, please do. i know this is a complex situation but consider the history of me with codeproject, you are a legend!!! :-)
btw: what do you have to say if i tell you i want to get the pixels surounding the circle and than print this area, will it be possible?

Sergey Alexandrovich Kryukov 10-May-16 15:53pm

"Don't won't to take it at all" is the idea which virtually expels one from the engineering league, due to total lack of logic. I guess this is the kind of comment you were missing? :-)

Do I really need to explain it? Bits are always in a rectangular matrix, they are there, no matter if you want it or not. Image in computing is either vector graphics or a bitmap. Screen is always a bitmap, always rectangular, by definition.

But if it's really about printing, it makes some sense: print only the inner pixels. But it still would be rectangular on paper only remaining pixels will be "default" instead of "transparent", which will effectively get you exact same effect. Let's say, the solution is the same, only transparent pixels would be there not because of the fundamental principle, but because of, let's say, performance. It's faster to print all pixels than rounded sub-set of then.

—SA

3 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2016-05-10T10:02:00

In my comments to the question, I explained that you have to make outside pixels transparent, and explained why everything else would be just absurd, or at least impractical. In the "impractical" case, the effect is the same as with transparent pixels, because there is no such notion as "no pixel".

This is how you can do it all: WriteableBitmap Class (System.Windows.Media.Imaging)[^].

All the usage is well explained in documentation. Note one key thing: you need to use PixelFormat which include opacity for each pixels, which is the alpha-channel. See also: PixelFormat Structure (System.Windows.Media)[^].

You have to set opacity (alpha value) of each outside pixels to zero, but I would advice some smooth transition around the circular line, to provide a kind of anti-aliasing. This is not so trivial thing, but little experimenting will give you the reasonable rendering.

Do you also need help with drawing? This is a pretty simple topic. Overall, the whole problem is fairly simple, just needs some logic and understanding.

—SA

oronsultan · Accepted Answer · 2016-05-12T06:51:00

Simpley as can be, the solution is:

C#

private void SnapShot()
       {

           RenderTargetBitmap rtb = new RenderTargetBitmap(Convert.ToInt32(pathBack.ActualWidth) , Convert.ToInt32(pathBack.ActualHeight), 0, 0, PixelFormats.Pbgra32);
           pathBack.Clip = circle;
           rtb.Render(pathBack);
           PngBitmapEncoder pngImage = new PngBitmapEncoder();
           pngImage.Frames.Add(BitmapFrame.Create(rtb));
           using (Stream fileStream = File.Create(@"C:\Users\אורון\Desktop\EW\test\1.png"))
           {
               pngImage.Save(fileStream);
           }
       }

Sergey Alexandrovich Kryukov · Accepted Answer · 2016-05-10T14:43:00

Solution 2

I almost forgot: there is one more radically different solution.

You can create a non-rectangular control rendering the bitmap. You can make it with the round shape. And then you can put this control as a child of any other control: they unwanted pixels will truly me "missing". But still, they all be in the bitmap, which is, as I already explained, is rectangular by definition.

Here is how: you create a custom control (but it can be even some Panel class or the class derived form it) and put an image (rectangular) on it. Done. Now, you cut out a part of this control. This is done in the following way: assign a non-rectangular Geometry object to the property Clip:
UIElement.Clip Property (System.Windows)[^] (see the code samples here),
Geometry Class (System.Windows.Media)[^].

The problem of this approach: you won't get anti-aliasing possible with Solution 1.

—SA

Posted 10-May-16 14:43pm

Sergey Alexandrovich Kryukov

Comments

oronsultan 12-May-16 12:30pm

hey sergey, i didnt answer you the last two days beacause i gave your solution a try and it didnt work out. what i think is that i didnt manage to pass my problem very clearly. lets some it up by saying i have a Path, inside it i have EllipseGeometry and i want to screenshot only the EllipseGeometry. how can i do it?
<Path x:Name="pathBack" RenderTransformOrigin="0.5,0.5"
Stroke="Transparent" StrokeThickness="1" Stretch="None" Margin="1" >
<Path.RenderTransform>
<TransformGroup>
<skewtransform anglex="0" angley="0">
<rotatetransform x:name="rtAngle" angle="0">
<TranslateTransform X="0"/>
</TransformGroup>
</Path.RenderTransform>
<Path.Fill>
<ImageBrush x:Name="imgBack"
Stretch="Fill" AlignmentX="Center" AlignmentY="Center" Opacity="1"/>
</Path.Fill>
<Path.Effect>
<blureffect radius="0">
</Path.Effect>
<Path.Data>
<combinedgeometry geometrycombinemode="Exclude">
<combinedgeometry.geometry1>
<ellipsegeometry x:name="circle3" radiusx="109" radiusy="109" center="115,115">

<combinedgeometry.geometry2>
<ellipsegeometry x:name="circle4" center="100,100" radiusx="0" radiusy="0">

</Path.Data>
</Path>

Sergey Alexandrovich Kryukov 12-May-16 12:43pm

No, unfortunately you have to get a full rectangular screenshot image (you can crop it, no more), render full rectangular image, and clip only the control where you render it...

I told you from the very beginning that the solution would be using transparent pixels. Now I'm telling you that this is also a better solution, because anti-aliasing through softening of the opacity function around circle/ellipse can be very important. Clip may create visible pixellation, too visible...

—SA

Taking a round screenshot in WPF?

3 solutions

Solution 1

Solution 3

Solution 2

Add your solution here

Preview 0

Taking a round screenshot in WPF?

3 solutions

Solution 1

Solution 3

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us