Building an ASP.NET Web App for iOS means making sure it looks and behaves just like a native iOS app.
Let me show you how to build one using the ASP.NET Controls from DXv2.
Preparing the Project
We’ll start by creating a new ASP.NET Empty Web Application
and copy the iOS theme files to the App_Themes folder. (Note: The iOS theme files are attached in the sample project at the bottom)
After you import the iOS theme into the project, make sure it is applied to your Default.aspx page.
The core of our app will be the TabBar. And we’ll use the ASPxPageControl to mimic it.
After you drag the ASPxPageControl from the Toolbox, set it’s SkinID to TabBar.
<body>
<form id="form1" runat="server">
<dx:ASPxPageControl runat="server" ID="TabBar" SkinID="TabBar"
ActiveTabIndex="0">
<TabPages>
<dx:TabPage>
<ContentCollection>
<dx:ContentControl runat="server" SupportsDisabledAttribute="True">
</dx:ContentControl>
</ContentCollection>
</dx:TabPage>
</TabPages>
<ClientSideEvents
Init="OnTabBarInit"
ActiveTabChanged="function(){ Adjust(); }"/>
</dx:ASPxPageControl>
</form>
</body>
and assign two client side events:
- Init: Will be fired when control is initialized.
- ActiveTabChanged: Will be fired when a tab page is changed.
we need to do this to make sure that our TabBar is at the very bottom of the page.
<script type="text/javascript">
function Adjust() {
TabBar.SetHeight(ASPxClientUtils.GetDocumentClientHeight());
}
function OnTabBarInit() {
ASPxClientUtils.AttachEventToElement(window, "orientationchange",
function () { Adjust(); }, false);
if (!ASPxClientUtils.touchUI) {
ASPxClientUtils.AttachEventToElement(window, "resize",
function () { Adjust(); }, false);
}
Adjust();
}
</script>
Building App Screens
Adding app screens is done by adding new tab pages.
For each tab, we set the image and make it 42 by 79 in size.
And we are ready done!
Download the sample project here
Cheers
Azret