Tutorial: Create Office 2014 Mobile Style Applications For WinForms
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:
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:
This will add our default Metro App Form to your project which looks like this:
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:
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:
Next we will add another tab. Right-click the area next to the tabs and click Create Tab:
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:
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:
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:
Next we will set the alignment for the tabs. Select HOME tab and set ItemAlignment=Center. Repeat for INSERT and VIEW tabs:
Next select each of last two buttons and set ItemAlignment=Far:
Next we will create toolbars for each tab. From VS.NET toolbox select MetroToolbar:
And then place it on the tab panel (just below the tab):
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:
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:
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.
If you also need great looking and colorful tabs, select SuperTabControl from VS.NET toolbox and add it to the form:
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: