WPF - Windows Azure Style TabControl(?) [closed]

Question

I'm looking for a control similar to the one in the picture as found on Azure but for WPF.

I'm just wondering if this is a premade control (either from MS, or someone else?) which can be used in WPF or code to start such a project. I have tried a tabcontrol, but it doesn't do the sliding blades.

Answer 1

Surely the control in your image is just a Menu control that has a custom ControlTemplate. We can give the Menu control a new ItemsPanelTemplate to make it work vertically instead of the usual horizontal look. Unfortunately I don't have time to complete this, but I've started you off:

<Menu FontFamily="Segoe UI" Background="#FF3C454F" TextElement.Foreground="White">
    <Menu.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </Menu.ItemsPanel>
    <Menu.Resources>
        <Style TargetType="MenuItem">
            <Setter Property="Padding" Value="40, 20" />
        </Style>
    </Menu.Resources>
    <MenuItem Header="COMPUTER">
        <MenuItem Header="WEBSITE" />
        <MenuItem Header="VIRTUAL MACHINE" />
        <MenuItem Header="MOBILE SERVICE" />
    </MenuItem>
    <MenuItem Header="DATA SERVICES">
        <MenuItem Header="WEBSITE" />
        <MenuItem Header="VIRTUAL MACHINE" />
        <MenuItem Header="MOBILE SERVICE" />
    </MenuItem>
    <MenuItem Header="NETWORK SERVICES">
        <MenuItem Header="WEBSITE" />
        <MenuItem Header="VIRTUAL MACHINE" />
        <MenuItem Header="MOBILE SERVICE" />
    </MenuItem>
</Menu>

There's still lots for you to do though... the most important part will be to define a new ControlTemplate the Menu and the MenuItems. You'll need to move the next level of MenuItems from the current Popup control to the next column in a Grid.

The best way to start this job is to use the default ControlTemplate and then 'tweak' it to your liking once you have it working as normal. You can find the default ControlTemplate in the Menu Styles and Templates page on MSDN. Another resource can be found on the MenuItem ControlTemplate Example page, although it might have the same code, I'm not quite sure.

One final point I'd like to make is that if this project proves to be too difficult for you, you could probably make your UI look like your image using a number of ListBox controls, where the items represent the menu items. It would be quite easy to change the items dependant on the previous menu item that the user clicked on.