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="DiagramTools.Window3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window3" Height="300" Width="300">

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

<Grid>
<!-- LEFT SIDE PANEL-->
<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>
<!-- RIGHT SIDE PANEL-->
<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>
<!-- TOP SIDE PANEL-->
<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>
<!-- BOTTOM SIDE PANEL-->
<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"
/>
</Grid>
</Grid>
</Grid>


</Window>

 

[Linda Liu[MSFT]]

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:
(e-mail address removed).

==================================================
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/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Carl Malden]

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