WPF XAML - 从父级继承画笔以促进图标重用

Question

我的 WPF 应用中有以下结构：

App.xaml：

<Application.Resources>
    <ResourceDictionary>
        <DrawingImage x:Key="mycion">
            <DrawingImage.Drawing>
                <GeometryDrawing Brush="{WHAT DO I PUT HERE?}" Geometry="M8,8L56,8 56,13.375 8,13.375 8,8z M8,24L8,18.625 56,18.625 56,24 8,24z M8,34.625L8,29.375 56,29.375 56,34.625 8,34.625z M8,45.375L8,40 56,40 56,45.375 8,45.375z M8,56L8,50.625 56,50.625 56,56 8,56z" />
            </DrawingImage.Drawing>
        </DrawingImage>
    </ResourceDictionary>
</Application.Resources>

Window1.xaml：

<Button HorizontalAlignment="Left" Height="49" Margin="33,36,0,0" VerticalAlignment="Top" Width="115">
    <!-- I want this image to be Red. -->
    <Image Height="25" Width="42" Source="{StaticResource mycion}"/>
</Button>

<Button HorizontalAlignment="Left" Height="49" Margin="33,136,0,0" VerticalAlignment="Top" Width="115">
    <!-- I want this image to be Green. -->
    <Image Height="25" Width="42" Source="{StaticResource mycion}"/>
</Button>

问题：

我如何允许更改绑定到期望ImageSource 的属性的资源（资源字典中的自定义图标实现为DrawingImage）的画笔颜色（在我的示例中为红色/绿色）？

基本上，我希望能够以某种方式将我的图标在 ResourceDictionaries 中定义为几何图形，但能够轻松地将这些图标设置为期望 ImageSource 的属性的值，并且能够更改/设置画笔用于在父对象或窗口的 XAML 中以某种方式呈现该几何图形（因此它会向下传播到图标资源）。

注意：我使用嵌套在Button 中的Image 仅作为示例。图标不一定要设置在图像上，但更常见的是作为其他元素的属性值，需要ImageSource。

我也对其他可能性持开放态度 - 不仅仅是使用 DrawingImage，但我对 WPF 相对较新，所以不知道如何轻松实现它，因为：

• 我的图标表示为几何图形
• 我确实需要能够基于每个 UIElement（使用图标）设置画笔
• 我不想将图标设置为元素的（一部分）内容 - 这太麻烦和复杂（处理简单按钮的布局 - 如果您想要同时拥有图标和文本等） .

任何关于此事的提示将不胜感激。

Answer 1

将几何存储为资源，因为它是最难重复的部分 (DRY)

<Geometry x:Key="ico">M8,8L56,8 56,13.375 8,13.375 8,8z M8,24L8,18.625 56,18.625 56,24 8,24z M8,34.625L8,29.375 56,29.375 56,34.625 8,34.625z M8,45.375L8,40 56,40 56,45.375 8,45.375z M8,56L8,50.625 56,50.625 56,56 8,56z</Geometry>

并为每种颜色创建一个DrawingImage（GeometryDrawing与DrawingImage分开以使代码更短）

<GeometryDrawing x:Key="red"  Brush="Red" Geometry="{StaticResource ico}" />
<DrawingImage x:Key="redIcon" Drawing="{StaticResource red}"/>

<GeometryDrawing x:Key="green"  Brush="Green" Geometry="{StaticResource ico}" />
<DrawingImage x:Key="greenIcon" Drawing="{StaticResource green}"/>

用法

<Button HorizontalAlignment="Left" Height="49"  VerticalAlignment="Top" Width="115">
    <Image Height="25" Width="42" Source="{StaticResource redIcon}"/>
</Button>

<Button HorizontalAlignment="Left" Height="49" VerticalAlignment="Top" Width="115">
    <Image Height="25" Width="42" Source="{StaticResource greenIcon}"/>
</Button>

如果需要很多颜色，最好创建一个转换器，它将使用几何资源并返回所需颜色的 DrawingImage

---

我正在谈论的转换器示例：

public class GeometryColorConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // getting geometry from App resources
        var g = (Geometry)value;

        // set Black as default color 
        string colorName = (string)parameter ?? "Black";

        // parsing color name
        var color = (Color)ColorConverter.ConvertFromString(colorName);

        // creating Image
        return new DrawingImage
        {
            Drawing = new GeometryDrawing(new SolidColorBrush(color), null, g)
        };            
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

及用法：

<local:GeometryColorConverter x:Key="paint"/>

<Button HorizontalAlignment="Left" Height="49" VerticalAlignment="Top" Width="115">
    <Image Height="25" Width="42" 
        Source="{Binding Source={StaticResource ico}, 
                         Converter={StaticResource paint}, 
                         ConverterParameter=Orange}"/>
</Button>