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?

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

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

的元素上

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

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

如有任何提示，我们将不胜感激。

Answer 1

将几何图形存储为资源，因为它是最难重复的部分（干）

<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>

如果需要很多颜色，最好创建一个转换器，它将使用几何资源和 return 请求颜色的 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>

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

WPF XAML - Inherit Bursh from Parent to Fascilitate Icon Reuse

wpf

xaml

imagesource