473,233 Members | 1,465 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,233 software developers and data experts.

Animation to adjust position of elements. (wpf)

Below is some xaml that is a mockup of a control I'm building. It's a shape
that will be used in a diagramming tool. The red, blue and green rectangles
simulate connectors on the side of the shape and will have connection lines
attached to them. These connectors will be dynamically added and removed at
runtime, and at all times, the group of connectors need to be centered on
that side.

For example, the left side shows a group of 5 connectors where the red
(middle connector) connector is centered on the side. The purple connector
represents a new one just added by the user. Now I need some animation to
slide all the connectors down a bit so group of 6 is equally centered
between the top and bottom. Since up to this point, everything has been
created using c#, I think we would need to continue using c# to create the

Any idea how to do this?

Thank you.

<Window x:Class="DiagramTools.Window3"
Title="Window3" Height="300" Width="300">

<!--MARGIN : Left, Top, Right, Bottom -->

<Grid Margin="40,40,40,40" Background="Cornsilk" Name="myControl" >
<Grid HorizontalAlignment="Left" Width="20"
Margin="-10,10,0,10" Background="LightBlue" Name="LeftConnectorPanel">

<Rectangle Height="12" Width="20" Margin="-10,-72,0,0"
Name="rectangle6" HorizontalAlignment="Left" Stroke="Black" Fill="Purple"
<Rectangle Height="12" Width="20" Margin="-10,-48,0,0"
Name="rectangle4" HorizontalAlignment="Left" Stroke="Black" Fill="Green" />
<Rectangle Height="12" Width="20" Margin="-10,-24,0,0"
Name="rectangle2" HorizontalAlignment="Left" Stroke="Black" Fill="Blue" />
<Rectangle Height="12" Width="20" Margin="-10,0,0,0"
Name="rectangle1" HorizontalAlignment="Left" Stroke="Black" Fill="Red" />
<Rectangle Height="12" Width="20" Margin="-10,24,0,0"
Name="rectangle3" HorizontalAlignment="Left" Stroke="Black" Fill="Blue"
<Rectangle Height="12" Width="20" Margin="-10,48,0,0"
Name="rectangle5" HorizontalAlignment="Left" Stroke="Black" Fill="Green"
<Grid HorizontalAlignment="Right" Width="20" Margin="0,10,-10,
10" Background="LightBlue" Name="RightConnectorPanel">
<!--<Rectangle Height="12" Width="20" Margin="0,-48,-10,0"
Name="rectangle4a" HorizontalAlignment="Right" Stroke="Black" Fill="Green"
<Rectangle Height="12" Width="20" Margin="0,-12,-10,0"
Name="rectangle2a" HorizontalAlignment="Right" Stroke="Black" Fill="Blue"
<Rectangle Height="12" Width="20" Margin="0,12,-10,0"
Name="rectangle1a" HorizontalAlignment="Right" Stroke="Black" Fill="Red"
<!--<Rectangle Height="12" Width="20" Margin="0,24,-10,0"
Name="rectangle3a" HorizontalAlignment="Right" Stroke="Black" Fill="Blue"
<Rectangle Height="12" Width="20" Margin="0,48,-10,0"
Name="rectangle5a" HorizontalAlignment="Right" Stroke="Black" Fill="Green"
<Grid VerticalAlignment="Top" Height="20" Margin="10,-10,10,
0" Background="LightBlue" Name="TopConnectorPanel">
<Rectangle Height="20" Width="12" Margin="0,-10,48,0"
Name="rectangle4b" VerticalAlignment="Top" Stroke="Black" Fill="Green" />
<Rectangle Height="20" Width="12" Margin="0,-10,24,0"
Name="rectangle2b" VerticalAlignment="Top" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,0,0"
Name="rectangle1b" VerticalAlignment="Top" Stroke="Black" Fill="Red" />
<Rectangle Height="20" Width="12" Margin="0,-10,-24,0"
Name="rectangle3b" VerticalAlignment="Top" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,-48,0"
Name="rectangle5b" VerticalAlignment="Top" Stroke="Black" Fill="Green" />
<Grid VerticalAlignment="Bottom" Height="20"
Margin="10,-10,10, 0" Background="LightBlue" Name="Bottom">
<Rectangle Height="20" Width="12" Margin="0,-10,48,0"
Name="rectangle4c" VerticalAlignment="Bottom" Stroke="Black" Fill="Green"
<Rectangle Height="20" Width="12" Margin="0,-10,24,0"
Name="rectangle2c" VerticalAlignment="Bottom" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,0,0"
Name="rectangle1c" VerticalAlignment="Bottom" Stroke="Black" Fill="Red" />
<Rectangle Height="20" Width="12" Margin="0,-10,-24,0"
Name="rectangle3c" VerticalAlignment="Bottom" Stroke="Black" Fill="Blue"
<Rectangle Height="20" Width="12" Margin="0,-10,-48,0"
Name="rectangle5c" VerticalAlignment="Bottom" Stroke="Black" Fill="Green"

Jun 27 '08 #1
2 6804
Hi George,

Since you're going to adjust the position of elements at run time, I
suggest that you use a Canvas instead of a Grid in your WPF application. A
Canvas uses absolute positions and it is easier to explicitly position an
element within a canvas.

As for your question, before adding a new rectangle to the group, you need
to calculate the new value of the top property of each existing rectangle
and then play an animation to change the top value of each rectangle to the
new value.

For more information on WPF animations, please refer to the following

Hope this helps.
If you have any question, please feel free to let me know.

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:

Get notification to my posts through email? Please refer to

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
This posting is provided "AS IS" with no warranties, and confers no rights.
Jun 27 '08 #2
I need to build a WPF application that will display two listviews.

One will be the current Fields list, the other will be the destination.

The problem I have is I need to be able to allow users to create, drag, and drop connectors between the listviews to customize the connections between the items in the list.

Such as when a user Maps fields for database operations.

Can anyone help me with this?

Thanks in advance.

Oct 15 '08 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: Arne Nordmann | last post by:
hi, there is an animation, that animates the x-attribute of my element from 0 to 300 within 6 seconds. there a two buttons, that manipulate the dur-attribute of the animation to 3 or 9 seconds....
by: Brainless | last post by:
hi... I've recently created a dhtml thing on http://www.shapers.nl/ that animates a lot of images. The thing I want to solve is the lag that occurs when a new animation is initiated. To make...
by: Darren | last post by:
X-No-Archive Hi all, Can anyone help me with structuring the data in a small tool I have to build? I'm trying to work out if there's a design pattern or data structure that would remove some...
by: wmschneider | last post by:
I am trying to make a progress animation so that the user knows that there files are correctly being checked in. Trying to animate papers moving from the computer to the server pics. I'm brand...
by: jasonchan | last post by:
I am trying to have a function start with a timer and then switch to another function. However, it is not working at all. Anyone know whats goin on? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
by: | last post by:
Can someone point me to some good info on how to do somoe simple animation on a form. Specifically, I want to have some tiles that when they are clicked, they flip over in place and reveal a...
by: Martijn Mulder | last post by:
I am looking for a C# .NET 2.0 tutorial on animation techniques, especially the difficult subject of Invalidating() the smallest possible area on the screen and the proper way to set things up.
by: ruchitrivedi19 | last post by:
Hi, I am new to wpf. I am trying to see some animation on browser. browser is IE7. Below is my code, nothing in .cs file <Grid Height="500" Width="500"> <Canvas Height="230" Width="230"...
by: =?Utf-8?B?dmluZWV0?= | last post by:
In WPF (even with considerable improvement in version 3.5), while running multiple animations in a single window, The performance of one animation suffers a lot. for example, i have two image...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.