title: Add an 'X' to clear TextInput when User has entered Text
body: <p>I  have a UX class called InputWithLabel that includes both a label and a TextInput.</p>
  
  <p>I am trying to add an 'X' to it that can be used to clear the input text. My plan is to later add the functionality to only display this 'X' when there is actual text in the input field.</p>
  
  <p>For now though, I can't figure out how to do this while not allowing the input to go over top of the 'X'. If you think it's a bug, I'll clean it up and report it as such but I suspect it's just something simple I don't understand so I thought I'd just ask you about it... I tried a number of ideas but none of them seemed to work for me...</p>
  
  <pre><code>&lt;StackPanel ux:Class="InputWithLabel" Width="50%"&gt;
      &lt;string ux:Property="Label" /&gt;
      &lt;string ux:Property="Value"/&gt;
      &lt;string ux:Property="IsPassword"/&gt;
      &lt;Text Color="#28549b" FontSize="12" Margin="0,12,0,0" Value="{ReadProperty Label}"/&gt;
  
      &lt;Rectangle CornerRadius="2" StrokeWidth="1" StrokeColor="#bdbebf"&gt;
          &lt;TextInput FontSize="16" Value="{Property Value}" IsPassword="{ReadProperty IsPassword}"/&gt;
          &lt;Panel ux:Name="ClearButton" Alignment="Right"&gt;
              &lt;Rectangle SnapToPixels="True" Height="1px" Width="10px" Color="#bdbebf"&gt;
                  &lt;Rotation Degrees="45"/&gt;
              &lt;/Rectangle&gt;
              &lt;Rectangle SnapToPixels="True" Height="1px" Width="10px" Color="#bdbebf"&gt;
                  &lt;Rotation Degrees="-45"/&gt;
              &lt;/Rectangle&gt;
          &lt;/Panel&gt;   
      &lt;/Rectangle&gt;
  &lt;/StackPanel&gt;
  </code></pre>