Image Stretch programmatically in WPF

In a WPF Application using XAML,

I created a stackpanel(width 1030) and I have 2 Images. 1. imgClient width = 784 Height = 66 and 2. imgClientExtra width =1 and Height = 66

imgClientExtra will be right end and imgClient will start at leftend.

so, the images will fit to 784 + 1 when the application is not running, the total image width is 785(784+1).. but, wen the application is running.. the image has to stretch to 1030... with imgClientExtra will be at 1030 and imgClient will have to stretch to 1029 only..

I used stretch.fill ... but didn't work.

Currently I am using this way... is this needs to be modified?

     <StackPanel Name="stkpnlHeader" Margin="0,0,0,0" Width="1254.662" Height="auto" HorizontalAlignment="Left" VerticalAlignment="Top">
                <StackPanel Name="imgStkPnl"Orientation="Vertical" Width="1253.511" HorizontalAlignment="Left">
                    <Image Name="imgClientPhoto" HorizontalAlignment="Left" VerticalAlignment="Top" Width="784" Height="66" 
                   Source="D:\ehtmp_top_left.gif" Stretch="Fill" StretchDirection="Both">

                    </Image>
                    <Image Name="imgExtraImg"   Width="1" Height="66" Margin="0,-66,0,0" HorizontalAlignment="Right" 
                       Source="D:\ehtmp_top_right.gif"
                       ></Image>
                </StackPanel> </StackPanel>

Solution

Change from a stackpanel to a Grid. Set the Grid.Column definitions. Create 2 column definitions You can use Width to set a 'ratio' width. For example, colA Width="5*" and colB Width="3*" means that colA gets 5/8 of the grid and colB gets 3/8 of the grid. Combine this concept with also setting MinWidth and MaxWidth and you should be good to go.

Also, when setting widths in code, you often need to check an existing controls width by using the 'ActualWidth' property rather than 'Width' (which sometimes returns NaN).