Reputation: 495
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
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