wpftemplatestextboxborder

WPF Custom TextBox Sizing issue


I am trying to create a custom TextBox Template in WPF.

My TextBox has a 1px border around it, this border has a margin of 8px, this is all simple stuff, no issues here.

The issue I have is that when I use my TextBox and define:

<TextBox Template="MyTextBoxTemplate" Height="100">

Height set at 100, output height 84

The actual output height of the border is only 84px, I guess because when I set the height, that also includes the top and bottom Margins (2 x 8px) 16px - but I say the TextBox should be 100px high, that is what I want to be output.

I have tried within my template to set the height of the border based on {TemplateBinding Height} but then the bottom of the border is trimmed:

Border height set to 100, border trimmed

Here is the rudimentatal code I have been using, I had something more elaborate, but I have gone back to basics to try and resolve this sizing issue:

<ControlTemplate TargetType="{x:Type TextBoxBase}">

    <ContentControl Margin="8">

        <Border Background="White"
                BorderBrush="red"
                BorderThickness="1"
                CornerRadius="2"
                Height="{TemplateBinding Height}"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch">

                <Label Content="Text Area..." />

        </Border>

    </ContentControl>

</ControlTemplate>

I didnt use a content control previously, this is just the latest container I have tried to get around this issue.


Solution

  • There should not be any (fixed) Margin on the top-level element of the ControlTemplate. The Margin should be defined on the TextBox, e.g. by a default Style:

    <Style TargetType="TextBox">
        <Setter Property="Margin" Value="8"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BorderBrush" Value="Red"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer x:Name="PART_ContentHost"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>