WPF: Resizing stackpanels with images at runtime - wpf

Question

I am attempting to create an application for a flight simulator
aircraft where a user can preset the position and size of a window of
a set of popup radio displays as seen in the first screenshot.
However, I have run into a bit of a problem. In the second
screenshot, when I scale the main grid horizontally
with a grid splitter, the images increase in size vertically as well
as horizontally instead of remaining at their initial height. Any
ideas how to solve this?

Answer 1

Ok the solution was to use a grid and set the Grid.Row the image was assigned to. Then by scaling the grid I could get the desired effect.
XAML:
<Grid x:Name="spGrid" Height="154" Width="101" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" MouseDown="PosStart" MouseMove="PosDelta" MouseUp="PosEnd">
<Grid.RowDefinitions>
<RowDefinition x:Name="spRow1" Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="spCol1" Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" VerticalAlignment="Stretch" DragDelta="PanelXDelta" DragStarted="PanelXStart"/>
<GridSplitter Grid.Row="1" Grid.ColumnSpan="4" Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" DragDelta="PanelYDelta" DragStarted="PanelYStart"/>
<Grid Grid.Column="0" Grid.Row="0" x:Name="spStack" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Grid.Row="0" x:Name="imgKMA30" Source="UI/KMA30.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Image Grid.Row="1" x:Name="imgKR165A" Source="UI/KX165A.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Image Grid.Row="2" x:Name="imgKX165" Source="UI/KX165.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Image Grid.Row="3" x:Name="imgKN62A" Source="UI/KN62A.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Image Grid.Row="4" x:Name="imgKR87" Source="UI/KR87.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Image Grid.Row="5" x:Name="imgKT74" Source="UI/KT74.jpg" StretchDirection="Both" Stretch="Fill" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</Grid>
C#:
private void PanelXDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
spGrid.Width += e.HorizontalChange;
}
private void PanelYDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
spGrid.Height += e.VerticalChange;
}