如何拉伸方形按钮中的文本?

发布于 2025-01-06 22:16:20 字数 400 浏览 4 评论 0原文

在我的应用程序中,我有一个方形按钮网格。每个按钮的文本内容是在运行时设置的。在大多数情况下,文本只有一个字符长,但有时会更长。我需要使整个文本始终可见,即拉伸它(更改字体大小)以适合按钮的边框。我该怎么做?

我尝试使用 Viewbox,但没有帮助。

我的 XAML 的简化版本:

<Viewbox Stretch="Uniform">
    <Button Content="Text" 
            Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"/>
</Viewbox>

关于如何实现我所需要的(即方形按钮 + 始终适合的文本)有什么想法吗?

In my application, I have a grid of square buttons. The text content for each button is set at runtime. In most cases, the text is just one character long, but sometimes it's longer. I need to make the whole text to be always visible, i.e. stretch it (change the font size) to fit inside the button's border. How do I do it?

I tried to use a Viewbox, but it doesn't help.

A simplified version of my XAML:

<Viewbox Stretch="Uniform">
    <Button Content="Text" 
            Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"/>
</Viewbox>

Any ideas on how can I achieve what I need (i.e. square buttons + text that always fits in)?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

江挽川 2025-01-13 22:16:20

您最初的建议几乎是正确的,请尝试以下操作:

    <Button>
        <Viewbox Stretch="Fill">
            <TextBlock Text="Test"/>
        </Viewbox>
    </Button>

并将其应用于多个按钮:

    <Style x:Key="StretchedButtonContent" TargetType="{x:Type Button}">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Viewbox Stretch="Fill">
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                    </Viewbox>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Button Style="{StaticResource StretchedButtonContent}" Content="Test" />

我的第一个想法是使用 RenderTransform 和转换器。这给出了相同的结果,但更复杂:

    <Converters:ScaleConverter x:Key="ScaleConverter" />

    <Button>
        <TextBlock Text="Test" RenderTransformOrigin="0.5,0.5">
            <TextBlock.RenderTransform>
                <ScaleTransform>
                  <ScaleTransform.ScaleX>
                    <MultiBinding Converter="{StaticResource ScaleConverter}">
                        <Binding RelativeSource="{RelativeSource AncestorType={x:Type Button}}" Path="ActualWidth" />
                        <Binding RelativeSource="{RelativeSource AncestorType={x:Type TextBlock}}" Path="ActualWidth" />
                    </MultiBinding>
                  </ScaleTransform.ScaleX>
                  <ScaleTransform.ScaleY>
                    <MultiBinding Converter="{StaticResource ScaleConverter}">
                        <Binding RelativeSource="{RelativeSource AncestorType={x:Type Button}}" Path="ActualHeight" />
                        <Binding RelativeSource="{RelativeSource AncestorType={x:Type TextBlock}}" Path="ActualHeight" />
                    </MultiBinding>
                  </ScaleTransform.ScaleY>
                </ScaleTransform>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Button

和一个转换器

public class ScaleConverter : IMultiValueConverter
{
    #region Implementation of IMultiValueConverter

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return ((double) values[0])/((double) values[1]);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

Your original suggestion was nearly correct, try this:

    <Button>
        <Viewbox Stretch="Fill">
            <TextBlock Text="Test"/>
        </Viewbox>
    </Button>

And to apply this to multiple buttons:

    <Style x:Key="StretchedButtonContent" TargetType="{x:Type Button}">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Viewbox Stretch="Fill">
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                    </Viewbox>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Button Style="{StaticResource StretchedButtonContent}" Content="Test" />

My first thought was to use a RenderTransform and a converter. This gives the same result but is more complicated:

    <Converters:ScaleConverter x:Key="ScaleConverter" />

    <Button>
        <TextBlock Text="Test" RenderTransformOrigin="0.5,0.5">
            <TextBlock.RenderTransform>
                <ScaleTransform>
                  <ScaleTransform.ScaleX>
                    <MultiBinding Converter="{StaticResource ScaleConverter}">
                        <Binding RelativeSource="{RelativeSource AncestorType={x:Type Button}}" Path="ActualWidth" />
                        <Binding RelativeSource="{RelativeSource AncestorType={x:Type TextBlock}}" Path="ActualWidth" />
                    </MultiBinding>
                  </ScaleTransform.ScaleX>
                  <ScaleTransform.ScaleY>
                    <MultiBinding Converter="{StaticResource ScaleConverter}">
                        <Binding RelativeSource="{RelativeSource AncestorType={x:Type Button}}" Path="ActualHeight" />
                        <Binding RelativeSource="{RelativeSource AncestorType={x:Type TextBlock}}" Path="ActualHeight" />
                    </MultiBinding>
                  </ScaleTransform.ScaleY>
                </ScaleTransform>
            </TextBlock.RenderTransform>
        </TextBlock>
    </Button

and a converter

public class ScaleConverter : IMultiValueConverter
{
    #region Implementation of IMultiValueConverter

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return ((double) values[0])/((double) values[1]);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文