调整 Windows Phone 按钮内文本内容的大小答案

【问题标题】：Re-Size Text Content Inside A Button For Windows Phone调整 Windows Phone 按钮内文本内容的大小
【发布时间】：2014-12-26 05:56:03
【问题描述】：

在我的应用程序中，我有一个我不想更改的特定大小的按钮。按钮的内容最初为“0”，每次有人按下按钮时，它都会增加 1，例如按 3 次后内容将为“3”。

但是，过了这么久，内容变得太大（比如 100）无法放入按钮，并且它的末端将完全消失在按钮的边缘。我想要做的是让文本重新调整大小并在需要时变小，以便它全部留在按钮内，但会保持其最大大小。

我正在寻找类似于那些计算器的东西，随着数字的增加，它们会变小，所以整数可以放在里面。

但是我不想更改按钮的尺寸，它们需要保持完全相同。我正在使内容适合按钮的大小，而不是根据内容调整按钮的大小。

我愿意接受任何解决方案或变通方法。

【问题讨论】：

标签： c# xaml windows-phone

【解决方案1】：

您必须在Style 中覆盖按钮Template 并用ViewBox 包裹ContentPresenter。

这是示例（查找Viewbox added 评论）：

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

【讨论】：

【解决方案2】：

使用 Viewbox 控件，您可以调整按钮中内容的大小，因为 ViewBox 旨在填充可用空间而不管大小。

第一种方法

    <Button Content="Long Text Long Text Long Text Long Text Long Text Long Text"  Foreground="Red"  Height="30">
        <Button.ContentTemplate>
            <DataTemplate>
                <Viewbox >
                    <TextBlock   Margin="5,0,5,0" Text="{Binding Path=Content,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" ></TextBlock>
                </Viewbox>
            </DataTemplate>
        </Button.ContentTemplate>
    </Button>

注意：您也可以使用 x:key 将此 DataTemplate 存储在资源中，然后分配给按钮 <Button ContentTemplate={StaticResource DatatemplateKeyname}/>

第二种方法

    <Button Height="30" Width="200"  Foreground="Red">
        <Button.Content>
            <Viewbox>
                <TextBlock  Margin="5,0,5,0" Text="Long Text Long Text Long Text Long Text Long Text Long Text" ></TextBlock>
            </Viewbox>
        </Button.Content>
    </Button>

注意： 您可以在此处使用 Tag 属性来存储内容，然后绑定到 viewbox 中的文本块 TextBlock Text="{Binding Path=Tag,RelativeSource={RelativeSource AncestorType={x:Type Button}}}"

第三种方法

  <!--Here Width is store in Button "Tag" property.-->
    <Viewbox Height="30" Width="{Binding ElementName=Buttonname,Path=Tag}">
        <Button x:Name="Buttonname" Content="Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text" Tag="200"  Foreground="Red"/>
    </Viewbox>

【讨论】：