DotNetBar for Windows Forms 11.8 and later includes new style Office 2014 Mobile as seen in Office applications on iPad. Note that this is an Metro style so please read the Getting Started with the Metro style article as well.

Following screen-shots shows the sample application we will create in this tutorial which showcases this new style:

DotNetBar for WinForms Office 2014 Mobile Style Sample App

So to get started create new VS.NET Windows Forms project. Next in VS.NET click Project->Add Windows Forms and from the list choose Metro App Form from the list:

DotNetBar Metro App Form VS.NET Template

This will add our default Metro App Form to your project which looks like this:

DotNetBar Metro App Form In VS.NET

Note styleManager1 component at the bottom of the screen. Select it and in VS.NET Properties window change ManagerStyle=OfficeMobile2014 and MetroColorParameters=White, #80397B which should look like this:

DotNetBar StyleManager Settings

Now we will erase and remove the items we do not need. Click File application button and delete it. Click buttonItem1 in caption and delete it. Next to it is qatCustomizeItem1, select it and delete it as well.

Select metroShell1 control by clicking on the caption and set following properties: ShowIcon=false, HelpButtonVisible=false and SettingsButtonVisible=false. At this point your form will look like so:

DotNetBarMetroAppFormSetup1

Next we will add another tab. Right-click the area next to the tabs and click Create Tab:

DotNetBarMetroAppFormSetup2

Click each tab and change tab Text property to HOME, INSERT, VIEW respectively for all 3 tabs.

Now  we will add buttons that are located before and after the tabs. We will create total of 6 buttons. While metroShell1 control is selected use its task button in top-right corner to show Tasks menu then click Create Button 6 times. This will create 6 buttons that will be placed after the tabs.

Next select buttonItem1 and drag & drop it so its placed before the HOME tab. Repeat the process for buttonItem2, buttonItem3 and buttonItem4. Now you will have your form look like so:

DotNetBarMetroAppFormSetup4

Next select buttonItem1 and set its Image property with the image you want to use on button. If you do not have images ready set its Symbol property to one of our built-in images:

DotNetBar built-in symbol library

Repeat the process for all buttons.

Once you set Image or Symbol property for all buttons you will end up with form looking like so:

DotNetBarMetroAppFormSetup6

Next we will set the alignment for the tabs. Select HOME tab and set ItemAlignment=Center. Repeat for INSERT and VIEW tabs:

DotNetBarMetroAppFormSetup7

Next select each of last two buttons and set ItemAlignment=Far:

DotNetBarMetroAppFormSetup8

Next we will create toolbars for each tab. From VS.NET toolbox select MetroToolbar:

DotNetBarMetroAppFormSetup9

And then place it on the tab panel (just below the tab):

DotNetBarMetroAppFormSetup10

While metroToolbar1 is select set following properties on it: Dock=Top and ExpandButtonVisible=false.

We will add now buttons to toolbar using Tasks button in top-right corner while metroToolbar1 is selected and choosing Add Button:

DotNetBarMetroAppFormSetup11

Create couple of buttons and then set Image property for each button as well as ItemAlignment=Center.

For buttons where you want image and text visible like so:

DotNetBarMetroAppFormSetup12

You will need to set ButtonStyle=ImageAndText on that ButtonItem.

You can repeat this process by adding MetroToolbar control to other tabs and creating buttons as needed.

Next we will adjust the dock padding on each tab panel. Select metroTablPanel1 by clicking on the empty area of tab content (anywhere around the metroToolbar1 you added) and set Padding=3, 4, 3, 3

Repeat for tab panels of every tab.

Now, we will adjust the height of the metroShell1 control. Click on the Form caption to select metroShell1 and set its Size=624, 107.

And that is pretty much it. You just created a starting shell for a great looking application.

Bonus

If you also need great looking and colorful tabs, select SuperTabControl from VS.NET toolbox and add it to the form:

DotNetBarMetroAppFormSetup13

Set superTabControl1.Dock=Fill and superTabControl1.TabStyle=OfficeMobile2014

Click on superTabItem1 (first tab) and set its PredefinedColor=OfficeMobile2014Gold. Select superTabControl1 again and using its tasks menu item Create New Tab create couple of tabs and for each set different PredefinedColor and you will have something like this:

Final DotNetBar OfficeMobile2014 OneNote iPad Style Tutorial

 

 

Related posts:

  1. How to build Office 2010 style Backstage application menu with DotNetBar for Windows Forms
  2. How to create Ribbon Tab Groups in DotNetBar for WinForms
  3. How to mark your WinForms applications for High DPI support
  4. Cannot see Office 2003 style on WinXP
  5. How to create Dockable Windows