Overlapping Grids inside a Tab - wpf

I have two grids inside a TabItem and in the code-behind I want to be able to add controls to both grids and have all the controls visible at run-time. Currently at run-time the controls added to "Grid3" are not visible while he controls added to "Grid4" are visible.
The overlapping grids have the same rows but a different set of columns.
I'm trying to do this with two grids so that I can vary the number of controls I can add per row in the code-behind by adding the controls to one of the two grids.
Here's the XML:
<Grid Name="TabControlGrid" Margin="20,171,0,70">
<TabControl >
<TabItem Header="Tab1" >
<Grid Name="InnerTabControlGrid">
<!--Start Grid3-->
<Grid Name="Grid3" Background="#FFE3EFFF" Height="188">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="98*" />
<ColumnDefinition Width="296*" />
<ColumnDefinition Width="88*" />
<ColumnDefinition Width="327*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="30*" />
</Grid.RowDefinitions>
<Grid Name="InnerGrid3" Grid.ColumnSpan="4" Grid.RowSpan="8" VerticalAlignment="Top" HorizontalAlignment="Left" Width="807">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="TextBlock1" Text="Row 1, Col 1" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,35,0,0" Name="TextBlock2" Text="Row 2, Col 1" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,60,0,0" Name="TextBlock3" Text="Row 3, Col 1" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,85,0,0" Name="TextBlock4" Text="Row 4, Col 1" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,110,0,0" Name="TextBlock5" Text="Row 5, Col 1" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,135,0,0" Name="TextBlock6" Text="Row 6, Col 1" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,160,0,0" Name="TextBlock7" Text="Row 7, Col 1" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="405,10,0,0" Name="TextBlock8" Text="Row 1, Col 2" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="405,35,0,0" Name="TextBlock9" Text="Row 2, Col 2" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="405,60,0,0" Name="TextBlock10" Text="Row 3, Col 2" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="405,85,0,0" Name="TextBlock11" Text="Row 4, Col 2" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="405,110,0,0" Name="TextBlock12" Text="Row 5, Col 2" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="403,135,0,0" Name="TextBlock13" Text="Row 6, Col 2:" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="403,160,0,0" Name="TextBlock14" Text="Row 7, Col 2" VerticalAlignment="Top" Width="71" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="98,11,0,0" Name="ComboBox9" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="479,10,0,0" Name="ComboBox10" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="98,35,0,0" Name="ComboBox11" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="479,35,0,0" Name="ComboBox12" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="98,60,0,0" Name="ComboBox13" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="479,60,0,0" Name="ComboBox14" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="98,85,0,0" Name="ComboBox15" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="479,85,0,0" Name="ComboBox16" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="98,110,0,0" Name="ComboBox17" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="479,111,0,0" Name="ComboBox18" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="98,135,0,0" Name="ComboBox19" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="479,136,0,0" Name="ComboBox20" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="98,160,0,0" Name="ComboBox21" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="479,160,0,0" Name="ComboBox22" VerticalAlignment="Top" Width="291" Visibility="Collapsed"/>
</Grid>
</Grid>
<!--End Grid3-->
<Grid Name="Grid4" Background="#FFE3EFFF">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="97*" />
<ColumnDefinition Width="102*" />
<ColumnDefinition Width="91*" />
<ColumnDefinition Width="102*" />
<ColumnDefinition Width="87*" />
<ColumnDefinition Width="102*" />
<ColumnDefinition Width="99*" />
<ColumnDefinition Width="125*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="26*" />
<RowDefinition Height="30*" />
</Grid.RowDefinitions>
<Grid Name="InnerGrid4" Grid.ColumnSpan="8" Grid.RowSpan="8" VerticalAlignment="Top" HorizontalAlignment="Left" Width="803" Height="193">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="TextBlock15" Text="Row 1, Col 1" VerticalAlignment="Top" Width="73" Visibility="Collapsed" />
<TextBox BorderBrush="#FF898C95" Height="23" HorizontalAlignment="Left" Margin="98,11,0,0" Name="TextBox13a" VerticalAlignment="Top" Width="100" Visibility="Collapsed" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="210,10,0,0" Name="TextBlock16" Text="Row 1, Col 2" VerticalAlignment="Top" Width="73" Visibility="Collapsed" />
<TextBox BorderBrush="#FF898C95" Height="23" HorizontalAlignment="Left" Margin="289,11,0,0" Name="TextBox14a" VerticalAlignment="Top" Width="100" Visibility="Collapsed" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="410,12,0,0" Name="TextBlock17" Text="Row 1, Col 3" VerticalAlignment="Top" Width="67" Visibility="Collapsed" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="479,10,0,0" Name="ComboBox23" VerticalAlignment="Top" Width="100" Visibility="Collapsed" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="600,14,0,0" Name="TextBlock18" Text="Row 1, Col 4" VerticalAlignment="Top" Width="71" Visibility="Collapsed" />
<TextBox BorderBrush="#FF898C95" Height="23" HorizontalAlignment="Left" Margin="680,11,0,0" Name="TextBox18a" VerticalAlignment="Top" Width="100" Visibility="Collapsed" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,35,0,0" Name="TextBlock19" Text="Row 2, Col 1" VerticalAlignment="Top" Visibility="Collapsed" Width="73" />
<TextBox BorderBrush="#FF898C95" Height="23" HorizontalAlignment="Left" Margin="98,36,0,0" Name="TextBox1" VerticalAlignment="Top" Visibility="Collapsed" Width="100" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="210,35,0,0" Name="TextBlock20" Text="Row 2, Col 2" VerticalAlignment="Top" Visibility="Collapsed" Width="73" />
<TextBox BorderBrush="#FF898C95" Height="23" HorizontalAlignment="Left" Margin="289,36,0,0" Name="TextBox2" VerticalAlignment="Top" Visibility="Collapsed" Width="100" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="410,37,0,0" Name="TextBlock21" Text="Row 2, Col 3" VerticalAlignment="Top" Visibility="Collapsed" Width="67" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="479,35,0,0" Name="ComboBox24" VerticalAlignment="Top" Visibility="Collapsed" Width="100" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="600,39,0,0" Name="TextBlock22" Text="Row 2, Col 4" VerticalAlignment="Top" Visibility="Collapsed" Width="71" />
<TextBox BorderBrush="#FF898C95" Height="23" HorizontalAlignment="Left" Margin="680,36,0,0" Name="TextBox3" VerticalAlignment="Top" Visibility="Collapsed" Width="100" />
</Grid>
</Grid>
</Grid>
</TabItem>
<TabItem Header="Tab2" >
</TabItem>
</TabControl>
</Grid>
The controls in the XML are just place holders for the controls I am adding to the grids in the code-behind.
If anyone can suggest a solution I'd appreciate it.
Thanks!
-mg

