Re-Size Text Content Inside A Button For Windows Phone

Question

In my application I have a button of a particular size that I do not want to change. The content of the button is "0" initially and every time someone presses the button it increases by 1, e.g. after 3 presses the content will be "3".

However after so long the content becomes too big (say at 100) to fit in the button and the end of it will completely disappear of the edge of the button. What I want to be able to do is have the text re-size and get smaller when it needs to so that it all stays inside the button but will maintain its maximum size.

I am looking for something similar to those calculators where as the numbers increase they get smaller so the whole number can fit inside.

However I do not want to change the dimensions of the button, they need to stay exactly the same. I am fitting the content to the size of the button, rather than adjusting the size of the button to the content.

I am open to any solutions at all or workarounds.

Answer 1

You have to override button Template in Style and wrap ContentPresenter with ViewBox.

Here is example (look for Viewbox added comment):

        <Style x:Key="ButtonWithViewbox" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="Grid" Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="Pressed" To="PointerOver">
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                            </Storyboard>
                                        </VisualTransition>
                                        <VisualTransition From="PointerOver" To="Normal">
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                            </Storyboard>
                                        </VisualTransition>
                                        <VisualTransition From="Pressed" To="Normal">
                                            <Storyboard>
                                                <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Border" CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}">
                                <Viewbox> /* VIEWBOX ADDED */
                                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" 
                                                           ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" 
                                                           Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                           Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Viewbox>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>