FaceTrackingBaciscWPF example - how to make facetrackingviewer scale? - wpf

Question

I am working with FaceTrackingBaciscWPF example and I wanted to change the layout of MainWindow.xaml, so that it contains 2 columns - ColorViewer with overlayed skeleton in the first one and some text fields in the second one.
When I introduce rows and columns, the colorimage scales as expected, but I don't know how to make rendered face and skeleton "fit" the color image. How to make the faceTrackingViewer scale too?
Below my MainWindow.xaml.
<Window
x:Class="FaceTrackingBasics.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:FaceTrackingBasics"
Title="Face Tracking Basics"
Closed="WindowClosed"
Height="849.925" Width="1017.761"
>
<Window.Resources>
<SolidColorBrush x:Key="MediumGreyBrush" Color="#ff6e6e6e"/>
<SolidColorBrush x:Key="KinectPurpleBrush" Color="#ff52318f"/>
<SolidColorBrush x:Key="KinectBlueBrush" Color="#ff00BCF2"/>
<Style TargetType="{x:Type Image}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
</Window.Resources>
<Grid Name="layoutGrid" Margin="10,0,-83,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0" Margin="0 0 0 20">
<Image DockPanel.Dock="Left" Source="Images\Logo.png" Stretch="Fill" Height="32" Width="81" Margin="0 10 0 5"/>
<TextBlock DockPanel.Dock="Right" Margin="0 0 -1 0" VerticalAlignment="Bottom" Foreground="{StaticResource MediumGreyBrush}" FontFamily="Segoe UI" FontSize="18">Face Tracking Basics</TextBlock>
<Image Grid.Column="1" Source="Images\Status.png" Stretch="None" HorizontalAlignment="Center" Margin="0 0 0 5"/>
</DockPanel>
<Viewbox Grid.Row="1" Stretch="Uniform" HorizontalAlignment="Center">
<Grid Name="MainGrid" Width="707" Height="417">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="500"/>
</Grid.ColumnDefinitions>
<Image Name="ColorImage" Margin="0,0,0,0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="480"/>
<local:FaceTrackingViewer Margin="0,0,0,0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" Height="480" x:Name="faceTrackingViewer"/>
<Label Content="curHeadZ" Grid.Column="1" HorizontalAlignment="Left" Margin="6,94,0,0" VerticalAlignment="Top"/>
<Label Content="curNoseZ" Grid.Column="1" HorizontalAlignment="Left" Margin="9,63,-4,0" VerticalAlignment="Top"/>
<Label Content="shiftHead" Grid.Column="1" HorizontalAlignment="Left" Margin="5,37,-1,0" VerticalAlignment="Top"/>
<Label Content="shiftNose" Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,-6,0" VerticalAlignment="Top"/>
<TextBox Name="curHeadZ" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="82,96,-130,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<TextBox Name="curNoseZ" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="79,69,-128,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<TextBox Name="shiftHeadZ" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="80,41,-130,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<TextBox Name="shiftNoseZ" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="79,13,-130,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<Label Content="pitch" Grid.Column="1" HorizontalAlignment="Left" Margin="6,125,0,0" VerticalAlignment="Top"/>
<Label Content="roll" Grid.Column="1" HorizontalAlignment="Left" Margin="6,151,0,0" VerticalAlignment="Top"/>
<Label Content="yaw" Grid.Column="1" HorizontalAlignment="Left" Margin="6,177,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="pitchValText" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="82,128,-128,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<TextBox x:Name="rollValText" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="82,156,-126,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<TextBox x:Name="yawValText" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="82,180,-124,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<Button Content="TakePicture" Grid.Column="1" HorizontalAlignment="Left" Margin="11,226,0,0" VerticalAlignment="Top" Width="75" Click="TakePictureButtonColor_Click"/>
</Grid>
</Viewbox>
</Grid>
</Window>
Probably it's something obvious that I am missing here, but I am just beginning so please help.

Answer 1

I think you need to remove the Width & Height specifiers from the XAML as follows:
<local:FaceTrackingViewer Margin="0,0,0,0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
x:Name="faceTrackingViewer"/>