Question

I have a button template shown bellow, in this case when the text is entered the button stays the same size, and it works ok. However I want just a border, so when I try to add that ellipse inside the thumb to get the border, and try typing text in the textbox, when the text becomes larger than the button suddenly it covers the button with a white background, i don’t know why this is happening, any help would be appreciated.

        <Window.Resources>
    <Style TargetType="{x:Type Thumb}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Fill="{TemplateBinding Background}"/>
                </ControlTemplate> 
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Thumb x:Name="outerThumbResize" Cursor="SizeNESW" Background="Red" Height="50" Width="50"/>

                        <!--<Ellipse x:Name="innerCircle" Fill="White" RenderTransformOrigin=".5,.5">
                            <Ellipse.RenderTransform>
                                <ScaleTransform ScaleX=".8" ScaleY=".8"/>
                            </Ellipse.RenderTransform>
                        </Ellipse>-->


                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <TextBox x:Name="textBox" Background="Transparent" BorderThickness="0" Visibility="Collapsed" TextAlignment="Center" PreviewKeyUp="textBox_PreviewKeyUp" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <Thumb x:Name="innerThumb" Background="Transparent" DragDelta="nodeThumb_DragDelta" RenderTransformOrigin=".5,.5">
                            <Thumb.RenderTransform>
                                <ScaleTransform ScaleX=".9" ScaleY=".9"/> 
                            </Thumb.RenderTransform>
                        </Thumb>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Answer 1

i solved it using the stroke thickness of the ellipse in the template.