Remove the background from the grid. You can not see through a solid color.

Your InnerTabControlGrid does not define any Row or Column Definitions, so both child grids are placed on top of each other in a single grid cell.
Change InnerTabControlGrid to a DockPanel or a UniformGrid, or give it some Grid.ColumnDefinitions or Grid.RowDefinitions and assign your child grid's Grid.Column or Grid.Row

Related

Orientation of WPF status bar and label are in wrong place when the window is maximised

In my serial port WPF application , the labels (BaudRate,Parity,DataBits and stopBit) and the StatusBar (for displaying PortStatus) are in wrong place when I maximise the window.
I would like to have suggestion from expertise to resolve my issue.
So please let me know if I can make any changes/edit on my xaml file to have these orientation on the same place as it is in Normal window mode.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SerialReadAndWrite"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="ATR220ReadAndWrite.MainWindow"
mc:Ignorable="d"
Title="ATR220ReadAndWrite" Height="450" Width="800">
<Grid Margin="0,0,-71,-107">
<ComboBox x:Name="ComPortComboBox" HorizontalAlignment="Left" Height="14" Margin="115,20,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="ComPort_SelectionChanged" DropDownOpened="ComPort_DropDownOpened" VerticalContentAlignment="Stretch" IsSynchronizedWithCurrentItem="False" FontSize="9" FontFamily="Arial"/>
<Label Content="PortNumber :" HorizontalAlignment="Left" Margin="21,14,0,0" VerticalAlignment="Top"/>
<Label Content="PortSettings :" HorizontalAlignment="Left" Margin="21,58,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.546,3.143" FontSize="10" FontFamily="Arial"/>
<Image HorizontalAlignment="Left" Height="26" Margin="359,14,0,0" VerticalAlignment="Top" Width="29" RenderTransformOrigin="-0.23,0.36"/>
<ComboBox x:Name="BaudRateComboBox" HorizontalAlignment="Left" Margin="115,84,0,0" VerticalAlignment="Top" Width="98" Height="17" SelectionChanged="BaudRate_SelectionChanged" IsEnabled="False" IsReadOnly="True" FontSize="9" FontFamily="Arial">
<System:String>115200</System:String>
<System:String>57600</System:String>
<System:String>38400</System:String>
<System:String>19200</System:String>
<System:String>14400</System:String>
<System:String>9600</System:String>
<System:String>4800</System:String>
</ComboBox>
<ComboBox x:Name="ParityComboBox" HorizontalAlignment="Left" Height="17" Margin="308,86,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="Parity_SelectionChanged" IsEnabled="False" FontSize="9" FontFamily="Arial">
<System:String>Even</System:String>
<System:String>Mark</System:String>
<System:String>None</System:String>
<System:String>Odd</System:String>
<System:String>Space</System:String>
</ComboBox>
<ComboBox x:Name="DataBitsComboBox" HorizontalAlignment="Left" Height="17" Margin="115,125,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="DataBits_SelectionChanged" IsEnabled="False" FontSize="8" FontFamily="Arial">
<System:String>5</System:String>
<System:String>6</System:String>
<System:String>7</System:String>
<System:String>8</System:String>
</ComboBox>
<ComboBox x:Name="StopBitsComboBox" HorizontalAlignment="Left" Height="17" Margin="308,123,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="StopBits_SelectionChanged" IsEnabled="False" FontSize="10" FontFamily="Arial">
<System:String>One</System:String>
<System:String>Two</System:String>
<System:String>OnePointFive</System:String>
</ComboBox>
<Label Content="Baudrate :" HorizontalAlignment="Center" Margin="47,81,753,423" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="22" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10" FontStyle="Italic" Width="63"/>
<Label Content="Parity :" HorizontalAlignment="Center" Margin="234,81,573,423" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="22" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10" FontStyle="Italic" Width="56"/>
<Label Content="DataBits :" HorizontalAlignment="Center" Margin="48,123,753,382" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="22" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10" FontStyle="Italic" Width="62"/>
<Label Content="StopBit :" HorizontalAlignment="Center" Margin="238,123,567,382" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="22" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="10" FontStyle="Italic" Width="58"/>
<Button x:Name="ConnectButton" Content="Connect" HorizontalAlignment="Left" Margin="308,20,0,0" VerticalAlignment="Top" Width="75" Click="ConnectButton_Click" IsEnabled="False" Height="14" FontSize="10" FontFamily="Arial"/>
<Label Content="ProtocolCustomWndow :" HorizontalAlignment="Left" Margin="21,172,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.546,3.143" FontSize="10" FontFamily="Arial"/>
<ComboBox x:Name="ProtocolTypeComboBox" HorizontalAlignment="Left" Height="14" Margin="141,177,0,0" VerticalAlignment="Top" Width="98" SelectionChanged="ProtocolTypeComboBox_SelectionChanged" VerticalContentAlignment="Stretch" IsReadOnly="True" IsSynchronizedWithCurrentItem="True" FontSize="9" FontFamily="Arial" IsEnabled="False">
<System:String>WLink</System:String>
</ComboBox>
***<StatusBar HorizontalAlignment="Left" Height="28" Margin="0,396,0,0" VerticalAlignment="Top" Width="794">
<StatusBarItem FontSize="9" FontFamily="Arial" TextOptions.TextHintingMode="Fixed">
<TextBlock Name= "PortStatus"/>
</StatusBarItem>
</StatusBar>***
</Grid>
</Window>
Images of the correct and wrong pics are attached.
wrong position
Wrong Position
Correct position
Correct position
Try something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="PortNumber :" HorizontalAlignment="Center"/>
<ComboBox FontSize="9" FontFamily="Arial" Grid.Column="1">
<ComboBoxItem IsSelected="True">COM 3</ComboBoxItem>
</ComboBox>
<Button Content="Connect" Grid.Row="0" Grid.Column="3"></Button>
<TextBlock Text="PortSettings :" FontSize="10" FontFamily="Arial" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="Baudrate :" FontStyle="Italic" Grid.Row="2" HorizontalAlignment="Center"/>
<ComboBox IsEnabled="False" IsReadOnly="True" FontSize="9" FontFamily="Arial" Grid.Row="2" Grid.Column="1">
<System:String>115200</System:String>
<System:String>57600</System:String>
<System:String>38400</System:String>
<System:String>19200</System:String>
<System:String>14400</System:String>
<System:String>9600</System:String>
<System:String>4800</System:String>
</ComboBox>
<TextBlock Text="Parity :" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Center"/>
<ComboBox Grid.Row="2" Grid.Column="3"/>
</Grid>
Pay special attention to use of Grid.Row and Grid.Column, you will need to set the Horizontal Alignment on these elements but this will show you how to position things in WPF.

