如何在 UWP 中使 PathIcon 拉伸

Posted 2023-04-12

【中文标题】如何在 UWP 中使 PathIcon 拉伸

【英文标题】：How to make PathIcon stretch in UWP

【发布时间】：2021-03-11 15:58:18

【问题描述】：

我想将PathIcon 与文本使用相同的大小，例如NavigationItem。我尝试使用<Image> 来实现它。

image

但我想使用图标，因为它可以在深色或白色模式下自动更改颜色。

<StackPanel Orientation="Horizontal" >
    <Rectangle Width="20" Fill="BlanchedAlmond"/>
    <PathIcon Data="StaticResource PowerPlantIcon"/>
    <Rectangle Width="20" Fill="BlanchedAlmond"/>
    <PathIcon Data="StaticResource PowerPlantIcon" Height="20"/>
    <TextBlock Text="This is a Text" FontSize="20" VerticalAlignment="Center"/>
</StackPanel>

我明白了：

image

这是我在 App.xmal 中定义的自定义 PathIcon

<x:String x:Key="PowerPlantIcon">
   M43,50H36.12V46.24h5.27l4.85-4.85V8.55L41.38,3.76H36.12V0H43l7,7V43ZM13.87,50H7L0,43V7L7,0h6.88V3.76H8.55L3.76,8.55V41.38l4.79,4.79h5.33Zm4.7-7.06L32.46,23.59l-7-.58L31.35,8.7H20.29L17.56,25.53l4.44.55Z
</x:String>

我发现图标大小已自动设置为 50x50，无法通过设置宽度或高度来更改。

搜索所有我能找到的东西后，没有找到使PathIcon拉伸的解决方案。

【参考方案1】：

您可以通过将PathIcon 放入ViewBox 来调整PathIcon 的大小。您可以将ViewBox控件的Width属性和Height属性绑定到TextBlock控件，实现拉伸效果。

请检查以下代码作为参考：

<StackPanel Orientation="Horizontal" >
    <Rectangle Width="20" Fill="BlanchedAlmond"/>
    <PathIcon Data="StaticResource PowerPlantIcon"/>
    <Rectangle Width="20" Fill="BlanchedAlmond"/>
    
    <Viewbox Height="Binding Path=ActualHeight,ElementName=textBlock" Width="Binding Path=ActualHeight,ElementName=textBlock">
        <PathIcon Data="StaticResource PowerPlantIcon"/>
    </Viewbox>
    <TextBlock x:Name="textBlock" Text="This is a Text" FontSize="20" VerticalAlignment="Center"/>
</StackPanel>