c# - 绑定(bind)到通用 UI 元素/XAML 接口(interface)

Question

我有一个用作矢量图像占位符的 DrawingImage。此外，还有一些样式采用相应的 DrawingImage 并将其用作我的 UserControl 自定义按钮中的图像。

到目前为止一切都很好，但我刚刚意识到我当前的方法导致我的 DrawingImages 不可重用，因为它们的 Brush 属性硬绑定(bind)到控件，它们用于，如下所示:

<DrawingImage x:Key="addIcon">
        <DrawingImage.Drawing>
            <DrawingGroup>
                <GeometryDrawing Brush="{Binding Path=ImageBrush, ElementName=addButton}" Geometry="M438.2,0H51.6C23.1,0,0,23.2,0,51.6v386.6c0,28.5,23.2,51.6,51.6,51.6h386.6c28.5,0,51.6-23.2,51.6-51.6V51.6
                    C489.8,23.2,466.6,0,438.2,0z M465.3,438.2c0,14.9-12.2,27.1-27.1,27.1H51.6c-14.9,0-27.1-12.2-27.1-27.1V51.6
                    c0-14.9,12.2-27.1,27.1-27.1h386.6c14.9,0,27.1,12.2,27.1,27.1V438.2z" />
                <GeometryDrawing Brush="{Binding Path=ImageBrush, ElementName=addButton}" Geometry="M337.4,232.7h-80.3v-80.3c0-6.8-5.5-12.3-12.3-12.3s-12.3,5.5-12.3,12.3v80.3h-80.3c-6.8,0-12.3,5.5-12.3,12.2
                    c0,6.8,5.5,12.3,12.3,12.3h80.3v80.3c0,6.8,5.5,12.3,12.3,12.3s12.3-5.5,12.3-12.3v-80.3h80.3c6.8,0,12.3-5.5,12.3-12.3
                    C349.7,238.1,344.2,232.7,337.4,232.7z" />
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>

现在，我试图想出一种方法，让它们不直接绑定(bind)到元素，而是绑定(bind)到某种通用元素(类似于接口(interface)工作)，这样代码就可以确保绑定(bind)的任何东西对它而言，具有 Brush Dependency 属性。

到目前为止，我没能找到它。

我也试过通过搜索祖先，仍然没有运气。

Is there a more or less common practice to binding to unknown Elements, that have certain dependency properties, without exposing them directly?

Answer 1

其实没有办法直接按照你的要求去做。原因是，当您将 DrawingImage 定义为资源，然后将其用作图像源时，不会创建该资源的副本，而是每个图像都查看相同的资源。因此，DrawingImage 在可视化树中根本没有父级，因此没有要绑定(bind)的控件。

这里有两个选项。一种是使用Geometry 作为资源，而不是DrawingImage。然后，您可以创建一些引用此 Geometry 并使用不同颜色的 DrawingImage 资源。或者根本不使用 DrawingImage，而是直接使用 Geometry(例如，通过 Path)。实际上，Geometry 资源的使用和组合方式有很多种。我在这里只举几个例子:

