Button Design Issue

Question

On my application I have a side bar which looks like this:

The Admin bit is just a header

Now at the moment I have coded these to be Buttons. They don't really have any effect on the click or anything. I want to change these to TabItems so it has the effect of coming out to the side.

I have tried doing this but when I add a width to a TabItem the effect goes and it just looks like a Button.

As you can see that the TabItem just looks like a Button, the effect has gone.

Do you guys have any suggestions on what I could do to make mine look better with an Animation or how I can fix the TabItem issue?

EDIT:

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:

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.

How can reset the storyboard animation on the previous clicked button, when I click another button.

Answer 1

In my opinion, using a stack of buttons in this case is preferable. Using a TabControl here does not seem necessary and will complicate things for you. Check this MSDN article for a great tutorial on doing what you want.

I hope this helps.

---

Edit. to address question about shape...

If you want to inherit the default system colours/styles for a Button you can use TemplateBindings within the button Template. For example, if you wanted to create a custom-shaped button that had the same background colour as the system one

<Button>
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <!-- circle to have inherited colour -->
                <Ellipse Fill="{TemplateBinding Background}" Height="50" Width="50" />
                <ContentPresenter />
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

The Ellipse will then inherit the background colour from the Button, however it is set. To do this in an animation will be more involved, but not at all impossible...