控制模板中的文本自动调整大小

Question

我正在为按钮创建一个模板。我希望放置在按钮内的文本随着按钮的大小而增大和缩小。

我的风格：

<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>

我的按钮：

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

屏幕截图 http://img149.imageshack.us/img149/152 /unbenanntab.png

谢谢！

飞鸟

Answer 1

如果您使用 ViewBox，它将调整大小以填充空间 - 将您的 ContentPresenter 更改为以下内容。

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