如何在 UWP 中使 PathIcon 拉伸
How to make PathIcon stretch in UWP
我想使用 PathIcon
与文本大小相同,例如 NavigationItem
。我尝试使用 <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>
我明白了:
这是我在 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
拉伸的解决方案。
您可以通过将 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>
我想使用 PathIcon
与文本大小相同,例如 NavigationItem
。我尝试使用 <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>
我明白了:
这是我在 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
拉伸的解决方案。
您可以通过将 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>