Is there a way in WPF when two shape objects overlap each other that the overlapping portions of the object get painted in a different brush?
Worked it out.
You can use a geometry drawing containing a GeometryGroup with a fill rule of EvenOdd. This paints any overlapping items in white. Then just put another image over the top with CombinedGeometry containing the same objects as the Geometry group with a GeometryCombineMode of Intersect and that will highlight the intersect in your custom brush. The sample code is below:
<Grid>
<Image Stretch="None">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="Red">
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="3" />
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<GeometryGroup FillRule="EvenOdd">
<EllipseGeometry RadiusX="80" RadiusY="80" Center="0,0" />
<EllipseGeometry RadiusX="80" RadiusY="80" Center="40,0" />
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="None">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="LightBlue">
<GeometryDrawing.Geometry>
<CombinedGeometry GeometryCombineMode="Intersect">
<CombinedGeometry.Geometry1>
<EllipseGeometry RadiusX="80" RadiusY="80" Center="0,0" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="80" RadiusY="80" Center="40,0" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Grid>
Thanks!
Related
Here is a test app that just shows a hatched ellipse in a window. No matter how I write it, the background of the ellipse is transparent; not the color I'm setting the GeometryDrawing. I'm stumped. The resulting picture shows the background of the ellipse as transparent when it should be Green.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp2"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Background="Red"
mc:Ignorable="d">
<Window.Resources>
<ResourceDictionary>
<DrawingBrush x:Key="HatchBrush"
Stretch="UniformToFill"
TileMode="Tile"
Viewbox="0 0 10 10"
ViewboxUnits="Absolute"
Viewport="0 0 10 10"
ViewportUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="Green">
<GeometryDrawing.Geometry>
<GeometryGroup>
<LineGeometry StartPoint="0 0"
EndPoint="10 0" />
<LineGeometry StartPoint="0 0"
EndPoint="0 10" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Yellow"
EndLineCap="Square"
StartLineCap="Square"
Thickness="3" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</ResourceDictionary>
</Window.Resources>
<Grid Margin="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Ellipse x:Name="c_Ellipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{StaticResource HatchBrush}"
Stroke="Black" />
</Grid>
</Window>
This is what I get:
The background of the ellipse should be Green:
<GeometryDrawing Brush="Green">
There is no filled geometry that uses the GeometryDrawing's Brush.
You may use a RectangleGeometry instead of two LineGeometries:
<GeometryDrawing Brush="Green">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,10,10"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Yellow" Thickness="1.5"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
I would like to draw circular geometry in VisualBrush (in order to create an OpacityMask), the result however are of rather low quality:
This image is 500% zoomed in but the cut off of the circle is apparent (especially on top and bottom) and even at original size the mask is rather blurry. The image was generated with following code:
<Border Background="Blue">
<Border.OpacityMask>
<VisualBrush TileMode="None" Stretch="Uniform" AlignmentX="Center" AlignmentY="Center">
<VisualBrush.Visual>
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="Black">
<GeometryDrawing.Geometry>
<EllipseGeometry Center="0,0" RadiusX="1" RadiusY="1" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</VisualBrush.Visual>
</VisualBrush>
</Border.OpacityMask>
</Border>
How can I fix the mask so that is neither blurry nor cut off?
This may be better. At least it is simpler.
<Border Background="Blue">
<Border.OpacityMask>
<DrawingBrush Stretch="Uniform" AlignmentX="Center" AlignmentY="Center">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="Black">
<GeometryDrawing.Geometry>
<EllipseGeometry RadiusX="1" RadiusY="1" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.OpacityMask>
</Border>
The XAML that I have in my question was taken directly from this question on SO. It's simply XAML that creates a tiled DrawingBrush to render rectangles (squares in my case) against the background of a canvas. My problem is that this XAML only works when I set the Width and Height of the Canvas to anything other than "Auto". But when I set the Width and Height of canvasMain to Auto then no squares are drawn on the background.
How can I have my Width and Height set to "Auto" and also have the DrawingBrush render the squares on my canvas?
Here is my XAML:
<Window.Resources>
<DrawingBrush x:Key="GridTile" Stretch="None" TileMode="Tile"
Viewport="0,0 20,20" ViewportUnits="Absolute">
<!-- ^^^^^^^^^^^ set the size of the tile-->
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<!-- draw a single X -->
<GeometryGroup>
<!-- top-left to top-right -->
<LineGeometry StartPoint="0,0" EndPoint="20,0" />
<!-- top-left to bottom-left -->
<LineGeometry StartPoint="0,0" EndPoint="0,20" />
<!-- bottom-left to bottom-right -->
<LineGeometry StartPoint="0,20" EndPoint="20,20" />
<!-- top-right to bottom-right -->
<LineGeometry StartPoint="20,0" EndPoint="20,20" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<!-- set color and thickness of lines -->
<Pen Thickness="1" Brush="Silver" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
<DrawingBrush x:Key="OffsetGrid" Stretch="None" AlignmentX="Left" AlignmentY="Top">
<DrawingBrush.Transform>
<!-- set the left and top offsets -->
<TranslateTransform X="0" Y="0" />
</DrawingBrush.Transform>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="{StaticResource GridTile}" >
<GeometryDrawing.Geometry>
<!-- set the width and height filled with the tile from the origin -->
<RectangleGeometry Rect="0,0 160,160" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Window.Resources>
<Canvas Name="canvasMain" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="Auto" Height="Auto" Background="{StaticResource OffsetGrid}"></Canvas>
Try changing the alignments:
<Canvas Name="canvasMain" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Background="{StaticResource OffsetGrid}"></Canvas>
I wish to bind a collection of viewmodels with X,Y,Radius properties to a CombinedGeometry of circles using Union. However it seems that CombinedGeometry only supports 2 Geometries.
Is there anyway around this limitation?
Example of what I'm aiming for
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union" ItemsSource="{Binding Circles}">
<CombinedGeometry.Template>
<EllipseGeometry RadiusX="{Binding Radius}" RadiusY="{Binding Radius}" CenterX="{Binding X}" CenterY="{Binding Y}"/>
</CombinedGeometry.Template>
</CombinedGeometry>
</Path.Data>
</Path>
It is indeed possible to have CombinedGeometries within CombinedGeometry as seen below. However, I don't know how to set it up so that it is easily bindable.
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<!-- Combines two geometries using the union combine mode. -->
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="200,200" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="125,200" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="100,100" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="150,120" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
Are you looking for GeometryGroup ?
MSDN Code Sample :
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<!-- Creates a composite shape from three geometries. -->
<GeometryGroup FillRule="EvenOdd">
<LineGeometry StartPoint="10,10" EndPoint="50,30" />
<EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
<RectangleGeometry Rect="30,55 100 30" />
</GeometryGroup>
</Path.Data>
</Path>
This code produces the same result as the second code by the OP:
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<!-- any geometry here -->
<GeometryGroup/>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<GeometryGroup FillRule="Nonzero">
<EllipseGeometry RadiusX="50" RadiusY="50" Center="200,200" />
<EllipseGeometry RadiusX="50" RadiusY="50" Center="125,200" />
<EllipseGeometry RadiusX="50" RadiusY="50" Center="100,100" />
<EllipseGeometry RadiusX="50" RadiusY="50" Center="150,120" />
</GeometryGroup>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
And instead of all the <EllipseGeometry>, you can bind to a collection via Children="{Binding Circles}" in <GeometryGroup>.
I have kind of a similar problem and found a hepfull post here:
How to make the border trim the child elements?
You could also try to create a converter that receives the collection in that binding and builds up the combined geometries as desired.
I'll do exactly that now :)
<DockPanel LastChildFill="True" Height="18">
<Image Height="18" Width="80">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="Black">
<GeometryDrawing.Geometry>
<LineGeometry StartPoint="0,9" EndPoint="38,9" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen DashCap="Flat"
Brush="Black"
Thickness="0.5"
DashStyle="{x:Static DashStyles.Dot}, Mode=OneTime}"
/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
<TextBlock Height="18" Text="{Binding Name, Mode=OneTime}" Margin="3,2,5,0" />
</DockPanel>
Remove DashCap="Flat" and you will see the dots. There are other DashCaps that will work: Round, Square, Triangle.