Portrait Images in Grid are cutoff - WP8

Question

I am trying to bind Landscape and Portrait Images to the grid control. The Landscape images are loaded correctly, but I'm facing problems when it comes to load portrait images. Their bottom part is cut off(overflowed) so the grid row can't load the image with it's full Height. I tried setting the Row property with Height="Auto" or Height="*" but that didn't work. Here is my XAML:

<ItemsControl ItemsSource="{Binding ItemsPrasanja}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>

                                <TextBlock 
                                    Name="txtPrasanje" 
                                    Grid.Row="0" 
                                    Text="{Binding Tekst}" 
                                    TextWrapping="Wrap"/>

                              <Image Name="imgPrasanje" 
                                    Grid.Row="1"  
                                    Source="{Binding Slika}"  
                                    Margin="0,5,0,0"
                                    />                                   
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

How can i solve this without setting manually Width or Height to the Grid or the Image control ?

P.S. The ItemsControl is part from another Grid control. It populates (Grid.Row="0") which I set to Height=" * "

                <Grid.RowDefinitions>
                   <RowDefinition Height="*"/>
                   <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

I already tried with Stretch="None", Stretch="UniformToFill" and Stretch="Fill" but with no effect. Stretch="Uniform" is set by default. — Mr D-Code

Tom Verhoeff Tom Verhoeff · Accepted Answer · 2013-08-11T08:33:04

You should look into the Stretch property of the Image object

A value of Fill will cause your image to stretch to completely fill the output area. When the output area and the image have different aspect ratios, the image is distorted by this stretching. To make an Image preserve the aspect ratio of the image, set this property to Uniform (default) or UniformToFill.

Portrait Images in Grid are cutoff - WP8

1 Answers