Question

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

然而，经过这么长时间，内容变得太大（比如100）以适应按钮，它的结尾将完全消失在按钮的边缘。我希望能够做的是让文本重新调整大小并在需要时变小，以便它全部保留在按钮内但会保持其最大大小。

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

但是我不想改变按钮的尺寸，它们需要保持完全相同。我将内容拟合到按钮的大小，而不是将按钮的大小调整为内容。

我对任何解决方案或解决方法都持开放态度。

Answer 1

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

enter image description here

以下是示例（查找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>

Answer 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：键将此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>

注意： 您可以在此处使用标记属性来存储内容，然后将其绑定到视图框中的文本块 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>

重新调整Windows Phone按钮内的文本内容

2 个答案: