如何缩放使用DrawingBrush插入的SVG图像?
能否缩放DrawingImage中的SVG路径图形?
可以,你可以通过以下几种方式实现缩放:
1. 直接给几何图形添加缩放变换
通过给PathGeometry设置ScaleTransform,能精确控制图形的缩放比例和缩放中心,适合需要微调的场景:
<Style x:Key="HamburgerMenuItemStyle" TargetType="{x:Type MenuItem}"> <Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}"/> <Setter Property="Icon"> <Setter.Value> <DrawingImage> <DrawingImage.Drawing> <GeometryDrawing Brush="Red"> <GeometryDrawing.Geometry> <PathGeometry Figures="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z"> <PathGeometry.Transform> <!-- ScaleX/Y是缩放比例,CenterX/Y是缩放中心 --> <ScaleTransform ScaleX="0.7" ScaleY="0.7" CenterX="24" CenterY="21"/> </PathGeometry.Transform> </PathGeometry> </GeometryDrawing.Geometry> </GeometryDrawing> </DrawingImage.Drawing> </DrawingImage> </Setter.Value> </Setter> </Style>
2. 用Image控件包裹并设置尺寸
将DrawingImage放到Image控件中,通过设置Image的Width/Height,配合DrawingImage的Stretch属性让图形自适应尺寸:
<Style x:Key="HamburgerMenuItemStyle" TargetType="{x:Type MenuItem}"> <Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}"/> <Setter Property="Icon"> <Setter.Value> <Image Width="18" Height="18"> <Image.Source> <DrawingImage Stretch="Uniform"> <DrawingImage.Drawing> <GeometryDrawing Geometry="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z" Brush="Red"/> </DrawingImage.Drawing> </DrawingImage> </Image.Source> </Image> </Setter.Value> </Setter> </Style>
Stretch="Uniform"会保持图形的宽高比,避免变形。
3. 使用Viewbox自动缩放
用Viewbox包裹DrawingImage,它会自动按比例将图形缩放到指定的Viewbox尺寸,适合需要让图形自适应容器空间的场景:
<Style x:Key="HamburgerMenuItemStyle" TargetType="{x:Type MenuItem}"> <Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}"/> <Setter Property="Icon"> <Setter.Value> <Viewbox Width="22" Height="22"> <DrawingImage> <DrawingImage.Drawing> <GeometryDrawing Geometry="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z" Brush="Red"/> </DrawingImage.Drawing> </DrawingImage> </Viewbox> </Setter.Value> </Setter> </Style>
内容的提问来源于stack exchange,提问作者Aim
相关产品推荐
相关产品推荐

