How to limit column height to another one's? - wpf

Question

I have a grid in WPF which is made of 4 rows along 2 columns where column 1 holds an Image control and column 2 holds 4 Textblocks. Problem is, the Image control sizes itself to the Image size and extends the listbox's entry too much [Its in a DataTemplate] and makes everything look distorted. I dont want to manually set a max height/width because i want the Image to size itself to the size of the 4 textblocks that are alongside it. Any ideas?
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="{Binding Logo, Converter={StaticResource BSConverter}}" Grid.Row="0" Grid.RowSpan="4"
Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True"/>
<TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="{Binding Author}" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text="{Binding Version}" Grid.Row="2" Grid.Column="1"/>
<TextBlock Text="{Binding Description}" Grid.Row="3" Grid.Column="1"/>
</Grid>
</DataTemplate>
Thanks in advance

Answer 1

You can use Grid.IsSharedSizeGroup on the Parent ListBox to make sure all of your items get the same Width for the first Column like this
<ListBox ...
Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="GroupA"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
...
For the Image height problem, you could bind Height to the ActualHeight of the Parent Grid with a FallbackValue of 1.0 (to ensure the Height of the Image doesn't effect the Height of the Grid)
<Image Source="{Binding Logo, Converter={StaticResource BSConverter}}"
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="0"
Stretch="Uniform" SnapsToDevicePixels="True"
Height="{Binding RelativeSource={RelativeSource AncestorType=Grid},
Path=ActualHeight,
FallbackValue=1.0}"/>

Answer 2

Modifying your containers slightly to make use of a StackPanel in conjunction with a Grid and referencing the StackPanel via ElementName binding should provide you the visuals you are looking for...
<DataTemplate>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,8,0" Source="{Binding Logo, Converter={StaticResource BSConverter}}"
Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True"
Height="{Binding ElementName=Contents, Path=ActualHeight}"/>
<StackPanel VerticalAlignment="Top" Name="Contents" Grid.Column="1" Orientation="Vertical">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Author}"/>
<TextBlock Text="{Binding Version}"/>
<TextBlock Text="{Binding Description}"/>
</StackPanel>
</Grid>
</DataTemplate>