Height image by heights textblock

Question

I have image and 3 textblock. I want place image left and 3 TextBlock in rows right. I've tried this:

<Grid x:Name="Grid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Image Grid.RowSpan="3" 
                Source="image.jpg" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            <TextBlock Grid.Column="1" 
                Text="11"
                FontSize="25"/>
            <TextBlock Grid.Column="1" 
                Grid.Row="1"
                Text="22"/>
            <TextBlock Grid.Column="1" 
                Grid.Row="2"
                Text="33" FontSize="14"/>
        </Grid>

But I have large space between rows when image is big. How I can do this?

Answer 1

If you want the image to remain its size... simply get rid of the grid rows and throw the TextBlocks into a vertical StackPanel.

If you want to resize your image so that it has the same height as the 3 TextBlocks... you can bind the Height of the Image to the ActualHeight of whatever container you put the TextBlocks in, like this:

 <Grid x:Name="Grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Image Height="{Binding ActualHeight, ElementName=myStackPanel}" Source="image.jpg" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <StackPanel Grid.Column="1">
        <StackPanel Name="myStackPanel">
            <TextBlock Text="11" FontSize="25"/>
            <TextBlock Text="22"/>
            <TextBlock Text="33" FontSize="14"/>
        </StackPanel>
    </StackPanel>
</Grid>