WPF Create Sidebar Navigation

Question

I am curious about how to create a sidebar navigation something like:

I tried using an uniform grid but there ended up being too much spacing between "buttons" and I'm not sure if it's possible to modify the tab control to act like full width buttons instead of overhead tabs.

Also if if its possible to add icons that would be a huge plus.

Pedi

Should the Items in the Sidebar be dynamic or predefined? – Erechtheum

@Erechtheum They are predefined. – Pedi

use a TabControl. Avoid trying to reivent the wheel. – Syconium

@HighCore What if we had never reinvented the wooden wheel into rim and rubber – Pedi

@Pedi sorry, your comment makes absolutely no sense to me. My point still stands, use a TabControl. – Syconium

If you read my question you could see that I don't know how to make the tabs full width like a sidebar navigation. – Pedi

Answer 1

You can make a Gridcolumn in your Standard grid with your wished Width. The into this Column you can put a stackpanel which fills your buttons from top to bottom.

Like That:

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <Button Height="40">Test</Button>
            <Button Height="40">Test2</Button>
        </StackPanel>
    </Grid>

It would look like this:

If i missunderstod you please tell me and im gona edit it.

To add Images you can then create another grid in your Button with two columns: Like this:

            <Button>
                <Grid Height="40" Width="200">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40"/>
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Source="pack://siteoforigin:,,,/Resources/dll.png"></Image>
                    <TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">Text</TextBlock>
                </Grid>
            </Button>

Note that you have to set your grid to Width="200" like you set your main Grid.Column because the Grid would not be the whole width of the button if you would not set it too 200.

Then the List would look like this:

Erechtheum

No thats great! Do you know of a way I could add icons to the buttons? – Pedi