<Window x:Class="FlipControlApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="MainWindow" Height="300" Width="300">
    <Window.Resources>
        <PathGeometry x:Key="addIconGeometry" Figures="M337.4,232.7h-80.3v-80.3c0-6.8-5.5-12.3-12.3-12.3s-12.3,5.5-12.3,12.3v80.3h-80.3c-6.8,0-12.3,5.5-12.3,12.2
                c0,6.8,5.5,12.3,12.3,12.3h80.3v80.3c0,6.8,5.5,12.3,12.3,12.3s12.3-5.5,12.3-12.3v-80.3h80.3c6.8,0,12.3-5.5,12.3-12.3
                C349.7,238.1,344.2,232.7,337.4,232.7z"/>

        <PathGeometry x:Key="iconBorderGeometry" Figures="M438.2,0H51.6C23.1,0,0,23.2,0,51.6v386.6c0,28.5,23.2,51.6,51.6,51.6h386.6c28.5,0,51.6-23.2,51.6-51.6V51.6
                C489.8,23.2,466.6,0,438.2,0z M465.3,438.2c0,14.9-12.2,27.1-27.1,27.1H51.6c-14.9,0-27.1-12.2-27.1-27.1V51.6
                c0-14.9,12.2-27.1,27.1-27.1h386.6c14.9,0,27.1,12.2,27.1,27.1V438.2z"/>

        <GeometryGroup x:Key="addIconWithBorderGeometry">
            <StaticResource ResourceKey="iconBorderGeometry"/>
            <StaticResource ResourceKey="addIconGeometry"/>
        </GeometryGroup>

        <DrawingImage x:Key="addIconBlack">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <GeometryDrawing Brush="Black" Geometry="{StaticResource addIconWithBorderGeometry}" />
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Window.Resources>

    <UniformGrid Columns="2">
        <Button Name="addButton0" Width="100" Height="100">
            <Image Source="{StaticResource addIconBlack}"/>
        </Button>

        <Button Width="100" Height="100" Foreground="Blue">
            <Image>
                <Image.Source>
                    <DrawingImage>
                        <DrawingImage.Drawing>
                            <DrawingGroup>
                                <GeometryDrawing Brush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Control}}"
                                                 Geometry="{StaticResource addIconGeometry}" />
                            </DrawingGroup>
                        </DrawingImage.Drawing>
                    </DrawingImage>
                </Image.Source>
            </Image>
        </Button>

        <Button Width="100" Height="100" Foreground="Green">
            <Grid>
                <Path Data="{StaticResource iconBorderGeometry}" Fill="Pink" Stretch="Uniform"/>
                <Path Data="{StaticResource addIconGeometry}" Fill="Purple" Stretch="Uniform" Margin="15"/>
            </Grid>
        </Button>

        <Button x:Name="addBtn" Width="100" Height="100" Foreground="Green">
            <Path Fill="{Binding Foreground, ElementName=addBtn}" Stretch="Uniform">
                <Path.Data>
                    <CombinedGeometry Geometry1="{StaticResource iconBorderGeometry}" Geometry2="{StaticResource addIconGeometry}"/>
                </Path.Data>
            </Path>
        </Button>
    </UniformGrid>
</Window>

另一种选择是使用整个Image 作为资源，并通过Brush 绑定(bind)到某些祖先属性。但在这种情况下，有必要使用属性x:Shared，因此资源必须在编译后的资源字典中声明(详情参见x:Shared)。

创建资源:

<ResourceDictionary>
    <Image x:Key="addIconImage2" x:Shared="False">
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <DrawingGroup>
                        <GeometryDrawing Brush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Control}}"
                            Geometry="M438.2,0H51.6C23.1,0,0,23.2,0,51.6v386.6c0,28.5,23.2,51.6,51.6,51.6h386.6c28.5,0,51.6-23.2,51.6-51.6V51.6
                            C489.8,23.2,466.6,0,438.2,0z M465.3,438.2c0,14.9-12.2,27.1-27.1,27.1H51.6c-14.9,0-27.1-12.2-27.1-27.1V51.6
                            c0-14.9,12.2-27.1,27.1-27.1h386.6c14.9,0,27.1,12.2,27.1,27.1V438.2z" />
                        <GeometryDrawing Brush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Control}}"
                            Geometry="M337.4,232.7h-80.3v-80.3c0-6.8-5.5-12.3-12.3-12.3s-12.3,5.5-12.3,12.3v80.3h-80.3c-6.8,0-12.3,5.5-12.3,12.2
                            c0,6.8,5.5,12.3,12.3,12.3h80.3v80.3c0,6.8,5.5,12.3,12.3,12.3s12.3-5.5,12.3-12.3v-80.3h80.3c6.8,0,12.3-5.5,12.3-12.3
                            C349.7,238.1,344.2,232.7,337.4,232.7z" />
                    </DrawingGroup>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image>
</ResourceDictionary>

然后使用它:

<Button Name="addButton3" Width="100" Height="100"
        Content="{StaticResource addIconImage}" Foreground="Red"/>
<Button Name="addButton4" Width="100" Height="100"
        Content="{StaticResource addIconImage}" Foreground="Green"/>

每次您引用它时，都会创建一个新副本。

但第一种方式更灵活。