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?

I need get image.height like 3 rows of textblock, i.e. resize image — Artem Shaban, Jan 28 '15 at 21:00

Gordon True · Accepted Answer · 2015-01-28T21:21:45.900

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>

I need get image.height like 3 rows of textblock, i.e. resize image — Artem Shaban, Jan 28 '15 at 21:03
You can't bind to ActualHeight. Which is a real shame. http://stackoverflow.com/questions/3787312/binding-to-actualheight-does-not-work — Trade-Ideas Philip, Dec 06 '16 at 19:29

score 0 · Answer 2 · answered Jan 28 '15 at 20:47

0

I would try to make a grid with 1 row and 2 columns.

In the first column i would place the image.

In the second column i would place a stack panel with vertical flow. Then add the textblocks to the stackpanel.

answered Jan 28 '15 at 20:47

loiti

168
6

I need get image.height like 3 rows of textblock, i.e. resize image – Artem Shaban Jan 28 '15 at 21:07

Height image by heights textblock

2 Answers2