Silverlight - Epic Graphical Fail (rectangle by two triangles) :(

Question

I want to draw rectangle by two triangles. Very simple task. But Silverlight can't handle it.

<Grid x:Name="LayoutRoot" UseLayoutRounding="False" Background="White">
    <Polygon Fill="Black">
        <Polygon.Points>
            <Point X="10" Y="100"/>
            <Point X="100" Y="10"/>
            <Point X="100" Y="100"/>
        </Polygon.Points>
    </Polygon>
    <Polygon Fill="Black">
        <Polygon.Points>
            <Point X="10" Y="10"/>
            <Point X="100" Y="10"/>
            <Point X="10" Y="100"/>
        </Polygon.Points>
    </Polygon>

</Grid>

Logicly i have to see a rectangle when i compile this code. If you try to use this code you will see the rectangle but you will have an annoing white line in it...

So i whant to know.. is there a way to draw rectangle (that will look like rectangle) by two triangles in Silverlight?

SergioL · Accepted Answer · 2011-03-22T19:57:43.220

This is a little verbose in Xaml, but if you're creating the triangles programatically it shouldn't matter, how about something like this:

<Canvas Background="#FFF9B15A" Width="200" Height="110" VerticalAlignment="Top" HorizontalAlignment="Left">
    <Path Fill="Black" StrokeThickness="0">
        <Path.Data>
            <GeometryGroup>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure IsClosed="True" StartPoint="10,10">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                        <LineSegment Point="100,10" />
                                        <LineSegment Point="10, 100" />
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure IsClosed="True" StartPoint="10,100">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                        <LineSegment Point="100,10" />
                                        <LineSegment Point="100, 100" />
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </GeometryGroup>
        </Path.Data>    
    </Path>
</Canvas>

This way you're really compositing a single element, the Path, with triangles. The way you've shown creates separate elements and each are going to be anti-aliased individually.

Hope that helps.

Sergio

this is exacly what i looking for :) tnx a lot – obenjiro Feb 05 '11 at 05:33 — obenjiro, Feb 05 '11 at 05:33

Snowbear · Answer 2 · 2011-02-01T13:20:31.907

2

Have you checked Stroke and StrokeThickness properties? I'm not sure they have by default values which will allow you to draw a rectangle without any space between triangles.

UPDATE will this help you?

<Grid x:Name="LayoutRoot" UseLayoutRounding="False" Background="White">
    <Polygon Fill="Black" Stroke="Black">
        <Polygon.Points>
            <Point X="10" Y="100"/>
            <Point X="100" Y="10"/>
            <Point X="100" Y="100"/>
        </Polygon.Points>
    </Polygon>
    <Polygon Fill="Black" Stroke="Black">
        <Polygon.Points>
            <Point X="10" Y="10"/>
            <Point X="10" Y="100"/>
            <Point X="100" Y="10"/>
        </Polygon.Points>
    </Polygon>
</Grid>

edited Feb 01 '11 at 13:20

answered Jan 31 '11 at 16:41

Snowbear

16,924
3
43
67

Did you see in this code that i set Stroke or StrokeThickness? Then it means that i use default values for this properties. just try this code.. – obenjiro Jan 31 '11 at 18:15
it helps, but this is not what i looking for. I don't want to use Stroke property... – obenjiro Feb 01 '11 at 20:06

Mike Blandford · Answer 3 · 2011-01-31T17:16:46.670

Add .5 to the points on the connecting side. Silverlight is a little wierd about edges. Look at the edges of the rectangle and see if they look grey or solid black. You might have to adjust some .5's to fix that too.

<Grid x:Name="LayoutRoot" UseLayoutRounding="False" Background="White">
    <Polygon Fill="Black">
        <Polygon.Points>
            <Point X="10" Y="100"/>
            <Point X="100" Y="10"/>
            <Point X="100" Y="100"/>
        </Polygon.Points>
    </Polygon>
    <Polygon Fill="Black">
        <Polygon.Points>
            <Point X="10" Y="10"/>
            <Point X="100.5" Y="10.5"/>
            <Point X="10.5" Y="100.5"/>
        </Polygon.Points>
    </Polygon>

</Grid>

hmmm... and how i can tell where to add 0.5 if i creating those triangles from code? — obenjiro, Jan 31 '11 at 18:19

Silverlight - Epic Graphical Fail (rectangle by two triangles) :(

3 Answers3

Linked