Image Stretch programatically in WPF. [modified]

Krishna Aditya

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

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

modified on Tuesday, July 28, 2009 7:32 AM

Super Lloyd · modified on Tuesday, July 28, 2009 7:32 AM

I suspect the <Image Stretch> property is ignored, because HorizontalAlignment="Left" VerticalAlignment="Top" is what influence the size of the Image in the stack panel!

A train station is where the train stops. A bus station is where the bus stops. On my desk, I have a work station.... _________________________________________________________ My programs never have bugs, they just develop random features.

Mark Salsbery · modified on Tuesday, July 28, 2009 7:32 AM

Your XAML doesn't match your description (e.g. images on the left and right ends of a vertical stackpanel??). Items in Stackpanels are sized by the item, not the stackpanel size, so you'd need to specify width and/or height of the stackpanel's children to get the layout you want using a stackpanel. Something like:

<StackPanel Name="stkpnlHeader" Width="1254.662" Height="Auto" >
    <StackPanel Name="imgStkPnl" Orientation="Horizontal" Width="1253.511" >
        <Image Name="imgClientPhoto" Source="D:\\ehtmp\_top\_left.gif" Stretch="Fill" Width="1030" Height="66" />
        <Image Name="imgExtraImg" Source="D:\\ehtmp\_top\_right.gif" Width="1" Height="66" />
    </StackPanel>
</StackPanel>

The drawback to this approach is that the dimensions are hardwired to specific values, making changes problematic. To get around that, you could use a more appropriate layout element. For example, a grid:

<StackPanel Name="stkpnlHeader" Width="1254.662" Height="auto" >
    <Grid Name="imgGrid" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="\*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="66" />
        </Grid.RowDefinitions>
        <Image Name="imgClientPhoto" Grid.Column="0" Source="D:\\ehtmp\_top\_left.gif" Stretch="Fill" />
        <Image Name="imgExtraImg" Grid.Column="1" Source="D:\\ehtmp\_top\_right.gif" />
    </Grid>
</StackPanel>

Note the difference - grids lay out children, stack panels are laid out by their children.

Mark Salsbery Microsoft MVP - Visual C++ :java:

Krishna Aditya

Hi Mark and Lloyd, Thanks a lot for the suggestions. It worked ... :) I was thinking that stackpanel adjusts the rest of the image stretch. Mark, Thanks for the tip. I am learning Thank you, Ramm