title: Display Header on Textbox only if text is set in UWP XAML
body: <p>I'm trying to modify the look &amp; feel of the textbox control in a UWP App to what our designers drawn in sketch. That includes to have a header only shown when no text is set in the textbox. </p>
  
  <p>I assume that I have to modify the visibility of the HeaderContentPresenter and its DataTemplate:</p>
  
  <pre><code>&lt;ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TextControlHeaderForeground}" FontWeight="Normal" Margin="0,0,0,2" Grid.Row="0" x:DeferLoadStrategy="Lazy" BorderThickness="0" Visibility="Collapsed" /&gt;
  </code></pre>
  
  <p>I wrote an IValueConvert to convert "empty string" to visibility, but I am stuck with the binding. I can't see any way to get the datacontext.</p>
  
  <pre><code>    &lt;Setter Property="HeaderTemplate"&gt;
          &lt;Setter.Value&gt;
              &lt;DataTemplate&gt;
                  &lt;TextBlock Text="{Binding}" Foreground="{StaticResource DarkGrey}" FontSize="10" FontFamily="TheSansB4SemiLight" Visibility="{Binding Converter={StaticResource EmptyStringToVisibilityConverter}, RelativeSource={RelativeSource Self}}"/&gt;
              &lt;/DataTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  </code></pre>
  
  <p>How can I access the text written on the textbox within the DataTemplate?</p>
  
  <p>Thanks</p>
  
  <h1>Update with Code</h1>
  
  <p><strong>I want this</strong>
  <a href="https://i.stack.imgur.com/PBYG8.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PBYG8.gif" alt="SampleControl"></a></p>
  
  <p><strong>MainPage.xaml</strong></p>
  
  <p>Three Textboxes I applied the same style to. </p>
  
  <pre><code>    &lt;TextBox Header="Username" PlaceholderText="Username" Grid.Column="1" HorizontalAlignment="Left" Height="67" Margin="20,143,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="295" Style="{StaticResource InputField}" /&gt;
      &lt;TextBox Header="Surname" PlaceholderText="Surname" Grid.Column="1" HorizontalAlignment="Left" Height="67" Margin="20,249,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="295" Style="{StaticResource InputField}"/&gt;
      &lt;TextBox Header="Name" PlaceholderText="Name" Grid.Column="1" HorizontalAlignment="Left" Height="67" Margin="20,196,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="295" Style="{StaticResource InputField}"/&gt;
  </code></pre>
  
  <p><strong>Styles.xaml</strong></p>
  
  <p>Basic shareable styles within a ResourceDict, refrenced in App.xaml. When I name the textboxes "InputField", the mechanism starts working, but obviously I have name conflicts and strange behavior. </p>
  
  <pre><code>&lt;Setter Property="HeaderTemplate"&gt;
          &lt;Setter.Value&gt;
              &lt;DataTemplate&gt;
                  &lt;TextBlock 
                      Foreground="{StaticResource DarkGrey}" 
                      FontSize="10" 
                      FontFamily="TheSansB4SemiLight"
                      Visibility="{Binding Text, Converter={StaticResource EmptyStringToVisibilityConverter}, ElementName=InputField}"
                      Text="{Binding Header, ElementName=InputField}"
                      /&gt;
              &lt;/DataTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  </code></pre>
  
  <p><strong>Question</strong></p>
  
  <p>What element within the Template must be named to be accessible through binding? I assume it's one of the elements the textbox control is made of, but I can't find out how.</p>
  
  <pre><code>&lt;Grid&gt;&lt;Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" CornerRadius="5"/&gt;
                      &lt;ContentControl x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource TextControlPlaceholderForeground}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1"/&gt;
                      &lt;Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="2" FontSize="{TemplateBinding FontSize}" IsTabStop="False" MinWidth="34" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" VerticalAlignment="Stretch" Visibility="Collapsed"/&gt;
                      &lt;ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TextControlHeaderForeground}" FontWeight="Normal" Margin="0,0,0,2" Grid.Row="0" x:DeferLoadStrategy="Lazy" BorderThickness="0" Visibility="Collapsed" /&gt;
                      &lt;ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled" Grid.ColumnSpan="2"/&gt;
                  &lt;/Grid&gt;
  </code></pre>