Posts

Showing posts from March, 2018

UWP: Navigation using SplitView

Image
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

Using XAML's SplitView

Image
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.

UWP: Event handler displaying an image from the Asset folder

Image
You may need to display an image stored in the asset of your UWP project from another control's event handler. Let us take the simple example of a button click event displaying an image stored in the project's Asset folder on the page. At a minimum we create a UWP Blank project. Then we add a StackPanel. In the StackPanel we place two named elements, a button and an image by providing the NAME property for the controls. We bring in an external image into the Asset Folder using: Since we configured a click event in the XAML, this BTN_Click event code will be present in the MainPage.xaml.cs as shown. We create an instance of Image as a new image. The source for this image has to change from System.Uri to Windows.Foundation.Uri that UWP requires and hence the conversion.  However, code needs fixing, and there is a fix with a link. You can safely click this to modify. This includes a new using reference ( using Windows.UI.Xaml.Media.Imaging ) a