title: Notebook-like background for a TextBox in a Windows Phone App
body: <p>I am trying to create an application to take notes for windows phone 8.1
  I want to give the user,a notebook type of feel.
  For this I have created the UI for notes, the XAML is:</p>
  
  <pre><code>&lt;Grid Margin="0,12.333,0,-0.333"&gt;
      &lt;Grid.Background&gt;
          &lt;ImageBrush ImageSource="Images/notebookpaper.jpg"/&gt;
      &lt;/Grid.Background&gt;
      &lt;TextBox TextWrapping="Wrap" Background="{x:Null}" Text="" BorderBrush="{x:Null}" HorizontalAlignment="Left" Margin="60,96,0,0"  VerticalAlignment="Top" Height="480" Width="340" BorderThickness="0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" FontFamily="Arial" TextChanged="TextBox_TextChanged" AcceptsReturn="True" FontSize="24.8"/&gt;
      &lt;TextBlock Text="Date : " HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="246,10,0,0" Height="20" Width="59"/&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>The image notebookpaper.jpg looks like this:
  <img src="https://i.stack.imgur.com/EzVcn.jpg" alt="enter image description here"></p>
  
  <p>When user types in the text in text box, it looks like:
  <img src="https://i.stack.imgur.com/faOET.png" alt="enter image description here"></p>
  
  <p>The problem is that, some characters appear a little above the line, some exactly on the line etc. which looks odd. Also, when I try to scroll, UI appears as:
  <img src="https://i.stack.imgur.com/2bYWd.png" alt="enter image description here"></p>
  
  <p>The text appears striked out, as only the text scrolls and not the background image.
  Also I want to be able to provide user a list of 5-6 fonts out of which they can select which one to use for typing the notes.</p>
  
  <p>What should I do, so that the text appears properly aligned and text scrolls properly.
  Is there any other way to do this ?</p>