Use SelectionBoxItem to access ComboBoxItem in a UWP

In Part 1, you added after following a few tasks the following to a  Blank UWP project.

• Getting the ComboBox Control
• Placing ComboBox on the Design area
• Adding ComboBoxItems

ComboBox 4

In this post you will write code for an app consisting of a ComboBox, a Button and a TextBox so that when you select an item in the ComboBox and click the button, the selected item appears in the TextBox.

We already have a ComboBox with three items.

We will drag a BUTTON and a TEXTBOX from the Toolbox

ComboBox_8

And drop on the DESIGN pane as shown. The XAML markup is shown in the XAML Pane as shown.

ComboBox_9

We want to Select a ComboBoxItem and then click the BUTTON. This should get displayed in the TEXTBOX.

We add a click EVENT to the button by typing-in Click inside the BUTTON code as shown and choose 'NEW EVENT HANDLER'.

ComboBox_10

It will be named 'Button_Click' as shown.

ComboBox_11

The following will be added to the MainPage.xaml.cs page.

ComboBox_12

We provide names for the ComboBox ('cbx') as well as the TEXT ('txt') box. Now we add the following code to the above newly added code as shown.

-----

 private void Button_Click(object sender, RoutedEventArgs e)
        {
            txt.Text = cbx.SelectionBoxItem.ToString();
        }

-------

Now build, deploy and run the project on Local Machine. When the App is displayed, choose an item (herein, 'BIRD') from the ComboBox and Click the BUTTON, you will see it displayed in the TEXTBOX as shown (the UI is not designed well, it should be improved).

ComboBox_15

Universal Windows Platform: ListView and SelectionChanged event - Part1

In my previous post you learnt about ListView and ListBox controls used in XAML.

In this post you will learn to:

Part 1

• Progressively build a ListView Control 
• Place ListViewItems inside a ListView's ItemTemplate
• You will place three named ListView items

Part 2

• You will write code to change the properties of items you placed.

At first, you launch Visual Studio 2017 Community and create a blank Universal Windows Platform project using C# and provide the name to the project (Project JListView).

JlistView_0.png

Here you choose the target and min versions of Windows 10

JlistView_1.png

Add a ListView as shown between the 'Grid' as shown using intellisense.

JlistView_2.png

An empty ListView control is added to the XAML with some default border over the Desktop as shown.

JlistView_3.png

Now we place an ItemTemplate of the ListView by choosing from a drop-down list.

JlistView_4.png

Visual Studio is not happy as this template cannot be empty. We will add a DataTemplate inside the ItemTemplate, again using intellisense.

JlistView_5.png

Choose to place a DataTemplate.

JlistView_6.png

DataTemplate is placed and there is no red wiggly line for ItemTemplate like before. 

JlistView_7.png

Now we place a Grid, layout element, again using intellisense.

JlistView_8.png

Continued here:
http://hodentekmobile.blogspot.com/2018/02/uwp-xamls-listview-control-and-its.html

ListView XAML Control in a Universal Windows Platform project

I have posted a number of articles related to ListBlock, ListView etc that you can use in HTML 5, web applications using Intel's XDK. Intel XDK's development platform for several frameworks were discontinued and Intel's effort is in the realm of Internet of Things devices and related applications.

Microsoft's Universal Windows Framework apps are well supported by Microsoft and you could use it for not only Windows but for other devices as well.

In the Universal Windows Platform (UWP) projects there is an advantage of one code that works on different device families (phone, tablet, desktop etc.). However, the UWP projects depend on using XAML. For example the 'List' related controls in UWP are as shown here:

In this post, I will show you how you may work with this controls for a UWP project.

Getting the ListView Control

Placing ListView on the Design area

Adding Textbox Controls to ListView

Making changes to XAML Code

We start with a Windows Universal blank C# project with the name JLIST as shown.

You will be asked for what target and minimum versions of Windows 10 that you want. The higher the version the more feature support. The Build version 16299 is chosen for both as shown in the next two images.

Clicking OK after the selection brings creates a blank project very the same along the lines in my earlier link.

Now we would like to place controls and therefore we need to choose what controls to use from the following:

When you click on the above, you are taken to this interactive window. You are using the Windows Presentation Foundation controls.

There are quite a large with a few added by default should you choose. However you can filter (List) and get a shorter list that you want to choose. You can choose ListView.

As I previously mentioned the UWP is supported on all devices of Windows Family and therefore uses a common layout scheme which adjusts to the device footprint as shown (for 4 different devices from Phone to Desktop).

Dropping a ListView Control

All that is need is to drag and drop a control from here:

On to the design area here. I am designing for a 6" Phone format. The XAML code shows one line item inside the Grid as shown.

Adding items to the ListView, bunch of TextBoxes. You can just type-in or wait for intellisense to come to you rescue.

The interface is highly interactive, immediately these TextBoxes appear in the design as shown. Note that 'Jasmine' is not showing fully.

Although you could easily check for the device sizes from this interface. Although Visual Studio supports all the device sizes, but still it cannot accommodate 4" IOT as the ListView itself is quite large to get into an IoT as shown here:

In order to accommodate 'Jasmine', I have slightly played with the height (change 100 to 118) of ListView as shown.

TextBoxes also have a property called , IsColorFontEnabled and when choose to set it to TRUE, you can have access to lot more properties related color and other. I just chose to change the color of 'Lily' to blue.

Sure enough, the color changes to blue as shown in the rendered image when deployed to the machine (only relevant part shown).

I the next post, let us see how we may add controls to ListView using code behind.

----------------------------------------------------------------------------------------------------------------------

Intel XDK HTML Projects

Sortable ListBlock Widget using Intel XDK

http://hodentekmobile.blogspot.com/2016/10/intel-xdk-controls-12-sortable-list.html

Develop a Side Menu App using Intel XDK

http://hodentekmobile.blogspot.com/2016/02/develop-side-menu-app-using-intel-xdk.html

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

Part 5: Adding pages and organizing controls  to the project

http://hodentekmobile.blogspot.com/2016/01/develop-side-menu-app-using-intel-xdk.html