Textbox Border Not Showing - WPF

The textbox top and bottom border is not showing.
I have provided the entire XAML code for the main window. I have tried increasing the BorderThickness and also changed the BorderBrush. That did not work.
XAML:
<Window x:Class="WpfApplication6.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication6"
mc:Ignorable="d"
Title="Activation Window" Height="300" Width="518.797">
<Grid>
<TextBox x:Name="txtFirstDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="23,171,0,76" BorderThickness="1" BorderBrush="Black" />
<TextBox x:Name="txtSecondDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="81,171,0,76"/>
<TextBox x:Name="txtThirdDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="138,171,0,76"/>
<TextBox x:Name="txtFourthDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="195,171,0,76"/>
<TextBox x:Name="txtFifthDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="252,171,0,76"/>
<Label x:Name="label" Content="Product key:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="23,142,0,0"/>
<TextBox x:Name="txtFirstDigit_Copy" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="274" Margin="23,111,0,136" />
<Label x:Name="label_Copy" Content="Email:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="23,81,0,0"/>
<TextBox x:Name="txtFirstDigit_Copy1" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="130" Margin="23,55,0,192" />
<Label x:Name="label_Copy1" Content="First Name:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="23,25,0,0"/>
<TextBox x:Name="txtFirstDigit_Copy2" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="130" Margin="167,55,0,192" />
<Button x:Name="button" Content="Next" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="142,220,0,0"/>
<Button x:Name="button1" Content="Cancel" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="222,220,0,0" Click="button1_Click"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Margin="350,147,0,0"/>
</Grid>
</Window>
I'd try something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="label_Copy1" Grid.Row="0" Content="First Name:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="23,0,0,0" />
<StackPanel Orientation="Horizontal" Grid.Row="1">
<TextBox x:Name="txtFirstDigit_Copy1" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="130" Margin="23,0,0,0" />
<TextBox x:Name="txtFirstDigit_Copy2" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="130" Margin="11.5,0,0,0" />
</StackPanel>
<Label x:Name="label_Copy" Grid.Row="2" Content="Email:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="23,0,0,0" />
<TextBox x:Name="txtFirstDigit_Copy" Grid.Row="3" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="270" Margin="23,0,0,0" />
<Label x:Name="label" Grid.Row="4" Content="Product key:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="23,0,0,0" />
<StackPanel Orientation="Horizontal" Grid.Row="5">
<TextBox x:Name="txtFirstDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="23,0,0,0" BorderThickness="1" />
<TextBox x:Name="txtSecondDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="11.5,0,0,0" />
<TextBox x:Name="txtThirdDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="11.5,0,0,0" />
<TextBox x:Name="txtFourthDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="11.5,0,0,0" />
<TextBox x:Name="txtFifthDigit" HorizontalAlignment="Left" Height="22" TextWrapping="Wrap" VerticalAlignment="Center" Width="45" Margin="11.5,0,0,0" />
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="6">
<Button x:Name="button" Content="Next" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="132,0,0,0" />
<Button x:Name="button1" Content="Cancel" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="11.5,0,0,0" />
</StackPanel>
</Grid>

