Question

我正在使用SharpVectors在我的XAML中嵌入svg文件。

以下是我的Button ControlTemplate：

<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
<Border BorderThickness="{TemplateBinding BorderThickness}"
        BorderBrush="{TemplateBinding BorderBrush}"
        Padding="{TemplateBinding Padding}"
        Background="{TemplateBinding Background}"
        SnapsToDevicePixels="True">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <svgc:SvgViewbox x:Name="svgIcon" Grid.Column="0" Margin="{TemplateBinding Padding}" Height="20" Width="20" Stretch="Uniform" />
        <customUserControl:ExtendedBinding Grid.Column="0"
                                           Source="{Binding ElementName=svgIcon,Path=Source,Mode=TwoWay}"
                                           Target="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
        <ContentPresenter x:Name="contentPresenter"
                          Grid.Column="1"
                          Focusable="False"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"
                          RecognizesAccessKey="True"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    </Grid>
</Border>
</ControlTemplate>

以下是创建按钮的示例：

<Button Content="Text" Tag="../../../../Assets/Icons/cross.svg" Click="OnClick"/>

我获得的是一个SVG图标，按钮内有文字。

现在我想在MouseOver更改SVG的背景颜色（与here完全相同的行为，不同之处在于我的{没有“填充”标记{1}}。

有没有办法解决我的问题？

更新：我的SVG文件是标准SVG，如下所示：

svgc:SvgViewbox

Answer 1

GeomtryDrawing中必须有多个svg XAML，如下所示：

<DrawingGroup>
   <GeometryDrawing Brush="#FF71BF22">
        <GeometryDrawing.Geometry>
          <PathGeometry FillRule="Nonzero" Figures="M546.394,327.725L536.856,272.111 507.584,214.272C507.584,214.272,493.855,193.075,471.075,197.47L498.963,334.022 546.394,327.725z" />
        </GeometryDrawing.Geometry>
   </GeometryDrawing>

在您的代码中搜索所有此类Brush并更改其值，从而创建SVG XAML的两个副本，然后使用Trigger在MouseOver上交换这些副本。

编辑＃1（基于OP的第1条评论）

您可以使用AttachedProperty来处理MouseEnter的{{1}}和MouseLeave个事件。此AP允许您设置透明度级别。您的Path必须位于Path。

之下

Grid

假设您的SVG代码位于public static byte GetSvgProp(DependencyObject obj) { return (byte)obj.GetValue(SvgPropProperty); } public static void SetSvgProp(DependencyObject obj, byte value) { obj.SetValue(SvgPropProperty, value); } // Using a DependencyProperty as the backing store for SvgProp. This enables animation, styling, binding, etc... public static readonly DependencyProperty SvgPropProperty = DependencyProperty.RegisterAttached("SvgProp", typeof(byte), typeof(Window2), new PropertyMetadata((byte)0xFF, new PropertyChangedCallback(SvgPropChanged))); private static void SvgPropChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { ((Grid)d).Loaded += (s, args) => { var paths = ((Grid)s).Children.OfType<Path>(); foreach (Path p in paths) { p.MouseEnter += (s1, args1) => { Path p1 = (Path)s1; p1.Tag = p1.Fill; // save old value var c = ((SolidColorBrush)p1.Fill).Color; Color newColor = new Color() { A=(byte)e.NewValue, R = c.R, G = c.G, B = c.B }; p1.Fill = new SolidColorBrush() { Color = newColor }; }; p.MouseLeave += (s2, args2) => { Path p2 = (Path)s2; //p2.Fill.Opacity = 1.0; p2.Fill = (Brush)p2.Tag; // revert back to old value }; } }; }：

Grid

Answer 2

我找到了一种通过反射使其工作的解决方案。

还在github（https://github.com/ElinamLLC/SharpVectors/issues/88）仓库中发布了一个问题，以公开属性并轻松访问它们。

PowerBIClient

如果查看类代码（https://github.com/ElinamLLC/SharpVectors/blob/master/Source/SharpVectorRuntimeWpf/SvgDrawingCanvas.cs#L49），将看到绘制对象的private修饰符。通过反射，可以访问和修改项目。现在，您可以进行自己的AttachedBehavior或自定义绑定！

如何在MouseOver上交换SVG填充颜色？

2 个答案: