title: How to adjust buttons around a textblock?
body: <p>I am trying to get the two buttons (phaseBackButton on the left, and phaseForwardButton on the right) that I have to stick to the sides of the textblock (PhaseDisplay) located on the top left of the screen. For example, when PhaseDisplay enlarges for the word Application, I want the two arrow buttons on the side to adjust with it, instead of cutting it off/ overlapping it. I have read several posts on this topic but none of them have touched on this topic specifically.</p>
  <p><img src="https://i.stack.imgur.com/NJ7ln.png" alt="Picture of the program" /></p>
  <pre class="lang-xml prettyprint-override"><code>&lt;TextBlock x:Name=&quot;PhaseDisplay&quot; HorizontalAlignment=&quot;Left&quot; Margin=&quot;44,81,0,0&quot; Text=&quot;TextBlock&quot; TextWrapping=&quot;Wrap&quot; VerticalAlignment=&quot;Top&quot;/&gt;
  &lt;Button x:Name=&quot;PhaseForwardButton&quot; Click=&quot;PhaseForward&quot; Background=&quot;Transparent&quot; BorderBrush=&quot;Transparent&quot; HorizontalAlignment=&quot;Left&quot; Margin=&quot;110,80,0,0&quot; VerticalAlignment=&quot;Top&quot; Height=&quot;21&quot; Width=&quot;21&quot;&gt;
      &lt;DynamicResource ResourceKey=&quot;Phase_Forward_Icon&quot; /&gt;
  &lt;/Button&gt;
  &lt;Button x:Name=&quot;PhaseBackButton&quot; Click=&quot;PhaseBack&quot; Background=&quot;Transparent&quot; BorderBrush=&quot;Transparent&quot; HorizontalAlignment=&quot;Left&quot; Margin=&quot;18,80,0,0&quot; VerticalAlignment=&quot;Top&quot; Height=&quot;21&quot; Width=&quot;21&quot;&gt;
      &lt;DynamicResource ResourceKey=&quot;Phase_Back_Icon&quot; /&gt;
  &lt;/Button&gt;
  </code></pre>