How to turn off anti-aliasing for DrawingBrush? - wpf

I want to draw a triangle as a border background. One way of doing this is by using a DrawingBrush, but at smaller sizes anti-aliasing is distorting the triangle and making it blurry. How can I disable anti-aliasing?
<Border>
<Border.Background>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="Red">
<GeometryDrawing.Geometry>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure IsClosed="True" StartPoint="0,3" IsFilled="True">
<PathFigure.Segments>
<LineSegment Point="3,0" />
<LineSegment Point="6,3" />
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.Background>
</Border>
I've tried setting RenderOptions.EdgeMode="Aliased" and SnapsToDevicePixels="true" on all possible elements, but that hasn't worked...
Edit:
This is what the drawn triangle looks like at Width=17; Height=12 (zoomed to 800%):
As you can see the edges are anti-aliased. All the usual options for disabling anti-aliasing don't seem to be working...


I also became very frustrated with this. After some research, I found the answer: Using a Visual Brush with the Image element in the visual set to SnapToDevicePixels = true and Aliased Edge Mode. See the example below:
<Canvas VerticalAlignment="Top" Height="12" Margin="0,24,0,0">
<Canvas.Background>
<VisualBrush TileMode="Tile" Stretch="None" Viewport="-5,0,10,10" ViewportUnits="Absolute">
<VisualBrush.Visual>
<Image Stretch="None" RenderOptions.EdgeMode="Aliased" SnapsToDevicePixels="True">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="#8F8E8F" Thickness="1" />
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<LineGeometry StartPoint="0,0" EndPoint="0,10"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</VisualBrush.Visual>
</VisualBrush>
</Canvas.Background>
</Canvas>


Considering there haven't been any more replies, then it seems that the answer is - it's impossible.


I think you should be able to do it with SnapToDevicePixels (although sometimes it takes a little trial and error). You should set it on the owning object (so whatever the border is being put in). Have you read this article?
http://msdn.microsoft.com/en-us/library/aa970908.aspx

Related

Fixing blurred lines that are drawn by DrawingBrush

This is my drawing brush:
<DrawingBrush x:Key="GridBrush" TileMode="Tile"
Viewport="0,0,60,30" ViewportUnits="Absolute"
Viewbox="0,0,60,30" ViewboxUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<GeometryGroup>
<LineGeometry EndPoint="0,30"/>
<LineGeometry EndPoint="60,0"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="DarkGray" Thickness="1" DashCap="Flat" >
<Pen.DashStyle>
<DashStyle Dashes="2,2"/>
</Pen.DashStyle>
</Pen>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
This is where I use it:
<Border Width="721" Background="{StaticResource GridBrush}" UseLayoutRounding="True" SnapsToDevicePixels="True" >
And the effects is:
Basically the middle line is "okish" the other two are wider then they should. I tried using UseLayoutRounding, SnapsToDevicePixels but with or without those options nothing changes. I ran out of ideas by now :/

XAML graphic vector as image source

Now many graphics designers provide the images as xaml file not ico, png, ..., How can I use a xaml file as image source?
Thanks

From the MSDN
<Image>
<Image.Source>
<DrawingImage PresentationOptions:Freeze="True">
<DrawingImage.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
<EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.0" Color="Blue" />
<GradientStop Offset="1.0" Color="#CCCCFF" />
</LinearGradientBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Pen>
<Pen Thickness="10" Brush="Black" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
Instead of in-lining the GeometryDrawing you could refer to it as a static resource that you keep in a Resourcedictionary.
<Image>
<Image.Source>
<DrawingImage PresentationOptions:Freeze="True"
Drawing="{StaticResource myDrawing}">
</Image.Source>
</Image>
You will also find that you can show the drawing only once this way. So if you want this image to be present in the UI in multiple places, put the Image in a control template and style the controls with the template.

Thanks too all, this approach I know, my question was what happens when I have 100 xaml graphics files provided by a designer, now I have to extract the content from each file to move in a resource dictionary and set a key for each. I ask only if a more easy way as time.

