title: Changing button background in ControlTemplate DataTrigger
body: <p>I'd like to define a WPF <code>ControlTemplate</code> for a "color swatch" button. Essentially, I want to be able to use the template like this:</p>
  
  <p><code>&lt;Button Template="{StaticResource SwatchButtonTemplate}" Background="{Binding ActiveColor}"&gt;</code></p>
  
  <p>Where <code>ActiveColor</code> is a <code>Color</code> property in the data context. I've been able to achieve that with this template:</p>
  
  <pre><code>&lt;ControlTemplate x:Key="SwatchButtonTemplate" TargetType="{x:Type Button}"&gt;
      &lt;Border Name="OuterBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource BorderBrush}" Background="{TemplateBinding Background}"&gt;
          &lt;Border Name="InnerBorder" BorderThickness="0" BorderBrush="White" Background="{TemplateBinding Background}"&gt;
              &lt;ContentPresenter/&gt;
          &lt;/Border&gt;
      &lt;/Border&gt;
      &lt;ControlTemplate.Triggers&gt;
          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
              &lt;Setter TargetName="OuterBorder" Property="BorderThickness" Value="1"/&gt;
              &lt;Setter TargetName="InnerBorder" Property="BorderThickness" Value="1"/&gt;
              &lt;Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource MouseOverAccentBrush}"/&gt;
          &lt;/Trigger&gt;
      &lt;/ControlTemplate.Triggers&gt;
  &lt;/ControlTemplate&gt;
  </code></pre>
  
  <p>But now what I'd like to do is use a special brush for the button background if the color is transparent (e.g. display a red "X" in the background if the color is transparent).</p>
  
  <p>I can't seem to figure out how to set up a trigger in the template that checks the background color, and if it is transparent, use a different brush for the Background property. I've tried adding a DataTrigger to the template:</p>
  
  <pre><code>    &lt;ControlTemplate.Triggers&gt;
          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
              ...
          &lt;/Trigger&gt;
          &lt;DataTrigger Binding="{TemplateBinding Background}" Value="#00000000"&gt;
              &lt;Setter TargetName="InnerBorder" Property="Background" Value="{StaticResource transparent_swatch_brush}"/&gt;
          &lt;/DataTrigger&gt;
      &lt;/ControlTemplate.Triggers&gt;
  </code></pre>
  
  <p>But I get a XamlParseException when using this.</p>
  
  <p>Edit: The full usage of this template is in a list of swatch buttons, and the source of the list is bound to an <code>ObservableCollection&lt;Brush&gt;</code> called <code>ColorList</code> populated with <code>SolidColorBrushes</code> (one of which is transparent)</p>
  
  <pre><code>&lt;ItemsControl ItemsSource="{Binding ColorList}"&gt;
      &lt;ItemsControl.ItemTemplate&gt;
          &lt;DataTemplate&gt;
              &lt;Button x:Name="button" Background="{Binding}"
                      Template="{StaticResource SwatchButtonTemplate}"/&gt;
          &lt;/DataTemplate&gt;
      &lt;/ItemsControl.ItemTemplate&gt;
      &lt;ItemsControl.ItemsPanel&gt;
          &lt;ItemsPanelTemplate&gt;
              &lt;UniformGrid Height="20" Rows="1" /&gt;
          &lt;/ItemsPanelTemplate&gt;
      &lt;/ItemsControl.ItemsPanel&gt;
  &lt;/ItemsControl&gt;
  </code></pre>
  
  <p>And the full template definition:</p>
  
  <pre><code>&lt;ControlTemplate x:Key="SwatchButtonTemplate" TargetType="{x:Type Button}"&gt;
      &lt;Border Name="OuterBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource BorderBrush}" Background="{TemplateBinding Background}"&gt;
          &lt;Border Name="InnerBorder" BorderThickness="0" BorderBrush="White" Background="{TemplateBinding Background}"&gt;
              &lt;ContentPresenter/&gt;
          &lt;/Border&gt;
      &lt;/Border&gt;
      &lt;ControlTemplate.Triggers&gt;
          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
              &lt;Setter TargetName="OuterBorder" Property="BorderThickness" Value="1"/&gt;
              &lt;Setter TargetName="InnerBorder" Property="BorderThickness" Value="1"/&gt;
              &lt;Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource MouseOverAccentBrush}"/&gt;
          &lt;/Trigger&gt;
          &lt;DataTrigger Binding="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="#00ffffff"&gt;
              &lt;Setter TargetName="InnerBorder" Property="Background" Value="{StaticResource transparent_swatch_brush}"/&gt;
          &lt;/DataTrigger&gt;
      &lt;/ControlTemplate.Triggers&gt;
  &lt;/ControlTemplate&gt;
  </code></pre>