title: Button Design Issue
body: <p>On my application I have a side bar which looks like this:</p>
  <p><img src="https://i.stack.imgur.com/G2KTw.png" alt="enter image description here" /></p>
  <p><em>The Admin bit is just a header</em></p>
  <p>Now at the moment I have coded these to be <code>Buttons</code>. They don't really have any effect on the click or anything. I want to change these to <code>TabItems</code> so it has the effect of coming out to the side.</p>
  <p>I have tried doing this but when I add a <code>width</code> to a <code>TabItem</code> the effect goes and it just looks like a <code>Button</code>.</p>
  <p><img src="https://i.stack.imgur.com/HCbPW.png" alt="enter image description here" /></p>
  <p>As you can see that the <code>TabItem</code> just looks like a <code>Button</code>, the effect has gone.</p>
  <p>Do you guys have any suggestions on what I could do to make mine look better with an <code>Animation</code> or how I can fix the <code>TabItem</code> issue?</p>
  <p><strong>EDIT:</strong></p>
  <p>I have changed my TabItems to Buttons, but I am having a massive problem. I have 10 different buttons on the left hand side and when I click one, the animation appears and it ends up like this:</p>
  <p><img src="https://i.stack.imgur.com/wX6KT.png" alt="enter image description here" /></p>
  <p>But as you can see from the picture, when I click another button below the same animation happens but the previous button clicked doesn't go back to the normal state.</p>
  <p><strong>How can reset the storyboard animation on the previous clicked button, when I click another button.</strong></p>