How to have one element in a horizontal StackPanel dictate the height of another element in the Stac-CodePudding

In a StackPanel, I would like the Height of the TextBlock to dictate the height of the Image, but trying to bind the Image Height to the TextBlock ActualHeight causes the Image to disappear. The height of the TextBlock will vary depending on the size of the font being used.

The StackPanel is defined as follows:

    <StackPanel Orientation="Horizontal">

        <Image Source="{Binding HyperlinkIconImagePath}" 
               Height="{Binding ElementName=hyperlinkTextBlock, Path=ActualHeight}" 
               Margin="{StaticResource IconLeftMargin}" 
               VerticalAlignment="Center"/>

        <TextBlock Name="hyperlinkTextBlock">
            <Hyperlink 
                NavigateUri="{Binding HyperlinkUri}">
                <TextBlock Text="{Binding HyperlinkDisplayedText}"/>
            </Hyperlink>
        </TextBlock>

    </StackPanel>

I have tried many different things and none will work. Any help is greatly appreciated. Note that this StackPanel is contained in a ControlTemplate.

CodePudding user response：

The solution to this issue came from a rather subtle direction. I was initially trying to bind to the ActualHeight value of the TextBlock. During the layout process, the ActualHeight value was apparently not yet determined when it was referenced by the Image Height attribute. I then thought about using the size of the font being displayed in the TextBlock, and this FontSize value apparently is already established and usable.

<Image Source="{Binding HyperlinkIconImagePath}" 
       Height="{Binding ElementName=HyperlinkLeftTextBlock, Path=FontSize}" 
       Margin="{StaticResource IconLeftMargin}" 
       VerticalAlignment="Center"/>

I therefore changed the Image Height binding to reference the TextBlock font size, and this resulted in a successful rendering.

CodePudding user response：

try VerticalAlignment="Center" :