Whirlwind991
Whirlwind991

Reputation: 495

WPF Image stretching in only one direction

I have a container at 250px width which houses different images of different sizes.

<Grid width="250">
   <ScrollViewer >
          <StackPanel Orientation="Vertical">
            <ItemsControl ItemsSource="{Binding images}">                                       
              <ItemsControl.Template>
                <DataTemplate>
                  <Image Source="{Binding}" Margin="0,0,5,5" />
                </DataTemplate>
               </ItemsControl.Template>
              </ItemsControl>        
         </StackPanel>
   </ScrollViewer >
</Grid>

Some of the images are less than 250px and some are more than 250px.

What I would like to happen is for the larger images over 250px width to constrain to the container (250px) while keeping images under 250px to their normal widths.

If I do this it causes the images under 250px to stretch and fill but constrains the larger images to 250px width:

<Image Source="{Binding}" Margin="0,0,5,5" Stretch="Fill" MaxWidth="250"/>

But if I do this it causes images under 250px to keep their normal width but images over 250px don't constrain and overflow outside the container:

<Image Source="{Binding}" Margin="0,0,5,5" Stretch="None" MaxWidth="250"/>

Is there a way around this? Thanks.

Upvotes: 1

Views: 1050

Answers (1)

Clemens
Clemens

Reputation: 128062

You may set the StretchDirection property to DownOnly:

<Image Source="{Binding}" Margin="0,0,5,5" MaxWidth="250"
       Stretch="Uniform" StretchDirection="DownOnly"/>

Upvotes: 3

Related Questions