Question

I want to change the KinectSkeletonViewer control provided in the Kinect examples.
I want to expose a property to change the color of the skeleton (tracked bones).

What i need to do?

Answer 1

You’ll need to modify two files – KinectSkeleton.cs and KinectSkeletonViewer.xaml.cs. You’re creating the binding on the KinectSkeleton but, because this class is not directly referenced and called from the viewer, you also need to create a passthrough binding in KinectSkeletonViewer.

KinectSkeleton.cs – create the DependencyProperties:

public static readonly DependencyProperty TrackedJointBrushProperty =
    DependencyProperty.Register(
        "TrackedJointBursh",
        typeof(Brush),
        typeof(KinectSkeleton),
        new FrameworkPropertyMetadata(new SolidColorBrush(Color.FromArgb(255, 68, 192, 68)), FrameworkPropertyMetadataOptions.AffectsRender));

public static readonly DependencyProperty TrackedBonePenProperty =
    DependencyProperty.Register(
        "TrackedBonePen",
        typeof(Pen),
        typeof(KinectSkeleton),
        new FrameworkPropertyMetadata(new Pen(Brushes.Green, TrackedBoneThickness), FrameworkPropertyMetadataOptions.AffectsRender));

KinectSkeletonViewer – create the DependencyProperties

public static readonly DependencyProperty TrackedJointBrushProperty =
    DependencyProperty.Register(
        "TrackedJointBursh",
        typeof(Brush),
        typeof(KinectSkeletonViewer),
        new PropertyMetadata(new SolidColorBrush(Color.FromArgb(255, 68, 192, 68))));

public static readonly DependencyProperty TrackedBonePenProperty =
    DependencyProperty.Register(
        "TrackedBonePen",
        typeof(Pen),
        typeof(KinectSkeletonViewer),
        new PropertyMetadata(new Pen(Brushes.Green, TrackedBoneThickness)));

In both files define the associated properties:

public Brush TrackedJointBursh
{
    get { return (Brush)GetValue(TrackedJointBrushProperty); }
    set { SetValue(TrackedJointBrushProperty, value); }
}

public Pen TrackedBonePen
{
    get { return (Pen)GetValue(TrackedBonePenProperty); }
    set { SetValue(TrackedBonePenProperty, value); }
}

Now you want to link the binding. In the OnLoad event of KinectSkeletonViewer –

var trackedJointBrush = new Binding("TrackedJointBrush");
trackedJointBrush.Source = this;
skeletonCanvas.SetBinding(KinectSkeleton.TrackedJointBrushProperty, trackedJointBrush);

var trackedBonePen = new Binding("TrackedBonePen");
trackedBonePen.Source = this;
skeletonCanvas.SetBinding(KinectSkeleton.TrackedBonePenProperty, trackedBonePen);

Finally, you need to look through KinectSkeleton.cs and replace reference of the hard coded colors with the new properties. trackedJointBrush and trackedBonePen in the case of the above examples – replaced with TrackedJointBrush and TrackedBonePen (note case). You can then comment out the hard coded variables.

You should now be able to bind those two properties in the KinectSkeletonViewer when you declare it in XAML.

There are a few other colors defined in the KinectSkeleton class. You can use the same concept as above to bind them as well.