How to move window controls inside a TabItem in TabControl?

I've added a TabControl to my window in a WPF application, but I'm not sure how to re-position the TabControl so that all the other controls (buttons, textboxes, labels, data grid) are inside the General tab item.
I tried placing all my controls inside the TabItem element for the General Header, within a grid but I got a host of errors: http://hastebin.com/isenokidev.xml
Does anyone know how define this in XAML?
This is the xaml definition for the window with all the controls outside of the TabControl. I'm wondering how I can place them(in the same layout) within the general tab:
<Window x:Class="MongoDBApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="800"
Height="500">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height=".50*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.25*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width=".50*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width=".75*" />
</Grid.ColumnDefinitions>
<TabControl>
<TabItem Header="General">
</TabItem>
<TabItem Header="Security" />
<TabItem Header="Details" />
</TabControl>
<DataGrid Name="infogrid"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="3"
Grid.ColumnSpan="4"
Width="356"
HorizontalAlignment="Left"
AutoGenerateColumns="True" />
<Label Grid.Row="4"
Grid.Column="3"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="First Name:" />
<TextBox Grid.Row="4"
Grid.Column="4"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Label Grid.Row="5"
Grid.Column="3"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Last Name:" />
<TextBox Grid.Row="5"
Grid.Column="4"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Label Grid.Row="6"
Grid.Column="3"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Department" />
<TextBox Grid.Row="6"
Grid.Column="4"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Button x:Name="saveBtn"
Grid.Row="7"
Grid.Column="3"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Save" />
<Button x:Name="updateBtn"
Grid.Row="7"
Grid.Column="4"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Update" />
<Button x:Name="deleteBtn"
Grid.Row="7"
Grid.Column="5"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Delete" />
</Grid>
</Window>
For all your controls to be in the General tab item, they need to be defined in it. I'm not sure why you were getting errors earlier, but this works fine:
<Grid>
<TabControl>
<TabItem Header="General">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height=".50*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width=".75*" />
</Grid.ColumnDefinitions>
<DataGrid Name="infogrid"
Grid.Row="0"
Grid.RowSpan="3"
Grid.ColumnSpan="4"
Width="356"
HorizontalAlignment="Left"
AutoGenerateColumns="True" />
<Label Grid.Row="4"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="First Name:" />
<TextBox Grid.Row="4"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Label Grid.Row="5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Last Name:" />
<TextBox Grid.Row="5"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Label Grid.Row="6"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Department" />
<TextBox Grid.Row="6"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Button x:Name="saveBtn"
Grid.Row="7"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Save" />
<Button x:Name="updateBtn"
Grid.Row="7"
Grid.Column="1"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Update" />
<Button x:Name="deleteBtn"
Grid.Row="7"
Grid.Column="2"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Delete" />
</Grid>
</TabItem>
<TabItem Header="Security" />
<TabItem Header="Details" />
</TabControl>
</Grid>

