Silverlight - Epic Graphical Fail (rectangle by tw

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?

Answer 1

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>

Answer 2

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>

Answer 3

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