Autosize for Text in Control Template

Question

Hey, I am creating a template for a button. I want the text that is placed inside the button to grow and shrink with the size of the button.

My style:

<Style x:Key="BigRoundButtonWithNumber" TargetType="{x:Type Button}">
    <Setter Property="OverridesDefaultStyle" Value="False"/>
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="FontFamily" Value="Arial" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Height="auto" Width="auto">
                    <Ellipse >
                        <Ellipse.Fill>
                            <SolidColorBrush Color="Gray"></SolidColorBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Ellipse  Margin ="10,10,10,10">
                        <Ellipse.Fill>
                            <RadialGradientBrush GradientOrigin="0.496,1.052">
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                        <TranslateTransform X="0.02" Y="0.3"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Offset="0.2" Color="White"/>
                                <GradientStop Offset="1" Color="Green"/>
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

my Button:

<Button Click="Button_Click" Style="{DynamicResource BigRoundButtonWithNumber}">
                50
            </Button>

Thanks!

Tobi

Answer 1

If you use a ViewBox it will resize to fill the space - change your ContentPresenter to the following.

<Viewbox Panel.ZIndex="99">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" />
</Viewbox>