运行时XAML SVG颜色更改

我们有一组SVG存储在资源字典中。运行时XAML SVG颜色更改

例子：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <DrawingImage x:Key="Bell"> 
     <DrawingImage.Drawing> 
      <DrawingGroup Opacity="1"> 
       <DrawingGroup.Children> 
        <DrawingGroup Opacity="1"> 
         <DrawingGroup.Children> 
          <DrawingGroup Opacity="1"> 
           <DrawingGroup.Children> 
            <GeometryDrawing Brush="#FF000000" Pen="{x:Null}"> 
             <GeometryDrawing.Geometry> 
              <PathGeometry FillRule="Nonzero" Figures="........." /> 
             </GeometryDrawing.Geometry> 
            </GeometryDrawing> 
           </DrawingGroup.Children> 
          </DrawingGroup> 
         </DrawingGroup.Children> 
        </DrawingGroup> 
       </DrawingGroup.Children> 
      </DrawingGroup> 
     </DrawingImage.Drawing> 
    </DrawingImage> 
</ResourceDictionary>

如果您发现该GeometryDrawing刷机设置为＃FF000000（黑色）。我们面临的问题是允许视图显示此SVG并在运行时分配颜色（通过绑定）

我们的窗口（视图）的资源字典中包含Window.Resources中的图标。

我们正在寻找像这样的解决方案：

<Image Source="{StaticResource Bell}" Fill="#FF884422"/>

来源

2015-04-08 Ealianis

这似乎是很多绒毛的，我个人只是[它们导出（http://www.mikeswanson.com/xamlexport/）为XAML并将它们转换为模板化的ContentControl，我可以将所有这些东西作为依赖属性传递给一个班轮中的子元素，并将这些模板存储在资源字典中。 –

这看起来像我要采取的路径，你有一个你可以分享的例子吗？ – Ealianis

是的，我开会的时间只有一分钟，但我会在午餐后回到这个位置，一旦我得到秒，我会立即挂断。 –

通过建立Paolo的非工作答案，我能够解决这个问题。

的 “MYIMAGE” 类：

Public Class MyImage 
    Inherits System.Windows.Controls.Image 

    Public Property Color As System.Windows.Media.SolidColorBrush 

End Class

里面的资源字典，分配DrawingImage到的MYIMAGE风格的来源二传手：

<Style TargetType="{x:Type local:MyImage}" x:Key="Bell"> 
    <Setter Property="Source"> 
     <Setter.Value> 
      <DrawingImage> 
       <DrawingImage.Drawing> 
        <DrawingGroup Opacity="1"> 
         <DrawingGroup.Children> 
          <DrawingGroup Opacity="1"> 
           <DrawingGroup.Children> 
            <DrawingGroup Opacity="1"> 
             <DrawingGroup.Children> 
              <GeometryDrawing Brush="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:MyImage}}, Path=Color}" Pen="{x:Null}">

与它的其余部分下面为你” d期望。

内窗口的XAML文件：

<Window 
    ... 
    xmlns:local="clr-namespace:AppNameHere"> 
    <Window.Resources> 
     <ResourceDictionary Source="DictionaryName.xaml" /> 
    </Window.Resources> 
    .... 
    <Grid Background="Black"> 
     <local:MyImage Color="Chartreuse" Width="30" Height="30" Style="{StaticResource Bell}" /> 
    </Grid> 
    ... 
</Window>

这里的结果：http://i.stack.imgur.com/7JNyH.png

来源

2015-04-10 17:04:38

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:WpfApplication1" 
    Title="MainWindow" Height="350" Width="525" > 
<Window.Resources> 
    <DrawingImage x:Key="Bell1"> 
     <DrawingImage.Drawing> 
      <DrawingGroup Opacity="1"> 
       <DrawingGroup Opacity="1"> 
        <DrawingGroup Opacity="1"> 
         <GeometryDrawing Brush="{Binding Color}" Pen="{x:Null}"> 
          <GeometryDrawing.Geometry> 
           <PathGeometry FillRule="Nonzero" Figures="M 10,100 C 10,300 300,-200 300,100" /> 
          </GeometryDrawing.Geometry> 
         </GeometryDrawing> 
        </DrawingGroup> 
       </DrawingGroup> 
      </DrawingGroup> 
     </DrawingImage.Drawing> 
    </DrawingImage> 
</Window.Resources> 
<Grid> 
    <local:MyImage DataContext="{Binding ElementName=myImage, Mode=OneWay}" x:Name="myImage" Color="Red" Source="{StaticResource Bell1}" ></local:MyImage> 

</Grid>

来源

2015-04-08 15:53:45

的DrawingImage将接收相同的datacontext为窗口，这样你就可以在颜色的属性绑定的窗口查看模型。

Dictionary1.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <DrawingImage x:Key="Bell"> 
     <DrawingImage.Drawing> 
      <DrawingGroup Opacity="1"> 
       <DrawingGroup.Children> 
        <DrawingGroup Opacity="1"> 
         <DrawingGroup.Children> 
          <DrawingGroup Opacity="1"> 
           <DrawingGroup.Children> 
            <GeometryDrawing Brush="{Binding IconColor}" Pen="{x:Null}"> 
             <GeometryDrawing.Geometry> 
              <PathGeometry FillRule="Nonzero" Figures="........." /> 
             </GeometryDrawing.Geometry> 
            </GeometryDrawing> 
           </DrawingGroup.Children> 
          </DrawingGroup> 
         </DrawingGroup.Children> 
        </DrawingGroup> 
       </DrawingGroup.Children> 
      </DrawingGroup> 
     </DrawingImage.Drawing> 
    </DrawingImage> 
</ResourceDictionary>

MyTestWindow.xaml

<Window x:Class="MyTestWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">   
    <Window.Resources> 
     <ResourceDictionary Source="Dictionary1.xaml" /> 
    </Window.Resources> 
    <Grid> 
     <Image Source="{StaticResource Bell}" /> 
    </Grid> 
</Window>

然后视图模型将需要一个iconColor通过性能。

来源

2015-04-08 18:09:07 MHollis

看一看这个工具： https://github.com/BerndK/SvgToXaml

它都能SVG的自动转换成一个XAML。颜色是分开的，可以一次为所有图像设置，也可以为单个图像设置。包括在运行时更改颜色的示例代码。

的工具也是一个SVG浏览器，浏览器...

来源

2015-05-07 18:56:10 BerndK