Thank again too all.
I got a graphic like this
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="128" Height="128">
<Canvas Width="10240" Height="10240">
<Path Data="M5986 6814l828 -828c124,-124 328,-124 452,0l2428 2428c124,124 124,328 0,452l-828 828c-124,124 -328,124 -452,0l-2428 -2428c-124,-124 -124,-328 0,-452z" Fill="#EDC87E"/>
<Path Data="M6082 5442l412 412 -640 640 -412 -412c-534,401 -1197,638 -1916,638 -1764,0 -3194,-1430 -3194,-3194 0,-1764 1430,-3194 3194,-3194 1764,0 3194,1430 3194,3194 0,719 -237,1382 -638,1916zm-2556 -4471c-1411,0 -2555,1144 -2555,2555 0,1411 1144,2555 2555,2555 1411,0 2555,-1144 2555,-2555 0,-1411 -1144,-2555 -2555,-2555z" Fill="#808080"/>
</Canvas>
</Viewbox>
This can be user very easy as a content to a Content control, but to youse this for a control which requires Image source I cannot I have to transform to:
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Geometry="M5986 6814l828 -828c124,-124 328,-124 452,0l2428 2428c124,124 124,328 0,452l-828 828c-124,124 -328,124 -452,0l-2428 -2428c-124,-124 -124,-328 0,-452z" Brush="#EDC87E">
<GeometryDrawing.Pen>
<Pen Thickness="1000" Brush="Blue"></Pen>
</GeometryDrawing.Pen>
</GeometryDrawing>
<GeometryDrawing Geometry="M6082 5442l412 412 -640 640 -412 -412c-534,401 -1197,638 -1916,638 -1764,0 -3194,-1430 -3194,-3194 0,-1764 1430,-3194 3194,-3194 1764,0 3194,1430 3194,3194 0,719 -237,1382 -638,1916zm-2556 -4471c-1411,0 -2555,1144 -2555,2555 0,1411 1144,2555 2555,2555 1411,0 2555,-1144 2555,-2555 0,-1411 -1144,-2555 -2555,-2555z" Brush="#808080"/>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
The work in to trivial :(

WPF Callout Anchor start position

I have implement Callout control of Blend. Problem which I am facing is anchor point of the Callout starts with some margin from the top, While I want to have anchor from the top left of the callout.
Any help will be appreciated.
What I have now:
What I would like to have:

You seem to be mistaken about using this control. From MSDN, the Callout.AnchorPoint property Gets or sets the position of the callout relative to the top and left corner. It is used for positioning the control and does not alter the shape of the Callout.
UPDATE >>>
Dude!!! That's a really simple shape... just draw your own one with a Path... then you can make it any shape you want:
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<RectangleGeometry RadiusX="20" RadiusY="20" Rect="0,0,300,200">
<RectangleGeometry.Transform>
<TranslateTransform X="30" />
</RectangleGeometry.Transform>
</RectangleGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<PathGeometry>
<PathFigure StartPoint="0,30">
<LineSegment Point="50,10" />
<LineSegment Point="50,50" />
</PathFigure>
</PathGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
<Path.Effect>
<DropShadowEffect Color="Black" Opacity="0.4" Direction="-135"
ShadowDepth="10" />
</Path.Effect>
</Path>

Drawing an arrow end on a Quadratic Bezier Segment using xaml

What's the easiest way to draw an arrow at the end of a QuadraticBezierSegment? The tricky part is to get the correct rotation to mach the incoming line segment.
Any ideas on how to go about this? Should I extend PathSegment?
I've got this for drawing a simple bezier line.
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,430">
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment Point1="150,250" Point2="250,300" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>

You could define the geometry for the arrow head....but it would take trial and error to correctly orientate it on the end of the bezier curve.
Instead you could use this control and define the endcap you wanted using geometry and it properly places it on the end of the "line".
http://blogs.msdn.com/b/mrochon/archive/2011/01/10/custom-line-caps-in-wpf.aspx
<loc:CappedLine Stroke="Red" StrokeThickness="1" Canvas.Left="40" Canvas.Top="200" RenderTransformOrigin="0.5,0.5" Height="107" Width="195">
<loc:CappedLine.EndCap>
<GeometryGroup>
<LineGeometry StartPoint="0,0" EndPoint="10,10"/>
<LineGeometry StartPoint="0,0" EndPoint="10,-10"/>
</GeometryGroup>
</loc:CappedLine.EndCap>
<loc:CappedLine.LinePath>
<PathGeometry Figures="M0,0 C1,1 10.5,75.5 48.5,66.5 86.5,57.5 5,3.5000146 105.5,16.500091 157.5,29.500166 164.5,87.500505 164.5,87.500505" />
</loc:CappedLine.LinePath>
</loc:CappedLine>
<loc:CappedLine Stroke="Red" StrokeThickness="1" Canvas.Left="180" Canvas.Top="200" RenderTransformOrigin="0.5,0.5" Height="107" Width="195">
<loc:CappedLine.EndCap>
<GeometryGroup>
<LineGeometry StartPoint="0,0" EndPoint="10,10"/>
<LineGeometry StartPoint="0,0" EndPoint="10,-10"/>
</GeometryGroup>
</loc:CappedLine.EndCap>
<loc:CappedLine.LinePath>
<PathGeometry Figures="M0,0 C1,1 10.5,75.5 48.5,66.5 86.5,57.5 5,3.5000146 105.5,16.500091" />
</loc:CappedLine.LinePath>
</loc:CappedLine>

How to draw none fuzzy/blurry line in DrawingImage/DrawingContext?

See the image. I would like the middle line to be a crispy 1 pixel line.
You can copy and paste the sample markup into kaxaml .
alt text http://img832.imageshack.us/img832/1704/lines.png
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image SnapsToDevicePixels="True" Stretch="None">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Red" Thickness="1"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<LineGeometry StartPoint="0,0" EndPoint="50,0"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="1"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<LineGeometry StartPoint="0,5.860" EndPoint="50,5.860"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="1"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<LineGeometry StartPoint="0,12" EndPoint="50,12"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Page>

I found the solution at:
http://msdn.microsoft.com/en-us/library/system.windows.media.renderoptions.setedgemode.aspx
<Image Stretch="None" RenderOptions.EdgeMode="Aliased">
RenderOptions.SetEdgeMode(this, EdgeMode.Aliased);

Change the middle line to:
<LineGeometry StartPoint="0,6" EndPoint="50,6"/>
You can get a crisp line on a pixel boundary by placing the line on a whole numbered unit.

I saw a similar issue with the Border control, although #phi your solution worked in most cases I also had to add the following to get it to completely work:
SnapsToDevicePixels="True"

Resources