调整 wpf 材质设计图标的粗细

Posted 2023-04-12

【中文标题】调整 wpf 材质设计图标的粗细

【英文标题】：adjust the tickness of wpf material design icons

【发布时间】：2021-01-10 03:17:41

【问题描述】：

我有这个 UI，它利用了漂亮的 Material Design In XAML 及其图标包。

我想调整绘图线条的刻度，使其更细一些，例如本例中的小图标。

<ListBoxItem>
    <StackPanel Orientation="Horizontal">
        <materialDesign:PackIcon Kind="AccountsAddOutline" />
        <TextBlock Margin="10,0,0,0">Add user</TextBlock>
    </StackPanel>
</ListBoxItem>

<ListBoxItem>
    <StackPanel Orientation="Horizontal">
        <materialDesign:PackIcon Kind="DeleteForeverOutline" />
        <TextBlock Margin="10,0,0,0">Delete</TextBlock>
    </StackPanel>
</ListBoxItem>

我不知道库的 API 是否公开了这个属性，但可以肯定的是刻度是可调的，因为如果你把图标变大，这条线也会像这个例子一样变成刻度：

<materialDesign:PackIcon Kind="AccountsAddOutline" Height="40" Width="40" />

结果：

【参考方案1】：

您无法真正调整厚度。 PackIcon 的模板在 ViewBox 中实现为 Path，它可以拉伸和缩放它：

<ControlTemplate TargetType="x:Type local:PackIcon">
    <Border Background="TemplateBinding Background" 
            BorderBrush="TemplateBinding BorderBrush"
            BorderThickness="TemplateBinding BorderThickness">
        <Viewbox FlowDirection="TemplateBinding FlowDirection">
            <Canvas Width="24" Height="24">
                <Path Data="Binding Data, RelativeSource=RelativeSource TemplatedParent"                                   
                      Fill="TemplateBinding Foreground" />
            </Canvas>
        </Viewbox>
    </Border>
</ControlTemplate>

您可以通过创建没有Viewbox 的自定义模板来摆脱缩放。

【讨论】：

可以不通过PackIcon直接使用Path吗？

@AgostinoX：PackIcon 定义了Path。但如前所述，您可以重新模板化 PackIcon 元素。