我们在我们的应用程序中使用从Expression Design导出的矢量图标,但我注意到图标中的所有空白空间在拉伸的图像中显示时都会被剪掉。由于具有矢量图标的整个要点是允许它们很好地伸展和缩放,这看起来很奇怪。
这是一个例子。红色和蓝色星都是在32像素宽的文档中设计的,但蓝色星的尺寸要小得多。将stretch属性设置为Uniform突然使两个图标的大小相同。
是否有可能解决此问题并保留图标周围的空白?我想一个可能的解决方法是添加一个覆盖整个图标区域的透明背景矩形,但这对我来说似乎是一个糟糕的解决方案。
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="GeneralTest.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<DrawingImage x:Key="small_blue_star">
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="Blue" Geometry="F1 M 20.4989,22C 20.4634,22.0177 16.2771,19.0022 16.2416,19.0022C 16.2061,19.0022 12.0021,22.0177 11.9844,22C 11.9489,21.9823 13.4921,17.0332 13.4744,16.9977C 13.4744,16.9623 9.4655,14.0354 9.48323,13.9999C 9.48323,13.9644 14.45,14.0177 14.4855,13.9999C 14.5032,13.9822 16.2061,8.99765 16.2416,8.99765C 16.2771,8.99765 17.9623,13.9822 17.98,13.9999C 18.0155,14.0177 22.9823,13.9644 23,13.9999C 23,14.0354 18.9911,16.9623 18.9911,16.9977C 18.9734,17.0332 20.5166,21.9823 20.4989,22 Z "/>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="big_red_star">
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="Red" Geometry="F1 M 26.0781,32C 25.9941,32.0436 16.0823,24.6277 15.9983,24.6277C 15.9143,24.6277 5.96055,32.0436 5.91855,32C 5.83455,31.9564 9.48848,19.7856 9.44648,19.6983C 9.44648,19.6111 -0.0453207,12.4133 -0.00332647,12.326C -0.00332647,12.2388 11.7564,12.3697 11.8404,12.326C 11.8824,12.2824 15.9143,0.0243702 15.9983,0.0243702C 16.0823,0.0243702 20.0723,12.2824 20.1142,12.326C 20.1982,12.3697 31.958,12.2388 32,12.326C 32,12.4133 22.5082,19.6111 22.5082,19.6983C 22.4662,19.7856 26.1201,31.9564 26.0781,32 Z "/>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Window.Resources>
<StackPanel x:Name="LayoutRoot">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Stretch=None" Width="100"/>
<Image Source="{StaticResource big_red_star}" Width="32" Stretch="None"/>
<Image Source="{StaticResource small_blue_star}" Width="32" Stretch="None"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Stretch=Uniform" Width="100"/>
<Image Source="{StaticResource big_red_star}" Width="32" Stretch="Uniform" />
<Image Source="{StaticResource small_blue_star}" Width="32" Stretch="Uniform"/>
</StackPanel>
</StackPanel>
</Window>