1

I have multiple points and I want to draw lines connecting that points with WPF, but I want to see them drawing slowly, and I need to do that programmatically, how can I do that?
Thanks.

Ruba
  • 885
  • 4
  • 18
  • 29
  • 1
    Are we talking about straigt lines or do you also need curves? For straight lines look at http://stackoverflow.com/questions/12393908/generating-animated-line/12396055#12396055 – Nico Schertler Nov 02 '12 at 16:41
  • Are these lines axis-parallel or at arbitrary angles? In the first case you can probably get away with drawing small pieces of the line for each time increment. If they have arbitrary slants things get more involved. – hmakholm left over Monica Nov 02 '12 at 16:42
  • View this link..It might help you... [Draw and move lines programatically][1] [1]: http://stackoverflow.com/questions/9698543/draw-line-and-move-it-programmatically – Rahul Ranjan Nov 02 '12 at 16:46
  • I've tried storyboard, but I didn't know how to do it from code – Ruba Nov 02 '12 at 16:49
  • @RahulRanjan I don't want to move the lines, I want them to be drawing slowly, I mean to see them being drawn – Ruba Nov 02 '12 at 16:53
  • If you create a line that goes from (x,y) to (x,y) (i.e. a dot) you should then be able to animate the end point of the line to (x',y') and that will give you a drawing effect. – Matt Burland Nov 02 '12 at 17:00
  • @MattBurland can you please tell how to do it? – Ruba Nov 02 '12 at 17:04
  • @Ruba: Have you looked at the link I posted above? It is probably exactly what you want. – Nico Schertler Nov 02 '12 at 17:07
  • @NicoSchertler I'm so sorry, I didn't notice the link, sorry again. and I think it's what I need. Thanks :) – Ruba Nov 02 '12 at 17:15
  • The main page for storyboard has a sample of code behind. http://msdn.microsoft.com/en-us/library/ms634711(v=vs.100).aspx – paparazzo Nov 02 '12 at 17:17

1 Answers1

1

You can try something like this:

<Grid>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="MouseDown">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard TargetName="MyLine">
                        <DoubleAnimation Storyboard.TargetProperty="X2" To="100" Duration="0:0:5"/>
                        <DoubleAnimation Storyboard.TargetProperty="Y2" To="100" Duration="0:0:5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Grid.Triggers>
        <Line X1="10" Y1="10" X2="20" Y2="20" Stroke="Black" Name="MyLine"/>
</Grid>

When you click on the line, you'll see it grow. You can attach starting this storyboard to whatever event or code you want, I just used a mousedown for demonstration purposes.

If you want to draw multiple lines, you can do something like this:

<Grid>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Line1" Storyboard.TargetProperty="X2" To="100" Duration="0:0:5"/>
                        <DoubleAnimation Storyboard.TargetName="Line1" Storyboard.TargetProperty="Y2" To="100" Duration="0:0:5"/>
                        <DoubleAnimation Storyboard.TargetName="Line2" Storyboard.TargetProperty="X2" To="200" Duration="0:0:5" BeginTime="0:0:5"/>
                        <DoubleAnimation Storyboard.TargetName="Line2" Storyboard.TargetProperty="Y2" To="0" Duration="0:0:5" BeginTime="0:0:5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Grid.Triggers>
        <Line X1="10" Y1="10" X2="10" Y2="10" Stroke="Black" Name="Line1"/>
    <Line X1="100" Y1="100" X2="100" Y2="100" Stroke="Black" Name="Line2"/>
</Grid>

And, of course, it's quite possible to construct these storyboards on the fly if you can't declare them ahead of time in XAML.

Matt Burland
  • 44,552
  • 18
  • 99
  • 171
  • 1
    Thank you very much, but I want to do from code, and I found my answer at this link http://stackoverflow.com/questions/12393908/generating-animated-line/12396055#12396055 – Ruba Nov 02 '12 at 17:16