title: WPF XAML - Creating a Button with Border, Path and text overlaying each other, all styles controlled by the Button
body: <p>I'm trying to create a <code>Button</code> that has a <code>Border</code> (rounded corners), which has a <code>Path</code> vector overlaying it and the <code>Path</code> has some text from <code>Label</code> on top of it.</p>
  
  <p>I've created triggers that when you hover over this Button the style of all these nested elements change.</p>
  
  <p><strong>The Problem</strong>
  I'm not sure where to place the Label text as I still need access to it from the code behind to get and set it text value, but I also need to trigger or bind its color to the Borders color which I can't access from inside the <code>Template</code> or outside to make this all work.</p>
  
  <p>Maybe I need to use a different layout structure? Although most of it is working fine so far except the <code>Label</code></p>
  
  <p><strong>Code inside xaml file</strong></p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Button x:Name="btn" Width="70" Height="70" Background="#FF474747"&gt;
          &lt;Button.Template&gt;
              &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                  &lt;Border x:Name="border1" BorderBrush="Gray" BorderThickness="3" CornerRadius="2" Background="#FF272727"&gt;
                      &lt;Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="pth"  Opacity="1" Fill="#FF515151" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center"&gt;
                          &lt;Path.Data&gt;
                              &lt;PathGeometry Figures="m 18.16782 0 -7.64541 5.81323 0 61.04669 L 0 66.85992 0 70 l 61.43133 0 0 -3.14008 -20.17455 0 0 -55.87557 L 18.16782 0 Z m -4.15996 15.70413 23.54902 0 0 1.69254 -20.74683 1.78854 0 15.00717 20.74683 1.78792 0 1.69254 -23.54902 0 0 -21.96871 z m 11.2761 5.08198 a 5.793155 5.793155 0 0 1 5.79266 5.79266 5.793155 5.793155 0 0 1 -5.79266 5.79328 5.793155 5.793155 0 0 1 -5.79328 -5.79328 5.793155 5.793155 0 0 1 5.79328 -5.79266 z" FillRule="evenodd"/&gt;
                          &lt;/Path.Data&gt;
                      &lt;/Path&gt;
                  &lt;/Border&gt;
  
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsMouseOver" Value="true"&gt;
                          &lt;Setter TargetName="border1" Property="BorderBrush"  Value="#FFDE2029"/&gt;
                          &lt;Setter TargetName="pth" Property="Fill" Value="#FFAAAAAA"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsPressed" Value="true"&gt;
                          &lt;Setter TargetName="border1" Property="BorderBrush"  Value="#FFFF445D"/&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Button.Template&gt;
      &lt;/Button&gt;
  
      &lt;Label x:Name="lblText" Content="Ab" HorizontalAlignment="Right" VerticalAlignment="Top" FontFamily="Arial"  Foreground="{Binding BorderBrush, ElementName=btn}" FontSize="22" /&gt;
  &lt;/Grid&gt;
  </code></pre>