UWP: Wrong computation of height for RichEditBox

Question

I need to compute the exact height of a RichEditBox, depending on its content. For this sake, I use the following method, which proves quite ok in any case, BUT when the text is one line!

    public static double GetElemHeight(FrameworkElement elem, double? actualWidth = null)
    {
        if (elem == null)
            return 0;

        // take note of the existing height, if any, since we have to re-establish it later:
        double currentH = elem.Height;
        if (!double.IsNaN(currentH))
            elem.Height = double.NaN;
        double totalW = (actualWidth ?? elem.Width) + elem.Margin.Left + elem.Margin.Right;

        // Measure() only works as expected in this context if the Height is NaN:
        elem.Measure(new Size(totalW, Double.PositiveInfinity));
        Size size = elem.DesiredSize;
        elem.Height = currentH; //re-establish the correct height
        return size.Height - elem.Margin.Top - elem.Margin.Bottom;
    }

Basically what happens is that for any text written in the RichEditBox, the method returns the correct height of the element. But when I have a text that covers only one line, the result is always an height that is almost the double of the correct result.

Please find here an MVC that reproduces the problem: https://github.com/cghersi/UWPExamples/tree/master/SizeOfTextBox

Any clue on what am I doing wrong?

Answer 1

The default height of RichEditBox is 32px, it means when your actual height less than 32, it still displays 32. And in style, control the height of content is Border, so you should change the MinHeight of Border. In addition, you can go to generic.xaml to get the style of RichEditBox.

<Page.Resources>
        <Style TargetType="RichEditBox">
            ......
            <Setter Property="SelectionFlyout" Value="{StaticResource TextControlCommandBarSelectionFlyout}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RichEditBox">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                ......
                            </VisualStateManager.VisualStateGroups>
                            ......
                            <Border x:Name="BorderElement" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" MinHeight="0" MinWidth="{ThemeResource TextControlThemeMinWidth}" Grid.RowSpan="1" Grid.Row="1"/>
                            ......
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>