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}"/>