WPF Grid ellipse overlay position

Question

Sor far I have:

<Grid x:Name="MainLibraryGrid">
    <TabControl Name="TabControl1" TabStripPlacement="Bottom">
        <TabItem Header="300s">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <!-- The Library-items -->
                <ListView x:Name="libraryItemsCol1" 
                          Grid.Column="0"
                          HorizontalAlignment="Center"   
                          Margin="10" 
                          VerticalAlignment="Center"
                          ItemContainerStyle="{StaticResource LibraryItemButton}" />
                <ListView x:Name="libraryItemsCol2" 
                          Grid.Column="1"
                          HorizontalAlignment="Center"   
                          Margin="10" 
                          VerticalAlignment="Center"
                          ItemContainerStyle="{StaticResource LibraryItemButton}" />
                <ListView x:Name="libraryItemsCol3" 
                          Grid.Column="2"
                          HorizontalAlignment="Center"
                          Margin="10" 
                          VerticalAlignment="Center"
                          ItemContainerStyle="{StaticResource LibraryItemButton}" />
            </Grid>
        </TabItem>
    </TabControl>
</Grid>

I'm trying to place an ellipse in the absolutly in the position of any of the ListViewItems clicked, but can't work out the best way to do this. The idea is to have an ellipse appear and then animate it moving to the bottom right corner of the screen, over the top of the rest of the content. Should I use a canvas overlay or something? I'm not really sure where to start!

Thanks very much, Becky

Answer 1

Rather than using a canvas overlay, why not wrap the "MainLibraryGrid" in a canvas? Then you can programmatically add ellipses to the Canvas, set the Z-Index (using the Canvas.SetZIndex() static method), and then animate their position to be over the ListViewItems that you want them to cover (or anywhere else for that matter).

<Canvas Name="GridWrapper">
 <Grid>
  <ListView ... />
  <ListView ... />
 </Grid>
</Canvas>

The easiest way to get the coordinates for the click (relative to the canvas) would be to handle one of the Mouse events, i.e., MouseLeftButtonDown or MouseLeftButtonUp. Using the MouseEventArgs.GetPostion method, and passing in the Canvas as the argument will give you a Point that corresponds to the exact position of the mouse click relative to the enclosing canvas. Then you can add your ellipse to the canvas and use the Canvas.SetLeft & Canvas.SetTop static methods to position the ellipse in the Canvas.

I hope that helps.