Silverlight 3.0 Custom Cursor in Chart

Question

Hello All,

I'm probably overlooking something that will be obvious when I see the solution, but for now...

I am attempting to use a custom cursor inside the chart area of a Toolkit chart. I have created a ControlTemplate for the chart, and a grid to contain the cursors. I show/hide the cursors, and attempt to move the containing Grid, using various Mouse events. The cursor is being displayed at the correct times, but I cannot get it to move to the correct position.

Here is the ControlTemplate (the funky colors are just attempts to confirm what the different pieces of the template pertain to):

        <dataVisTK:Title Content="{TemplateBinding Title}"
                         Style="{TemplateBinding TitleStyle}"/>

        <Grid Grid.Row="1">

            <!-- Remove the Legend -->
            <!--<dataVisTK:Legend
        x:Name="Legend"
        Title="{TemplateBinding LegendTitle}"
        Style="{TemplateBinding LegendStyle}"
        Grid.Column="1"/>-->


            <chartingPrimitivesTK:EdgePanel x:Name="ChartArea" 
                                            Background="#EDAEAE"
                                            Style="{TemplateBinding ChartAreaStyle}"
                                            Grid.Column="0">
                <Grid Canvas.ZIndex="-1" 
                      Background="#2008AE"
                      Style="{TemplateBinding PlotAreaStyle}">
                </Grid>
                <Border Canvas.ZIndex="1" 
                        BorderBrush="#FF250010" 
                        BorderThickness="3" />

                <Grid x:Name="gridHandCursors" 
                      Canvas.ZIndex="5"
                      Width="32" Height="32"
                      Visibility="Collapsed">
                    <Image x:Name="cursorGrab" Width="32"
                           Source="Resources/grab.png" />
                    <Image x:Name="cursorGrabbing" Width="32"
                           Source="Resources/grabbing.png"
                           Visibility="Collapsed"/>
                </Grid>

            </chartingPrimitivesTK:EdgePanel>
        </Grid>                            
    </Grid>
</Border>

and here are the mouse events (in particular, the MouseMove):

void TimelineChart_Loaded(object sender, RoutedEventArgs e)
{
    chartTimeline.UpdateLayout();

    List<FrameworkElement> chartChildren = GetLogicalChildrenBreadthFirst(chartTimeline).ToList();

    mChartArea =
        chartChildren.Where(element => element.Name.Equals("ChartArea")).FirstOrDefault() as Panel;

    if (mChartArea != null)
    {
        grabCursor = chartChildren.Where(element => element.Name.Equals("cursorGrab")).FirstOrDefault() as Image;
        grabbingCursor = chartChildren.Where(element => element.Name.Equals("cursorGrabbing")).FirstOrDefault() as Image;

        mGridHandCursors =
            chartChildren.Where(element => element.Name.Equals("gridHandCursors")).FirstOrDefault() as Grid;

        mChartArea.Cursor = Cursors.None;
        mChartArea.MouseMove += new MouseEventHandler(mChartArea_MouseMove);
        mChartArea.MouseLeftButtonDown += new MouseButtonEventHandler(mChartArea_MouseLeftButtonDown);
        mChartArea.MouseLeftButtonUp += new MouseButtonEventHandler(mChartArea_MouseLeftButtonUp);
        if (mGridHandCursors != null)
        {
            mChartArea.MouseEnter += (s, e2) => 
                mGridHandCursors.Visibility = Visibility.Visible;
            mChartArea.MouseLeave += (s, e2) => 
                mGridHandCursors.Visibility = Visibility.Collapsed;
        }
    }
}

void mChartArea_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{            
    if (grabCursor != null)
        grabCursor.Visibility = Visibility.Visible;
    if (grabbingCursor != null)
        grabbingCursor.Visibility = Visibility.Collapsed;
}

void mChartArea_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (grabCursor != null)
        grabCursor.Visibility = Visibility.Collapsed;
    if (grabbingCursor != null)
        grabbingCursor.Visibility = Visibility.Visible;
}

void mChartArea_MouseMove(object sender, MouseEventArgs e)
{
    if (mGridHandCursors != null)
    {
        Point pt = e.GetPosition(null);
        mGridHandCursors.SetValue(Canvas.LeftProperty, pt.X);
        mGridHandCursors.SetValue(Canvas.TopProperty, pt.Y);
    }
}

Any help past this roadblock would be greatly appreciated!

Thanks, wTs

Answer 1

I have one thing that works (surrounding it with a Canvas), but I'd be open to other, less-code-smell alternatives.

<Canvas Canvas.ZIndex="5">
    <Grid x:Name="gridHandCursors" 
          Width="32" Height="32"
          Visibility="Collapsed">
        <Image x:Name="cursorGrab" Width="32"
               Source="Resources/grab.png" />
        <Image x:Name="cursorGrabbing" Width="32"
               Source="Resources/grabbing.png"
               Visibility="Collapsed"/>
    </Grid>
</Canvas>