Currently I am filling my MainWindow with a slightly transparent black:
But I want it to have a "hole" where this effect doesn't take place which should look like the following:
So this needs to be done at runtime since the area which the hole represents is going to change multiple times while the program is running.
What I thought I could do
So at first I thought I could just cut the area in the middle out
like you could do with a Graphics object, but the slightly
transparent black is nothing but a rectangle which is added as a child on a canvas which is currently done like this:
var background = new System.Windows.Shapes.Rectangle
{
Fill = new SolidColorBrush(System.Windows.Media.Color.FromArgb(150, 0, 0, 0)),
Width = ScreenInfo.Width,
Height = ScreenInfo.Height
};
MainCanvas.Children.Add(background);
But I couldn't fine any way to achieve this cut effect.
Creating 4 Rectangles which would look something like this: but this way of doing it didn't seem to me as the most effecient way of achieving this.
Thanks for any kind of help!
Create a CombinedGeometry by cutting a smaller square out of a larger one and then use that with a path. How you size it will depend on your application, a Viewbox will probably be good enough for most cases:
<Grid>
<TextBlock Text="Hello World!" FontSize="200" Foreground="Red" TextWrapping="Wrap" TextAlignment="Center"/>
<Viewbox Stretch="UniformToFill">
<Path Fill="#C0000000">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="0,0,4,4" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry x:Name="cutRect" Rect="1,1,2,2" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
</Viewbox>
</Grid>
Then to change the size of the inner geometry you can either bind its Rect to a view model property or change it directly in code-behind:
cutRect.Rect = new Rect(1, 1, 1, 1);
Related
Anyone know a good way to create this object from Xaml? It also has to work at .5 Opacity when layered on top of other controls.
It also has to be resizable via Horizontal or Vertical Alignment.
I'm having some difficulty. The closest I get is with 2 borders, one having a negative margin--but it doesn't work when Opacity is applied.
Code that works:
<Path Fill="Black">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="0,0,200,100" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="105,5,90,90" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
Use a GeometryGroup with an EvenOdd FillRule, or a CombinedGeometry with a GeometryCombineMode of Xor or Exclude. The geometries to combine will both be RectangleGeometry objects, with an appropriate RadiusX and RadiusY. The result will be the outer rectangle with a "hole" in it where the inner rectangle was located. (I assume this is what you want rather than a white rectangle within the black one.)
You can then assign this composite geometry to a Path as its Data property, and set the Fill and Opacity as required.
In Windows Presentation Foundation, I can't seem to find a way of how to cut an image based on the shape of another image.
E.g. I'd like to display someone's photo in the shape of a heart.
There are answers like this one which crop an image into a rectangle or like this one which draw a radius to clip the image into a circle.
But is cropping really the only way?
Can WPF overlay the image on top of a shape and have the image be cut based on the shape dimensions?
The code that I have so far does the inverse of what I'm trying to do. What I have so far uses an overlay layer as a mask to cover the image:
<Image
Name="HeartOverlay"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Panel.ZIndex="2"
/>
<Canvas
Name="Canvas"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Image
Name="Image"
Stretch="Uniform"
Panel.ZIndex="1"
/>
/>
HeartOverlay.Source = new Bitmap(#"C:\heart.png");
Image.Source = new Bitmap(#"C:\image.png");
The problem here is that overlay is merged together with the image and saving/printing the image also shows the overlay.
See image below as an example. Note the white borders, which are especially evident when viewing the image in something like the Mac Preview app. I'm looking to save/print the image without the white borders.
Appreciate any pointers!
You could simply fill a Path with a heart-shaped Geometry with an ImageBrush:
<Path Width="100" Height="150" Stretch="Uniform"
Data="M1,2 L0,1 A0.5,0.5 1 1 1 1,0 A0.5,0.5 1 1 1 2,1 Z">
<Path.Fill>
<ImageBrush ImageSource="C:\image.png"/>
</Path.Fill>
</Path>
I have the following simple code that draws rectangle
<Canvas Name="MainImageLayer" >
<Image >
<Image.Source >
<DrawingImage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >
<DrawingImage.Drawing >
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="#FF1acc33" Thickness="1" />
</GeometryDrawing.Pen>
<GeometryDrawing.Brush>
<SolidColorBrush>Red</SolidColorBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="300,480,287,83" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Canvas>
The result looks like this - note that the rectangle is in (0,0), even that the Rect is defined as
<RectangleGeometry Rect="300,480,287,83" />
I want it to start at (300,480), like that:
I can achieve that by inspecting my DrawingImage and doing :
<Canvas.Top>300</Canvas.Top>
<Canvas.Left>480</Canvas.Left>
But isn't there a better way, considering the fact that this data is encoded into the Geometry?
Your problem comes from the fact that you have all of your geometry wrapped in an 'Image' object. By default, the .Height and .Width properties of an Image object are set to 'Auto', and the .Stretch property is set to 'Uniform'. This guarantees that your rectangle will always appear in the top left corner of your Canvas.
If you really need to encapsulate your geometry in an 'Image' object (which I would caution you not to do) you will need to set the Margin of your Image object to 300,480,0,0. in order to get your rectangle to appear where you want it. This is required because of the way an 'Image' object handles its contents.
An Image object does not behave like a Canvas object, even if it is inside one.
Unless there is some overwhelming reason to keep the Image object, you will have much better success if you discard the Image and draw directly on the Canvas.
EDIT
Why should an Image object not be used in this case?
An Image object is primarily used for displaying...well, images, like bitmaps and such. It is not suited for drawing geometry in it at a specific location (and size). Like most WPF controls, it is what I would call a 'relative' control, meaning it is well suited for automatically resizing and positioning itself in relation to both its contents and its parent. A Canvas on the other hand is an example of an 'absolute' control. Its entire reason for existence is to allow content to be drawn upon it in an exact location with an exact size. Adding an Image inside a Canvas and then drawing the geometry inside the Image just adds an unnecessary layer of complexity between the Canvas and the geometry that needs to be drawn.
How can the geometry be added directly?
One of the easiest ways would be to use the Path object given in Clemens' answer. Just replace your entire Image object and all its contents with the 5 lines of that Path and your rectangle will appear exactly where it should be. You can also do it with a single line and a Rectangle object:
<Rectangle Height="83" Width="287" Margin="300,480,0,0" Stroke="#FF1acc33" StrokeThickness="1" Fill="Red" />
but I would recommend the Path since it contains the size and position of the rectangle in one set of numbers. The Path also allows you much more flexibility if you are working with shapes other than rectangles.
Seems like the DrawingImage (or the GeometryDrawing?) is somehow adjusted to its visible rectangle. Anyway, wouldn't this be a much simpler solution, instead of Image?
<Path Stroke="#FF1acc33" StrokeThickness="1" Fill="Red">
<Path.Data>
<RectangleGeometry Rect="300,480,287,83" />
</Path.Data>
</Path>
You can also add another non-empty GeometryDrawing that covers (0,0) (e.g. a RectangeGeometry with Rect="0,0,1,1") with a transparent brush to the DrawingGroup.
EDIT: As i understood, the DrawingImage is adjusted to Drawing.Bounds
I was wondering if there was a way in WPF to create a shape (ex.: polygon, line, ...) but instead of using absolute positioning for the points of the shape, we could use something like percentage.
For example, instead of having a line with absolute positioning like this: (X1=0,Y1=50,X2=100,Y2=50), we could have a line with percentage values (0 to 1) like this (X1=0,Y1=0.5, X2=1, Y2=0.5 where 1 is equivalent to the size of the parent). So no matter what is the size of the parent of the shape, the shape would always be proportional to its parent.
That could be done with dependency properties, but I would find it much cleaner if there was a way to do it with something like I described. I hope I didn't miss something really obvious that does exactly that...
Thanks!
You could achieve a similar effect if you scale it by applying a scale transform on your geometry the size of the control.
<Path Width="100" Height="100" Stroke="Red">
<Path.Data>
<LineGeometry StartPoint="0 0" EndPoint="1 1">
<LineGeometry.Transform>
<ScaleTransform ScaleX="{Binding Path=Width, RelativeSource={RelativeSource FindAncestor, AncestorType=Path}}"
ScaleY="{Binding Path=Height, RelativeSource={RelativeSource FindAncestor, AncestorType=Path}}" />
</LineGeometry.Transform>
</LineGeometry>
</Path.Data>
</Path>
This should draw a red line with absolute points (0, 0) to (100, 100).
I am in the following situation: designing an interactive flow-chart GUI. I stuck with animating a scale down animation of the flow-chart. Composed elements of the flow-chart are minimized, but they keep being active.
I have something like this:
<Canvas Canvas.Left="55" Canvas.Top="720" Height="100" Width="500" Tag="stepDown">
<Line Stroke="#99CCFF" StrokeThickness="8" X1="0" X2="720" Y1="10" Y2="10">
<Polygon Stroke="Black" StrokeThickness="2" Points="0,30 40,0 40,60" Canvas.Left="-20" Canvas.Top="-20" Fill="#99CCFF"></Polygon>
<Polygon Stroke="Black" StrokeThickness="2" Points="0,0 0,60 40,30" Canvas.Left="720" Canvas.Top="-20" Fill="#99CCFF"></Polygon>
<Image Canvas.Left="-50" Canvas.Top="-70" Height="53" Name="image32" Source="img/outlet.png" Stretch="Fill" Width="30" Tag="relative" />
</Canvas>
And I would like to shift the whole canvas and its elements to the left - no problem with Translate Transform. Furthermore I would like to scale down only the Line, no problem with Scale Transform.
But (!) at the same time, I want that the Polygons stick to the two line endings of the line. When scaling down only the line, the Polygons, at least one, floats away.
I don't know how to dock these elements or define them at a relative basis. It works fine with a scale down on the whole Canvas, but this changes the Polygon and Images as well.
In order to me you have to define hanchors points, as attached properties. Even define a behavior that track these points accordingly to poligon placements. Then you can bind these property to the line start/end point. In this way line should stay gripped to the polygons. But I did'nt try, is just a design idea.