Hodentek Mobile

SplitView has two panes and in one of them you place items that allow you to navigate to the details of that item and its contents. You can basically use some event handlers to the items and when the event occurs, you display the content for the item. Here is the scheme for navigation: SplViewNav_0 You have three objects in the SplitView pane (Rose, Jasmine, Lily). You attach events to these objects and when the event is fired, you display the related content in the area on the right, the Content. Before you read this post, please make sure you read the two following posts: Displaying image in the Assets folder: http://hodentekhelp.blogspot.com/2018/03/how-do-i-display-using-code-image-from.html Navigation with SplitView: http://hodentekhelp.blogspot.com/2018/03/how-do-you-use-splitview-xaml-control.html Description of App in xaml designer Start with a UWP Blank project and provide a name. In this it was named JSplitView . The code for MainPa...

You can get a basic start with the SplitView Control here . There is no TabView in XAML. You could replace the default 'grid' in a Blank UWP project shown here: DefaultBlank.png Use the following in its place: SplitView sample.png This is ready for build. Build and run the app in the Local Computer. This is what you see when the app is run. There is a Pane, the SplitView. Pane and there is a TextBlock named ' Content ' in the Grid. Now I change the OpenPanelLenth (presently 296) to, say 150 and build and run the app. What do I see? SplitView 2 Basically you can now see more content. In the 'Pane' you can place controls and hook up events to them to display related 'Content' in the Content (i.e., inside the 'grid' control). I will show an example in my next post.

This post is a continuation of my previous post (Develop a Side Menu App using Intel XDK - Part 5) and describes considerations in adding images and some text to the content. In the present post it is shown on just one page of the app. As an image is worth a thousand words, adding images is very important in app development. As I am writing an app that has about two to three dozen images I wanted to find out what would be an optimum size for an image. Although I am still debating, I created four images resized to represent from 100% to 25%. The Intel XDK UI allowed me to place the images using the image icon which brings in the default image, Stabburg.jpg which had the following details, 500x448 pixels with a file size of 31.68 KB. Placing images and re-sizing Click on Image Control and drag it to a page and the image is added to the page. Placing an image control on a page automatically adds in the Stabburg.jpg. PlaceImage.jpg Clicking on the image opens the image prope...

In this part 5 of the post you will learn how to add content to your SideMenu app. Review the following posts before you start with this post although Part 5 is quite independent except that it may start picking up a screen from Part 4. Part 1:Creating a Intel XDK project using a template; SideMenu project UI, SideMenu on iPhone6 emulator http://hodentekmobile.blogspot.com/2015/11/develop-side-menu-app-using-intel-xdk.html Part 2: Review of Controls and Layout as well as working with Pages. Pages in a SideMenu http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk.html Part 3: Linking the pages and Navigation http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk_19.html Part 4: Adding the BACK button to return to the previous page. http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk_26.html Presently the Favorites Screen(page)is empty as shown. SideMenu5_01.png The header show...

In the Previous post (also read Note 2 at the bottom) we used the designer to link the items on the Side bar menu to display the linked pages on the display. We also noticed that after going to Favorites from Home, there was no way to return to Home. In this post we will be adding a Back Button to the Favorites page so that when we click on it we return to the Home page. If this succeeds we do the same for Messages and Profile pages. If you find only page#mainpage , add three more pages named, 'FAVORITES', 'MESSAGES' and 'PROFILE'. Bring up the Favorites page by clicking on page#Favorites in the Pages menu as shown. BackButton_01 We take off the text 'FAVORITES'. The page now appears as shown. It is empty now. BackButton_02 Now we add a header to this page. Header is in the Layout group as shown. BackButton_03 Click on Header in LAYOUT and drag it out to the page#Favorites as shown. You will see some color changes as ...