綁定到通用UI元素/ XAML接口

Question

我有一個DrawingImage用作矢量圖像佔位符。 此外，還有一些樣式可以將相應的DrawingImage作爲我的UserControl自定義按鈕中的圖像使用。

到目前爲止，一切都很好，但我只是意識到我目前的方法已經導致我的DrawingImages不可重用，因爲它們的Brush屬性硬綁定到控件，它們被用於，如下：現在

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

，我試圖想出一個辦法讓它們必然不是直接到元素，而是某種通用的元素（similairly的接口工作）的，這樣的代碼將肯定任何與之綁定的東西都具有刷子相關屬性。

到目前爲止，我沒有找到它。

我也嘗試通過尋找一個祖先，仍然沒有運氣。

有沒有一種或多或少的常見做法綁定到未知的元素，有一定的依賴屬性，而不會直接暴露他們？

Answer 1

事實上，沒有辦法直接做你所要求的。原因是，當您將DrawingImage定義爲資源並將其用作圖像的源時，則不會創建該資源的副本，而是會爲每個圖像查看相同的資源。因此，DrawingImage在可視化樹中根本不能有父項，所以沒有可控制的綁定。

這裏有兩個選項。一種是使用Geometry作爲資源，而不是DrawingImage。然後，您可以創建一些引用此Geometry的DrawingImage資源並使用不同的顏色。或根本不使用DrawingImage，但直接使用幾何（例如，通過Path）。實際上，如何使用和組合幾何資源有很多種方法。我只是給幾個例子在這裏：

<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綁定到一些祖先財產資源。但在這種情況下，必須使用屬性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"/> 

每次引用它的時候，新副本將被創建。

但第一種方式更靈活。