Question

有没有一种方法可以将SVG图标创建为可以在多个位置（例如Button，Label和Icon在{{1}）中轻松工作的资源}？

示例

App.xaml

FileMenuItem

MainWindow.xaml

... 
<Application.Resources>
    <Icon x:Key="MyIcon" Data="...PathData..." />
</Application.Resources>
...

我尝试过的事情

我尝试将图标定义为... <MenuItem Header="Do Stuff" Icon="{StaticResource MyIcon}" /> ... <StackPanel> <Label Content="{StaticResource MyIcon}" /> <Button Content="{StaticResource MyIcon}" /> </StackPanel> ...和Geometry，但是两者都有复杂性。在Path的情况下，您必须指定一个Geometry元素并将其设置为Path属性，这会给代码增加很多麻烦。在某些情况下，使用Data可以解决此问题，但是对于Path，我发现我必须将路径包装在FileMenuItem或Canvas中，这再次给路径增加了一些麻烦代码。

Answer 1

经过一些研究和实验，我最终创建了一个Border，将UserControl包裹在Path中，然后提供了两个ContentControl，因此图标的{{可以设置1}}和DependencyProperty属性。

代码

SvgIcon.xaml.cs

Data

SvgIcon.cs

Stretch

用法示例

App.xaml

public partial class SvgIcon : UserControl
{
    public SvgIcon()
    {
        InitializeComponent();
    }

    public Geometry Data
    {
        get { return (Geometry) GetValue(DataProperty); }
        set { SetValue(DataProperty, value); }
    }

    public Stretch Stretch
    {
        get { return (Stretch) GetValue(StretchProperty); }
        set { SetValue(StretchProperty, value); }
    }

    public static readonly DependencyProperty DataProperty = DependencyProperty.Register("Data", typeof(Geometry), typeof(SvgIcon));
    public static readonly DependencyProperty StretchProperty = DependencyProperty.Register("Stretch", typeof(Stretch), typeof(SvgIcon));
}

MainWindow.xaml

<UserControl x:Name="Root" ...etc...>
    <ContentControl>
        <Path Data="{Binding Data, ElementName=Root}" Fill="{Binding Foreground, ElementName=Root}" Stretch="{Binding Stretch, ElementName=Root}" />
    </ContentControl>
</UserControl>

使用... <Application.Resources> <myns:SvgIcon x:Key="MyIcon" Data="...PathData..." Foreground="Black" /> </Application.Resources> ...方法有很多好处，主要是可以轻松地将样式应用于图标。但是，一个小痛点是将样式应用于资源文件外部的图标，例如更改文件菜单中的颜色。以下是如何实现此目的的示例。

App.xaml

...
<MenuItem Header="Do Stuff" Icon="{StaticResource MyIcon}" />
...
<StackPanel>
    <Label Content="{StaticResource MyIcon}" />
    <Button Content="{StaticResource MyIcon}" />
</StackPanel>
...

MainWindow.xaml

UserControl

也许还有其他聪明的解决方案，但这对于我想要实现的目标非常有效。

WPF SVG图标资源

1 个答案: