Several Polylines in a Viewbox using WPF

Question

I'd like to "draw" several Polylines and some Textblocks or Labels in a Viewbox in WPF.

Since a Viewbox only allows a single Child, I tried to put the Polylines inside a Canvas Element which didn't work:

XAML:

<Viewbox Stretch="Uniform">
     <Canvas Margin="10">
        <Polyline 
                        Points="{Binding Path=Points2}"
                        Stroke="Green"
                        StrokeThickness="2" >
        </Polyline>
                    <!-- other Polylines, Textblocks etc.  would go here... -->
    </Canvas>
</Viewbox>

The Polyline is correctly drawn when I use this code (i.e. I simply dropped the Canvas):

<Viewbox Stretch="Uniform">
        <Polyline 
                        Points="{Binding Path=Points2}"
                        Stroke="Green"
                        StrokeThickness="2" >
        </Polyline>
</Viewbox>

I want to visualize some geometric properties like in a very minimalistic computer geometry program like geogebra for instance. Optionally some points should be movable in a next version, but this is not essential.

Solution:

<Viewbox Stretch="Uniform">
     <Grid>
        <Polyline 
                        Points="{Binding Path=Points2}"
                        Stroke="Green"
                        StrokeThickness="4" >
        </Polyline>
        <Polyline 
                        Points="{Binding Path=Points2}"
                        Stroke="Yellow"
                        StrokeThickness="2" >
        </Polyline>
    </Grid>
</Viewbox>

This puts to identical polygons on top of each other, i.e. thin yellow on top of wide green polyline.

The answer to this stackoverflow question helped me.

score 1 · Accepted Answer · answered Jul 08 '13 at 15:24

1

The canvas doesn't really work for things like this, once you put your controls inside a canvas you ignore all layout. Can you instead put your poly lines inside a grid and use the margins to position them?

<Viewbox Stretch="Uniform">
    <Grid  Margin="10">
        <Polyline 
                    Points="{Binding Path=Points2}"
                    Stroke="Green"
                    StrokeThickness="2" >
        </Polyline>
    </Grid>
</Viewbox>

answered Jul 08 '13 at 15:24

Andy

6,366
1
32
37

How could I put them on top of each other, i.e. if I put in two identical polygons: how could they placed on identical positions? – Onur Jul 09 '13 at 06:20
How could I use "positioning" margins that should contain negative values (not allowed for margins)? – Onur Jul 09 '13 at 06:59
They should be able to sit over each other just fine if you give them the same margin and negative margin is ok too. – Andy Jul 09 '13 at 07:54
Negative Margins didn't work for me. The docs also say they must not be negative: http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.margin.aspx – Onur Jul 10 '13 at 08:52

Richard E · Answer 2 · 2013-07-08T16:08:17.037

0

The reason you can't see your Polylines is because the Canvas has a default Height and Width of 0.

Try setting the Height and Width explicitly.

<Viewbox x:Name="ViewBox" Stretch="Uniform">
    <Canvas x:Name="chartCanvas" Margin="10" Height="200" Width="300">
        <Polyline 
                Points="{Binding Path=Points2}"
                Stroke="Green"
                StrokeThickness="2">
        </Polyline>
        <!-- other Polylines, Textblocks etc.  would go here... -->
    </Canvas>
</Viewbox>

edited Jul 08 '13 at 16:08

answered Jul 08 '13 at 15:55

Richard E

4,819
1
19
25

Ok. But what should I do if I want to determine the Canvas' size automatically? The polygons will change in size and I don't know the width/height in advance. – Onur Jul 09 '13 at 06:19
You could bind the Canvas Height and Width properties to a property on your ViewModel/Model that calculates the max size when the polygons are created. – Richard E Jul 09 '13 at 07:28

Several Polylines in a Viewbox using WPF

2 Answers2