xaml - 如何将位图图像更改为矢量路径

Question

在我的 Windows Phone 8 应用程序中，我使用一组图标。这些图标以不同的大小和颜色多次使用。现在我只有来自同一图标的多个 png 文件来涵盖所有这些变体。

他如何用矢量图像处理这个问题？我的最终目标是将矢量路径存储到例如资源文件并将其用作“图像源”，在我的 View 中设置图像大小和颜色，而不是在资源文件中。

假设我有这样的 Canvar:

<Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="23.75" Height="49.4791" Canvas.Left="26.9167" Canvas.Top="13.8542" Stretch="Fill" Fill="#FF000000" Data="F1 M 26.9167,13.8542L 50.6666,13.8542L 50.6667,39.5833L 26.9167,63.3333L 26.9167,13.8542 Z "/>
</Canvas>

如何将其存储到资源并将其用作图像源？

欢迎提出如何处理此问题的所有建议和想法。

更新

根据 Chris W 的回答，我得出了这个解决方案:

<Style x:Key="Marker" TargetType="ContentControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
                <Canvas Width="76" Height="76">
                    <Path Fill="{TemplateBinding Foreground}" Data="m 26.9167 13.8542 23.7499 0 10e-5 25.7291 -23.75 23.75 0 -49.4791 z"></Path>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<ContentControl Style="{StaticResource Marker}" Foreground="Red" />

这工作正常，我可以重用 Mrker 样式并设置它的填充颜色。其中缺少的部分是，我应该如何调整 canvas/contetnControl 的大小？

现在 Canvas 尺寸是76*76，即使我改变输出图像仍然是相同的尺寸。我应该如何调整 Canvas 大小？

Answer 1

您问题的第一部分是 duplicate我认为 Illustrator 或其他套件可以做同样的事情，但要回答你的第二个问题，你可以将其放入 ContentControl 模板中，例如；

<Style x:Key="ReUsableResource" TargetType="ContentControl">
        <Setter Property="Height" Value="49.4791"/>
        <Setter Property="Width" Value="23.75"/>
        <Setter Property="Template">    
          <Setter.Value>
             <ControlTemplate TargetType="ContentControl">
                 <Canvas>
                       <Path Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Stretch="Fill" Fill="#FF000000" Data="F1 M 26.9167,13.8542L 50.6666,13.8542L 50.6667,39.5833L 26.9167,63.3333L 26.9167,13.8542 Z "/>
                 </Canvas>
             </ControlTemplate>
          </Setter.Value>
       </Setter>
    </Style>

然后像这样调用它；

<ContentControl Width="100" Height="50" Style="{StaticResource ReUsableResource}"/>

哦，只需阅读评论，将其从 Vector 转换为 XAML 另一个非常方便的资源是 Mike Swanson's XAML exporter plugin for Illustrator .

希望这有帮助。