Bind ListViewItem's height to the ListView from dataTemplate - xaml

Question

I have a ListView in my Windows Store App, which selects a template through dataTemplateSelector. In the ItemTemplate of ListView, i have an image. I don't want to fix the height and width of the image, i want to allow it to adjust itself with the space available. So the image can be displayed bigger in big screen size.
Following is my ListView XAML:
<ListView Name="MyListView" ItemTemplateSelector="{StaticResource MyTemplateConverter}"
Height="{Binding ActualHeight, ElementName=scroll, Converter={StaticResource BottomMarginConverter}}" Width="{Binding ActualWidth, Converter={StaticResource GVWIdthConverter}, ElementName=scroll}"
Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Tapped="MyGridView_Tapped">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0,5,0,5" />
<Setter Property="Background" Value="LightCyan" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="3" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
I have set VerticalContentAlignment to Stretch, this stretches my ListViewItem to the size of ListView, but the problem is when the image inside the Item is bigger, it increases the size of ListViewItem larger than ListView. I have also tried setting the height of ListViewItem in the above code by adding
<Setter Property="Height" Value="{Binding ActualHeight, ElementName=MyGridView}" />
Following is the code of my ItemTemplate, which is being selected through ItemTemplateSelector,
<DataTemplate x:Key="PhotoTemplate">
<Grid x:Name="PhotoTemplateGrid" Width="400" Margin="2" Background="LightPink" >
<Grid.RowDefinitions>
<RowDefinition Height="90"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding from.photoUrl}" Height="70" HorizontalAlignment="Center" VerticalAlignment="Center" Width="70" />
<StackPanel Orientation="Vertical" Margin="10,10,0,0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock Grid.Column="1" Text="{Binding from.Name}" Style="{StaticResource SubHeaderText}" VerticalAlignment="Top"
IsHitTestVisible="false" TextWrapping="NoWrap" Foreground="{StaticResource StalkerBlueThemeBrush}" />
<TextBlock Text="{Binding created_Time, Converter={StaticResource TextDateConverter}}" Margin="0,0,0,0" Style="{StaticResource BaselineTextStyle}" VerticalAlignment="Top"
IsHitTestVisible="false" TextWrapping="NoWrap" FontSize="12" />
</StackPanel>
</Grid>
<Grid Grid.Row="1" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="5,0,5,0" TextAlignment="Center" MaxHeight="40" HorizontalAlignment="Stretch" Text="{Binding message}" Style="{StaticResource BaselineTextStyle}"
TextTrimming="WordEllipsis" IsHitTestVisible="false" TextWrapping="Wrap" VerticalAlignment="Center" />
<TextBlock Grid.Row="1" MaxHeight="20" Margin="5,0,5,0" TextAlignment="Center" Text="{Binding description}" Style="{StaticResource BaselineTextStyle}"
TextTrimming="WordEllipsis" IsHitTestVisible="false" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
<Image Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" Source="{Binding picture}" Margin="2" />
</Grid>
<Grid Grid.Row="2" Background="LightGray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="Auto" Background="White" >
<Polygon Points="15,0 0,15 30,15" Stroke="LightGray" Fill="LightGray" Margin="20,0,0,0" />
</Grid>
<Grid Grid.Row="1" HorizontalAlignment="Stretch">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0" Text="View all comments" Style="{StaticResource BaselineTextStyle}" Foreground="{StaticResource BlueThemeBrush}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,5,0">
<Image Height="15" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="25" Source="ms-appx:///Assets/CtBlueSmall.png" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" TextWrapping="NoWrap" TextTrimming="WordEllipsis" Text="{Binding CtCount}" Foreground="White" />
<Image Height="15" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="25" Source="ms-appx:///Assets/LeBlueSmall.png" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" TextWrapping="NoWrap" TextTrimming="WordEllipsis" Text="{Binding LeCount}" Foreground="White" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</DataTemplate>
The Grid at Row Number 1 <Grid Grid.Row="1" >, contains the image which makes the height go larger than the ListView. I want to allow this Grid to stretch itself to the size of its parent. But not cross the size of its parent. in other word, i simply want to bind its height to its parent. Please help me out, i am stuck here.

Answer 1

have you tried to change the Row Definition applied for that image to 'Auto'?
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

Answer 2

I have managed to solve this in my own project by binding the Height of the Grid in the DataTemplate to the ActualHeight of the ListView. I does not seem to work if the binding is in the ListView.ItemContainerStyle style as a setter.
<DataTemplate>
<Grid Height="{Binding ActualHeight, ElementName=MyListView}">
...
</Grid>
</DataTemplate>