时间戳

首页 > 解决方案 > 将 GeometryDrawing 画笔绑定到自定义控件依赖属性

c# - 将 GeometryDrawing 画笔绑定到自定义控件依赖属性

问题描述

我想实现一个自定义控件，该控件显示一个位于资源字典中的图标，我可以使用依赖属性更改其颜色。

我有一堆转换为 xaml 的图标，它们都存储在 icons.xaml 资源字典中。

我创建了一个名为 Icon 的自定义控件，它继承自 Image，它有一个名为 IconBrush 的依赖属性。

我可以轻松地将自定义控件“Icon”的源设置为我在icons.xaml 中的DrawingImage。问题是我不知道如何将icons.xaml 中的GeometryDrawing 的Brush 属性绑定到我的Icon 依赖属性IconBrush，我该如何实现？

以下是icons.xaml 中存在的图标之一。

<Geometry x:Key="payGeometry1">F1 M480,480.00029z M0,0z M400,345.886719L379.625,333.679688C373.414062,329.964844,366.308594,328.003906,359.070312,328L328.40625,328C322.128906,327.988281,315.878906,328.796875,309.808594,330.398438L217.417969,355.199219C207.316406,357.988281,199.203125,365.511719,195.664062,375.375L114.398438,331.410156C107.808594,327.660156 100.09375,326.386719 92.648438,327.816406 89.839844,328.3125 87.117188,329.207031 84.558594,330.472656 78.78125,333.238281 73.988281,337.707031 70.816406,343.273438 68.042969,348.121094 66.585938,353.609375 66.585938,359.191406 66.5,370.589844 72.539062,381.152344 82.398438,386.863281L228.046875,474.007812C234.375,477.925781,241.664062,480,249.105469,480L361.824219,480C366.859375,480.003906,371.847656,479.050781,376.527344,477.199219L400,467.929688 400,480 480,480 480,320 400,320z M370.648438,462.320312C367.847656,463.425781,364.859375,463.996094,361.847656,464L249.105469,464C244.597656,463.996094,240.179688,462.726562,236.359375,460.335938L90.511719,373.089844C85.554688,370.226562 82.519531,364.921875 82.558594,359.199219 82.570312,356.394531 83.308594,353.636719 84.703125,351.199219 86.296875,348.4375 88.695312,346.222656 91.574219,344.855469 92.84375,344.238281 94.1875,343.800781 95.574219,343.558594 96.585938,343.371094 97.613281,343.273438 98.640625,343.273438 101.390625,343.265625 104.09375,343.984375 106.480469,345.351562L194.601562,392.96875C194.703125,393.457031 194.703125,393.9375 194.832031,394.425781 198.621094,408.390625 211.289062,418.089844 225.761719,418.105469 230.214844,417.699219 234.625,416.910156 238.945312,415.753906L322.0625,393.511719 317.9375,378.054688 235.089844,400.199219C231.441406,401.039062 226.734375,402 225.761719,402.082031 218.535156,402.09375 212.199219,397.265625 210.296875,390.296875 210.039062,389.328125 209.886719,388.335938 209.832031,387.335938 209.832031,387.335938 209.769531,385.398438 209.832031,384.71875 210.441406,378.027344 215.128906,372.410156 221.601562,370.609375L313.953125,345.902344C318.667969,344.640625,323.527344,344,328.40625,344L359.070312,344C363.414062,344,367.675781,345.179688,371.398438,347.410156L400,364.535156 400,450.71875z M416,336L464,336 464,464 416,464z M416,336</Geometry>
<Geometry x:Key="payGeometry2">F1 M480,480.00029z M0,0z M329.953125,64L287.039062,21.089844C273.566406,7.539062,255.234375,-0.0546875,236.128906,0L135.550781,0C129.34375,0.0078125,123.222656,1.457031,117.664062,4.222656L99.734375,13.191406C96.140625,15,92.148438,15.863281,88.128906,15.703125L80,15.417969 80,0 0,0 0,176 80,176 80,152 93.601562,152 98.441406,155.199219C111.984375,164.191406,127.753906,169.269531,144,169.863281L144,272 480,272 480,64z M64,160L16,160 16,16 64,16z M107.296875,141.886719L98.398438,136 80,136 80,31.425781 87.542969,31.695312C94.242188,31.933594,100.890625,30.492188,106.886719,27.503906L124.800781,18.535156C128.136719,16.867188,131.820312,16,135.550781,16L236.128906,16C250.988281,15.957031,265.25,21.863281,275.726562,32.398438L307.328125,64 241.3125,64 221.894531,44.585938 210.585938,55.894531 267.097656,112.410156C273.375,118.660156 273.394531,128.816406 267.144531,135.097656 260.890625,141.375 250.734375,141.394531 244.457031,135.144531L197.257812,87.945312 191.65625,92.746094C176.191406,105.878906,153.585938,106.214844,137.734375,93.542969L133.097656,89.785156 123.015625,102.214844 127.703125,106.015625C132.605469,109.933594,138.109375,113.035156,144,115.199219L144,153.855469C130.90625,153.273438,118.214844,149.136719,107.296875,141.886719z M221.097656,134.398438L233.167969,146.472656C245.699219,158.816406 265.816406,158.835938 278.367188,146.511719 266.625,164.695312 271.257812,188.894531 288.886719,201.453125 306.515625,214.011719 330.902344,210.484375 344.25,193.449219 357.597656,176.410156 355.1875,151.886719 338.773438,137.777344 322.363281,123.667969 297.753906,124.960938 282.914062,140.710938 288.378906,132.128906 289.355469,121.433594 285.535156,112L392.664062,112C396.105469,132.128906,411.871094,147.894531,432,151.335938L432,184.664062C411.871094,188.105469,396.105469,203.871094,392.664062,224L231.335938,224C227.894531,203.871094,212.128906,188.105469,192,184.664062L192,151.335938C203.433594,149.410156,213.773438,143.390625,221.097656,134.398438z M288,168C288,154.746094 298.746094,144 312,144 325.253906,144 336,154.746094 336,168 336,181.253906 325.253906,192 312,192 298.746094,192 288,181.253906 288,168z M464,256L160,256 160,118.550781C172.683594,119.503906,185.328125,116.269531,196,109.351562L209.648438,123C203.644531,131.15625,194.128906,135.980469,184,136L176,136 176,200 184,200C201.671875,200,216,214.328125,216,232L216,240 408,240 408,232C408,214.328125,422.328125,200,440,200L448,200 448,136 440,136C422.328125,136,408,121.671875,408,104L408,96 273.3125,96 257.3125,80 464,80z M464,256</Geometry>
<DrawingGroup x:Key="payDrawingGroup" ClipGeometry="M0,0 V480.00029 H480 V0 H0 Z">
    <DrawingGroup.Transform>
        <TranslateTransform X="0" Y="0.00029334536520764232" />
    </DrawingGroup.Transform>
    <GeometryDrawing Brush="{{Should bind here}}" Geometry="{StaticResource payGeometry1}" />
    <GeometryDrawing Brush="{{Should bind here}}" Geometry="{StaticResource payGeometry2}" />
</DrawingGroup>
<DrawingImage x:Key="payDrawingImage" Drawing="{StaticResource payDrawingGroup}" />

我的自定义控件，icon.cs

public class Icon : Image
{
    static Icon()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(Icon), new FrameworkPropertyMetadata(typeof(Icon)));
    }
    public Brush IconBrush
    {
        get { return (Brush)GetValue(IconBrushProperty); }
        set { SetValue(IconBrushProperty, value); }
    }

    public static readonly DependencyProperty IconBrushProperty =
        DependencyProperty.Register("IconBrush", typeof(Brush), typeof(Icon), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(255, 0, 255)), new PropertyChangedCallback(OnIconBrushChanged)));
    public Icon()
    {
        IconBrush = new SolidColorBrush(Color.FromRgb(240, 255, 5));
    }

    private static void OnIconBrushChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
    {
        Icon icon = sender as Icon;
        icon.IconBrush = (Brush)args.NewValue;
    }
}

下面是自定义控件的用法：

<components:Icon Source="{StaticResource payDrawingImage}" IconBrush="Blue" />

标签： c#.netwpfmvvmdependency-properties

解决方案

正如 Clemens 所建议的，它可以通过 predefined 更容易地完成System.Windows.Shapes.Path。

首先，定义一个引用“payGeometry1”和“payGeometry2”的样式。

<Style x:Key="PayPathStyle" TargetType="{x:Type Path}">
    <Setter Property="Width" Value="40"/>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Stretch" Value="Uniform"/>
    <Setter Property="Data">
        <Setter.Value>
            <CombinedGeometry Geometry1="{StaticResource payGeometry1}"
                              Geometry2="{StaticResource payGeometry2}"/>
        </Setter.Value>
    </Setter>
</Style>

其次，在 each 中，根据需要使用 BrushPath设置其属性。Shape.Fill

<Path Style="{StaticResource PayPathStyle}" Fill="Blue"/>

推荐阅读