Animation to adjust position of elements. (wpf)

[moondaddy]

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
animation.



Any idea how to do this?



Thank you.




<Window x:Class="Diagra mTools.Window3"
xmlns="http://schemas.microso ft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microso ft.com/winfx/2006/xaml"
Title="Window3" Height="300" Width="300">

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

<Grid>
<!-- LEFT SIDE PANEL-->
<Grid Margin="40,40,4 0,40" Background="Cor nsilk" Name="myControl " >
<Grid HorizontalAlign ment="Left" Width="20"
Margin="-10,10,0,10" Background="Lig htBlue" Name="LeftConne ctorPanel">

<Rectangle Height="12" Width="20" Margin="-10,-72,0,0"
Name="rectangle 6" HorizontalAlign ment="Left" Stroke="Black" Fill="Purple"
/>
<Rectangle Height="12" Width="20" Margin="-10,-48,0,0"
Name="rectangle 4" HorizontalAlign ment="Left" Stroke="Black" Fill="Green" />
<Rectangle Height="12" Width="20" Margin="-10,-24,0,0"
Name="rectangle 2" HorizontalAlign ment="Left" Stroke="Black" Fill="Blue" />
<Rectangle Height="12" Width="20" Margin="-10,0,0,0"
Name="rectangle 1" HorizontalAlign ment="Left" Stroke="Black" Fill="Red" />
<Rectangle Height="12" Width="20" Margin="-10,24,0,0"
Name="rectangle 3" HorizontalAlign ment="Left" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="12" Width="20" Margin="-10,48,0,0"
Name="rectangle 5" HorizontalAlign ment="Left" Stroke="Black" Fill="Green"
/>
</Grid>
<!-- RIGHT SIDE PANEL-->
<Grid HorizontalAlign ment="Right" Width="20" Margin="0,10,-10,
10" Background="Lig htBlue" Name="RightConn ectorPanel">
<!--<Rectangle Height="12" Width="20" Margin="0,-48,-10,0"
Name="rectangle 4a" HorizontalAlign ment="Right" Stroke="Black" Fill="Green"
/>-->
<Rectangle Height="12" Width="20" Margin="0,-12,-10,0"
Name="rectangle 2a" HorizontalAlign ment="Right" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="12" Width="20" Margin="0,12,-10,0"
Name="rectangle 1a" HorizontalAlign ment="Right" Stroke="Black" Fill="Red"
/>
<!--<Rectangle Height="12" Width="20" Margin="0,24,-10,0"
Name="rectangle 3a" HorizontalAlign ment="Right" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="12" Width="20" Margin="0,48,-10,0"
Name="rectangle 5a" HorizontalAlign ment="Right" Stroke="Black" Fill="Green"
/>-->
</Grid>
<!-- TOP SIDE PANEL-->
<Grid VerticalAlignme nt="Top" Height="20" Margin="10,-10,10,
0" Background="Lig htBlue" Name="TopConnec torPanel">
<Rectangle Height="20" Width="12" Margin="0,-10,48,0"
Name="rectangle 4b" VerticalAlignme nt="Top" Stroke="Black" Fill="Green" />
<Rectangle Height="20" Width="12" Margin="0,-10,24,0"
Name="rectangle 2b" VerticalAlignme nt="Top" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,0,0"
Name="rectangle 1b" VerticalAlignme nt="Top" Stroke="Black" Fill="Red" />
<Rectangle Height="20" Width="12" Margin="0,-10,-24,0"
Name="rectangle 3b" VerticalAlignme nt="Top" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,-48,0"
Name="rectangle 5b" VerticalAlignme nt="Top" Stroke="Black" Fill="Green" />
</Grid>
<!-- BOTTOM SIDE PANEL-->
<Grid VerticalAlignme nt="Bottom" Height="20"
Margin="10,-10,10, 0" Background="Lig htBlue" Name="Bottom">
<Rectangle Height="20" Width="12" Margin="0,-10,48,0"
Name="rectangle 4c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Green"
/>
<Rectangle Height="20" Width="12" Margin="0,-10,24,0"
Name="rectangle 2c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,0,0"
Name="rectangle 1c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Red" />
<Rectangle Height="20" Width="12" Margin="0,-10,-24,0"
Name="rectangle 3c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="20" Width="12" Margin="0,-10,-48,0"
Name="rectangle 5c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Green"
/>
</Grid>
</Grid>
</Grid>


</Window>




--
moondaddy@newsg roup.nospam

[Linda Liu[MSFT]]

RE: Animation to adjust position of elements. (wpf)

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
articles:

http://www.microsoft.com/emea/msdn/ThePanel/en/articles/animations_wpf.aspx

http://dotnetslackers.com/articles/wpf/IntroductionToWPFAnimations.aspx

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

Sincerely,
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:
msdnmg@microsof t.com.

=============== =============== =============== =====
Get notification to my posts through email? Please refer to

http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif

ications.

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
http://msdn.microsoft.com/subscripti...t/default.aspx.
=============== =============== =============== =====
This posting is provided "AS IS" with no warranties, and confers no rights.

[Carl Malden]

Listviews with connectors between items

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.

Carl