WPF字体缩放

Posted 2023-03-06

【中文标题】WPF字体缩放

【英文标题】：WPF font scaling

【发布时间】：2010-12-14 23:14:05

【问题描述】：

我有一个 WPF 应用程序，其中的用户界面应该被缩放，以便在窗口变大时它应该变得更大。在其中一个对话框中，我需要向用户显示一个项目列表，用户应该单击其中一个。该列表将包含 1 到大约 15-20 个项目。我希望每个单独项目的字体大小与列表中其他项目的字体大小一样大，但同时如果窗口变大，我希望字体大小增加。

目前，我的测试代码如下所示。

<Window x:Class="WpfApplication4.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:WpfApplication4"
    Title="Window1" Height="480" Width="640">


    <ScrollViewer>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="30*" MinHeight="30"/>
                <RowDefinition Height="30*" MinHeight="30"/>
                <RowDefinition Height="30*" MinHeight="30"/>
            </Grid.RowDefinitions>

            <Button Grid.Row="0" MaxHeight="100"><Viewbox><TextBlock>T</TextBlock></Viewbox></Button>
            <Button Grid.Row="1" MaxHeight="100"><Viewbox><TextBlock>Test</TextBlock></Viewbox></Button>
            <Button Grid.Row="2" MaxHeight="100"><Viewbox><TextBlock>Test Longer String</TextBlock></Viewbox></Button>

        </Grid>

    </ScrollViewer>

</Window>

如果应用程序启动并且窗口变宽，一切看起来都正常。如果窗口宽度减小，文本Test Longer String 的字号变小，但T 和Test 的字号保持不变。我确实理解为什么会发生这种情况 - 视图框会将内容缩放到最大尺寸。我想知道的是我应该用什么方法来解决这个问题。

我不想为控件指定特定的字体大小，因为有些人会在 640x480 等低分辨率屏幕上运行它，而其他人会使用更大的宽屏。

编辑：

我尝试将我的代码修改为以下内容：

<ScrollViewer>
    <Viewbox>
        <ItemsControl>
            <Button>Test 2</Button>
            <Button>Test 3</Button>
            <Button>Test 4 afdsfdsa fds afdsaf</Button>
            <Button>Test 5</Button>
            <Button>Test 5</Button>
            <Button>Test 5</Button>
            <Button>Test 5</Button>
            <Button>Test 5</Button>
        </ItemsControl>
    </Viewbox>
</ScrollViewer>

但是随着按钮边框尺寸的增加，在大屏幕上，按钮边框变成一厘米宽。

【问题讨论】：

对我来说很好用：/ i.imgur.com/GXo14Vb.gifv

【参考方案1】：

试试这个：像其他时候一样渲染你的文本项：

TextBlocks 包含在“ItemsControl”中吗？ ListBox?

将整个 shebang 放入 ViewBox 并将其设置为适合您的需求。查找水平、垂直或组合缩放属性。

【讨论】：

我已经更新了我的帖子。请参阅“编辑”下。简而言之，如果我使用 TextBlock 而不是 Button，我会失去“Button”用户界面（点击效果等）。如果我使用 Button 并将其放置在 Viewbox 内，则整个按钮（包括其边框）将被调整大小。我不想要一个 1cm 的按钮边框，因为程序被最大化了。

【参考方案2】：

此解决方法可能会有所帮助：

    <ScrollViewer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30*" MinHeight="30"/>
            <RowDefinition Height="30*" MinHeight="30"/>
            <RowDefinition Height="30*" MinHeight="30"/>
        </Grid.RowDefinitions>

        <Button Grid.Row="0" MaxHeight="100">
            <Viewbox>
                <TextBlock Width="Binding ElementName=tbLonger,Path=ActualWidth">T</TextBlock>
            </Viewbox>
        </Button>
        <Button Grid.Row="1" MaxHeight="100">
            <Viewbox>
                <TextBlock Width="Binding ElementName=tbLonger,Path=ActualWidth">Test</TextBlock>
            </Viewbox>
        </Button>
        <Button Grid.Row="2" MaxHeight="100">
            <Viewbox>
                <TextBlock Name="tbLonger">Test Longer String</TextBlock>
            </Viewbox>
        </Button>
    </Grid>
</ScrollViewer>

关键是将所有文本块设置为相同的宽度。在这种情况下，它们都通过绑定遵循最长的文本块。

【讨论】：

我相信 OP 的代码对按钮的宽度没有问题，当窗口变小时它们的长度都相同，但他希望字体大小相同（或者这就是我的意思)。所以，绑定应该是最长文本的字体大小。

【参考方案3】：

我必须制作一个独立于分辨率的应用程序，并在此处使用以下答案： tips on developing resolution independent application

您的应用程序正在缩放（或缩放），具体取决于分辨率。

【参考方案4】：

最简单的方法可能是构造一个装饰器来完成这项工作。您可以将其称为“VerticalStretchDecorator”或类似名称。

它的使用方法如下：

<UniformGrid Rows="3" MaxHeight="300">
  <Button>
    <my:VerticalStretchDecorator>
      <TextBlock>T</TextBlock>
    </my:VerticalStretchDecorator>
  </Button> 
  <Button>
    <my:VerticalStretchDecorator>
      <TextBlock>Test</TextBlock>
    </my:VerticalStretchDecorator>
  </Button> 
  <Button>
    <my:VerticalStretchDecorator>
      <TextBlock>Test Longer String</TextBlock>
    </my:VerticalStretchDecorator>
  </Button>
</UniformGrid>

我使用了UniformGrid 而不是Grid，但它与Grid 的工作方式相同。

它的实现方式如下：

public class VerticalStretchDecorator : Decorator

  protected override Size MeasureOverride(Size constraint)
  
    var desired = base.Measure(constraint);
    if(desired.Height > constraint.Height || desired.Height==0)
      LayoutTransform = null;
    else
    
      var scale = constraint.Height / desired.Height;
      LayoutTransform = new ScaleTransform(scale, scale); // Stretch in both directions
    
  

【讨论】：

这段代码无法编译。 Measure() 返回 void 并且 MeasureOverride() 没有返回值