Make polyline appear crisp and clear in small content control (wpf)

M

moondaddy

Hi, I have 3 tiny content controls and each has a Path in it to draw some lines. These need to be very small and I'm having trouble making the lines clear. the lines have a stroke thickness of "1", but when I run the app, they become pixilated and blur out. Can someone please help me on this?

Thanks.


<Grid HorizontalAlignment="Left" Margin="10,0,0,0" Width="11" Height="33">

<Grid.RowDefinitions>

<RowDefinition Height="10" />

<RowDefinition Height="1" />

<RowDefinition Height="10" />

<RowDefinition Height="1" />

<RowDefinition Height="10" />

</Grid.RowDefinitions>

<!-- Single Line Connection-->

<ContentControl Grid.Row="0">

<Border BorderBrush="#FF016491" BorderThickness="1,1,1,1" >

<Path Stroke="Blue" StrokeThickness="1">

<Path.Data>

<PathGeometry>

<PathFigure StartPoint="2,4">

<LineSegment Point="7,4"/>

</PathFigure>

</PathGeometry>

</Path.Data>

</Path>

</Border>

</ContentControl>

<!-- One to Many Connection-->

<ContentControl Grid.Row="2">

<Border BorderBrush="#FF016491" BorderThickness="1,1,1,1" >

<Path Stroke="Blue" StrokeThickness="1">

<Path.Data>

<PathGeometry>

<PathFigure StartPoint="2,2">

<LineSegment Point="5,2"/>

<LineSegment Point="5,6"/>

<LineSegment Point="2,6"/>

</PathFigure>

<PathFigure StartPoint="5,4">

<LineSegment Point="8,4"/>

</PathFigure>

</PathGeometry>

</Path.Data>

</Path>

</Border>

</ContentControl>

<!-- Many to Many Connection-->

<ContentControl Grid.Row="4">

<Border BorderBrush="#FF016491" BorderThickness="1,1,1,1" >

<Path Stroke="Blue" StrokeThickness="1">

<Path.Data>

<PathGeometry>

<PathFigure StartPoint="0,2">

<LineSegment Point="3,2"/>

<LineSegment Point="3,6"/>

<LineSegment Point="0,6"/>

</PathFigure>

<PathFigure StartPoint="3,4">

<LineSegment Point="6,4"/>

</PathFigure>

<PathFigure StartPoint="9,2">

<LineSegment Point="6,2"/>

<LineSegment Point="6,6"/>

<LineSegment Point="9,6"/>

</PathFigure>

</PathGeometry>

</Path.Data>

</Path>

</Border>

</ContentControl>

</Grid>
 
L

Linda Liu[MSFT]

Hi Moondaddy,
the lines have a stroke thickness of "1", but when I run the app, they
Click to expand...
become pixilated and blur out.

I paste your sample code into my test project and run the application, but
I didn't see the lines blur out on my side. They are very clear.

If you change the StokeThickness property of the Path elements to 0.5, will
the lines become clear?

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.
 
L

Linda Liu[MSFT]

Hi Moondaddy,

How about the problem now?

If the problem is still not solved, please feel free to let me know.

Thank you for using our MSDN Managed Newsgroup Support Service!

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

This posting is provided "AS IS" with no warranties, and confers no rights.
 
M

moondaddy

Yes, I'm still having the problem. I'm putting the images in a canvas now
instead of in a grid which seemed to help a little bit. one thing I noticed
is that because the detail is so small, that as I resize or move the parent
container, the pixels in the image move just a very little from clear to
fuzzy and back again. I guess that the precision is just to small and the
slightest change in location effect how it can be visualized.
 
L

Linda Liu[MSFT]

Hi Moondaddy,

Thank you for your reply!

I did see the problem you described on my side.

Even though I add the SnapsToDevicePixels attribute in the Canvas element
in XAML file and set value of this attribute to true, the problem still
exists.

I will report this issue to our product team.

You can also submit a product feedback about this issue in the Microsoft
Connect web site:
http://connect.microsoft.com/VisualStudio/Feedback

Thank you for your contribution to Microsoft Product!

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

This posting is provided "AS IS" with no warranties, and confers no rights.
 
L

Linda Liu[MSFT]

Hi George,

I have report this issue to our product team and the reply is that we could
add the RenderOptions.EdgeMode="Aliased" to the top-level Grid element to
make polyline appear clear.

For example,
<Grid HorizontalAlignment="Left" Margin="10,0,0,0" Width="11" Height="33"
SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">

Hope this helps.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

This posting is provided "AS IS" with no warranties, and confers no rights.
 
M

moondaddy

Thanks that worked really good for straight lines. In one of my controls
where I used this, it had an ellipse which looked a bit goofy, but I may
replace that with an image to get around it.
 
L

Linda Liu[MSFT]

Hi George,

Thank you for your feedback and sharing with us how you solved the problem
successfully!

If you have any other questions in the future, please don't hesitate to
contact us. It's always our pleasure to be of assistance.

Have a good day!

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

This posting is provided "AS IS" with no warranties, and confers no rights.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to add a path inside of a border using c# and wpf 8
Expose Inner Control of WPF Control 0

Top