Background removed frame (with multiple people), skeletal mockup with C# and WPF RRS feed

  • Question

  • Hello, 

    I am writing a bit complex application with Kinect 1.8 and WPF. First, I am using backgroundRemovedFrame to remove the background. I saw examples of how to do it with multiple users. Then, I write the removed frame (with dimensions of 640 x 480) to a writable bitmap. After that, I display the removed frames as child elements in a canvas control. So far so good. Then I try to overlay the skeletal tracking data (joint location, etc.) with mockup images, that is, for each joint, there is an associated image that I draw on top of that joint. As far as I understand, the canvas is an absolutely positioned element and it gets its size automatically from its content, right? If I use the canvas element as it is, it gets position on the top - left part of the screen with dimensions 640 x 480 pixels, since that are the dimensions of the background removed frame. In this case, skeletal overlayed images work just fine, but my removed frame is a bit small and cluttered to the top-left part of the screen. 

    The question is, how to scale my background removed <g class="gr_ gr_34 gr-alert gr_gramm gr_run_anim Grammar only-ins replaceWithoutSep" data-gr-id="34" id="34">frame</g> to the desired dimensions(preferably they should be the same as the screen width and height? Or alternatively, how to scale my canvas to the desired dimensions?

    Here are some screenshots and sample code:

    "MaskedColorImages" is the name of the canvas, that I put my background removed frames. 
    "Scene4MaleMask" is the name of the image I try to position on top of my "head" joint

      <Canvas x:Name="myCanvas" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1366" Height="
            <Canvas x:Name="MaskedColorImages" Background="Transparent"/>
            <Image x:Name="Scene4MaleMask" HorizontalAlignment="Left" VerticalAlignment="Top" Height="212" Width="178" IsManipulationEnabled="True" Source="Images/wolfHead.

    Here is the C# code that I use to write the background removed frames to a writable bitmap:

      private void BackgroundRemovedFrameReadyHandler(
                object sender,
                BackgroundRemovedColorFrameReadyEventArgs e)
                using (var backgroundRemovedFrame = e.OpenBackgroundRemovedColorFrame())
                    if (null != backgroundRemovedFrame && this.IsTracked)
                        int width = backgroundRemovedFrame.Width;
                        int height = backgroundRemovedFrame.Height;
                        WriteableBitmap foregroundBitmap = this.imageControl.Source as WriteableBitmap;
                        // If necessary, allocate new bitmap. Set it as the source of the Image control.
                        if (null == foregroundBitmap ||
                            foregroundBitmap.PixelWidth != width ||
                            foregroundBitmap.PixelHeight != height)
                            foregroundBitmap = new WriteableBitmap(
                            this.imageControl.Source = foregroundBitmap;
                        // Write the pixel data into our bitmap.
                            new Int32Rect(0, 0, width, height),
                            width * sizeof(uint),
                        // A frame has been delivered; ensure that it is visible.
                        this.imageControl.Visibility = Visibility.Visible;

    The red area is the size of the canvas that I use to draw in. I would like to resize it to take the whole screen area.

    Any suggestions area appreciated!

    • Edited by CTABPEB Monday, September 12, 2016 9:49 AM
    Tuesday, September 6, 2016 2:33 PM

All replies