FaceTrackingBaciscWPF example - how to make facetrackingviewer scale?

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.
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"/>

WPF Labels 2-n in StackPanel not visible

I am going through the tutorial here and for whatever reason, the labels for FirstName, LastName, and City are not visible, neither at design time nor at runtime. I've tried deleting them and re-adding and I get the same result. Can anyone see what is causing them to be hidden?
<Grid Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="73*"/>
<RowDefinition Height="247*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="259*"/>
<ColumnDefinition Width="258*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnSave" Content="Save" Grid.Column="1" HorizontalAlignment="Right" Margin="0,10,10,0" Width="60" Height="22" VerticalAlignment="Top"/>
<Button x:Name="btnRevert" Content="Revert" Grid.Column="1" HorizontalAlignment="Right" Margin="0,10,86,0" Width="60" RenderTransformOrigin="-0.047,0.36" Height="22" VerticalAlignment="Top"/>
<Button x:Name="btnAdd" Content="Add" Grid.Column="1" HorizontalAlignment="Right" Margin="0,10,162,0" VerticalAlignment="Top" Width="60"/>
<Button x:Name="btnDelete" Content="Delete" HorizontalAlignment="Right" Margin="0,10,238,0" VerticalAlignment="Top" Width="60" RenderTransformOrigin="-1.521,0.477" Grid.Column="1"/>
<Button x:Name="btnFirst" Content="|<" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="35"/>
<Button x:Name="btnFirst_Copy" Content="|<" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="35"/>
<Button x:Name="btnPrevious" Content="<" HorizontalAlignment="Left" Margin="54,10,0,0" VerticalAlignment="Top" Width="35"/>
<Button x:Name="btnNext" Content=">" HorizontalAlignment="Left" Margin="94,10,0,0" VerticalAlignment="Top" Width="35"/>
<Button x:Name="btnLast" Content=">|" HorizontalAlignment="Left" Margin="134,10,0,0" VerticalAlignment="Top" Width="35" RenderTransformOrigin="4.102,1.005"/>
<StackPanel HorizontalAlignment="Left" Height="28" Grid.Row="1" VerticalAlignment="Top" Width="304">
<Label x:Name="lblCustomerID" Content="Customer ID" Height="28"/>
<Label x:Name="lblFirstName" Content="First Name" Height="28"/>
<Label x:Name="lblLastName" Content="Last Name" Height="28"/>
<Label x:Name="lblCity1" Content="City" Height="28"/>
</StackPanel>
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Height="251" Grid.Row="1" VerticalAlignment="Top" Width="297">
<TextBox x:Name="txtCustomerID" Height="28" TextWrapping="Wrap" Width="Auto" Text="{Binding Path=CustomerID, Mode=OneWay}"/>
<TextBox x:Name="txtLastName" Height="28" TextWrapping="Wrap" Width="Auto" Text="{Binding Path=LastName}"/>
<TextBox x:Name="txtFirstName" Height="28" TextWrapping="Wrap" Width="Auto" Text="{Binding Path=FirstName}"/>
<TextBox x:Name="txtCity" Height="28" TextWrapping="Wrap" Width="Auto" Text="{Binding Path=City}"/>
</StackPanel>
</Grid>
Remove your StackPanel's Height. Let it fill its height automatically. You set it to 28 which makes the other children get cutted off.
<StackPanel HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="304">
<Label x:Name="lblCustomerID" Content="Customer ID" Height="28"/>
<Label x:Name="lblFirstName" Content="First Name" Height="28"/>
<Label x:Name="lblLastName" Content="Last Name" Height="28"/>
<Label x:Name="lblCity1" Content="City" Height="28"/>
</StackPanel>
<StackPanel Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="297">
<TextBox x:Name="txtCustomerID" Height="28" TextWrapping="Wrap" Width="Auto" Text="{Binding Path=CustomerID, Mode=OneWay}"/>
<TextBox x:Name="txtLastName" Height="28" TextWrapping="Wrap" Width="Auto" Text="{Binding Path=LastName}"/>
<TextBox x:Name="txtFirstName" Height="28" TextWrapping="Wrap" Width="Auto" Text="{Binding Path=FirstName}"/>
<TextBox x:Name="txtCity" Height="28" TextWrapping="Wrap" Width="Auto" Text="{Binding Path=City}"/>
</StackPanel>

Resources