Image Stretch programatically in WPF.

Question

Hi,

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 didnt work.,.

Please help.. Thanks Ramm

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>

Please help Thanks Ramm

Answer 1

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).

Answer 2

I would think that a DockPanel in your case would work, since it automatically stretches the last element (I didn't try building this code so let me know if it doesn't work):

<DockPanel Height="66">
    <Image Name="imgExtraImg" Source="D:\ehtmp_top_right.gif" DockPanel.Dock="Right"/>
    <Image Name="imgClientPhoto" Source="D:\ehtmp_top_left.gif"/>
</DockPanel>

Answer 3

<Grid HorizontalAlignment="Left" Height="66" Name="imgGrid">
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*"></ColumnDefinition>
     <ColumnDefinition Width="Auto"></ColumnDefinition>

       </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
           <RowDefinition Height="66"/>
         </Grid.RowDefinitions>

     <Image Name="imgClientPhoto" Grid.Column="0" Stretch="Fill"Source="D:\eHTMP\Exclusively_My_Work\UI_Application\Images\ehtmp_top_left.gif" ></Image>
<Image Name="imgExtraImg"  Grid.Column="1"Source="D:\eHTMP\Builds\output\WPF_Example\UI_eHTMP\UI_eHTMP\Icons\ehtmp_top_right.gif"></Image></Grid>