UWP: How do you access Page resources by code in an UWP app?

You can keep your resources, such as style, data etc. in different places on a page and then use them in your app either by declarative markup or using code.

This post shows how you may access resources in your "Page.Resources" using code.

PageResrcs_0

It has a resource which is a string and a key. The page has single TextBox named "txt1".
In the code behind you use the key to access the resource and send it to the text box.

PageResrcs_1

When you run the app this is what you see, the resource on the page appearing in the TextBox.

What does x:bind do in a Universal Windows Platform project?

x:bind is a new data binding syntax or, more correctly {x:Bind} is a markup extension in Windows 10 similar to {Binding} in Windows 8.1. It does not have all features of {Binding} but it takes less time to run and uses less memory.

During compilation {x:Bind} gets converted to a code that gets values from a property on a data source and set it to the UI property. It is therefore sometimes called compiled bindings. 

How to write a SWITCH statement in a UWP project?

SWITCH is a selection statement that selects a switch section among a number of switch sections based on a pattern match with the switch expression.

Switch.png

The default need not be the last case section, as it is evaluated last, no matter where it is found.
In the case constant (case sensitive).

• constant is the value to test for, and it can be any of the following:
• A bool literal, either true or false.
• Any integral constant, such as an int, a long, or a byte. 
• The name of a declared const variable.
• An enumeration constant.
• A char literal.
• A string literal.

The following is a complete example in a UWP project called JSwitch:

In this example, the variable anim is set to 'bird'. It is case sensitive. Bird is not the same as bird. When the switch statement is run and it finds 'bird' in any of the case sections, it displays the corresponding case constant in the text box. Change 'anim' and run the app again, and the textbox displays the match.

The XAML page has just one TEXTBOX and a BUTTON. The button click runs the program MainPage.xaml.cs.

Here is the MainPage.xaml for the JSwitch project.

Here is the MainPage.xaml.cs code:

How do you access a selected item in XAML's ComboBox Control?

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

How do you code for XAML ListView's SelectionChanged event?

In my previous post (UWP: XAML's ListView Control and its SelectionChanged event - Part 1) you learnt the following:

Part 1

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

In this part you will learn how to write code to change the properties you set for the ListViewItems by the SelectionChanged event.

The following image shows the app after a successful run. This displays how the app is displayed at this stage:

              
JListView_23

This next image shows the effect of the SelectionChanged event.

JListView_28

You could set the FontSize properties in design as shown.To start with all the ListViewItem's FontSize was 15px and FontFamily Segoe UI (defaults). Clicking the ListViewItem for 'Dog', you can change its size in the property box (now focus is on 'bird').

JListView_15

As shown in the next image, you insert 'SelectionChanged' inside the ListView. If you just type the letter S, you should get a selection list in which you will find 'SelectionChanged'.

JListView_17

Place the "=" sign after it and you should get the "New Event Handler" and when you click this you will create the ListView_SelectionChanged event.

JlistView_18

In the code behind (MainPage.xaml.cs), the new event is displayed as shown

JlistView_19

We will go back to Design view and name the ListViewItems (lvi1,lvi2 and lvi3) as shown here. It makes it easier to handle in code.

JlistView_21

We change the FontSize of the first ListViewItem as shown here using a single line of code.

JlistView_22

Build, deploy and run the app in the Local Machine and you will see the app displayed as shown.

JlistView_23

Now click any of the ListViewItems and you will see this:

JlistView_24

In order to see the changes in the other ListViewItems you need to add more code as shown:

JlistView_26

Now after building, deploying and running, you see the following:

JlistView_28

What is FromArgb(int32, int32, int32,int32) in creating color by code?

It is from System.Drawing namespace and used in SolidBrush Class.

Its usage syntax in .NET for Windows Universal is:
Windows.UI.Color.FromArgb(byte,byte,byte,byte)

In the above, the first argument is the alpha channel(transparency) that runs from 0 to 255; the next three are red, green and blue channels in that order each from 0 to 255.

For example:
Windows.UI.Color.FromArgb(75, 255, 0,0) produces Background color 'red' with a transparency of 75.

What is Microsoft Universal Windows Platform (UWP) App?

UWP is an app for the Windows 10 and Windows 10 runs on a number of hardware devices: PC, tablet, Xbox, HoloLens, Surface Hub etc. UWP with just one API set and one app package and one store can reach all screen sizes from the smallest to the largest.

It can support different modes of interaction;
touch
mouse + key board
pen
game controller

Programming UWP apps is very flexible, just not limited to C# and XAML. You can use JavaScript(& HTML). You could also use Unity or MonoGame. You can mix them as well.

You will create just one project for (any) every device you want to address.

Let me enumerate the features:

• Common API surface across all devices
• Extension SDKs to do specific stuff on chosen device
• Apps packaged using .AppX packaging format and distributed from store
• One store for all devices
• Adaptive controls and input are supported(Keyword Responsive design)

Go on, monetize your app!

What is a loose XAML file?

It is very similar to an HTML file that you create in Notepad and add it to your files/folders like this one:

Type in Notepad the following one line:

Hello, HTML

and now save it as TestHTML and save it as a HTML file (not the .txt extension) to your desktop. When you double click this file, your browser (IE perhaps) displays the following:

Hello, HTML
Sometimes it is also called a HTML fragment.

Likewise you can store a loose XAML file as shown:

Type the following in Notepad and save it as a file with extension .XAML to your files/folders.

http://schemas.microsoft.com/winfx/2006/xaml/presentation

" FontWeight="Bold">
Hello, XAML
 
Now open this file using IE (this is usually at C:\Program Files\Internet Explorer\iexplore.exe)

You will see the following:

Hello, XAML

For a loose XAML file you should havethe following:

•Contains only XAML (that is, no code).

•Has an appropriate namespace declaration.

•Has the .xaml file name extension.

How do I code a grid layout in XAML using Visual Studio 2013 Express for Windows Desktop?

XAML is somewhat like HTML but lot more powerful coming from the Microsoft Windows Presentation Foundation(WPF). It is a declarative language (you pretty much declare most of the things) and Visual Studio Express for Windows Desktop allows you to create projects of the type, WPF Application.
You can download Visual Studio 2013 Express for Windows Desktop which is free from here:
http://www.visualstudio.com/downloads/download-visual-studio-vs

Before installing make sure your computer satisfies the requirements(at least the minimum).
You can buy higher versions like Standard, Professional and Ultimate and they are expensive.

Once it is installed you have the option to launch it, if you want to.

I usually launch it as the adminsitrator of the computer.

Click File | New Project to create a new project (You can use VB or C#). Use the Project type WPF Application.

Click OK and you will get a project folder in your Solution Explorer
 Here is the default project created as shown:

Right side you have the Solution Explorer and the MainWindow.xaml is represented in both design(top left) and in the markup language in bottom left. The main window has a size of 350x525 but you are seeing at a reduced size 25%.

In what follows you will be placing a number of objects inside a grid, using the grid layout. This happens to be the default as you see in the markup . Be warned that everything is case sensitive here.

A grid is a layout type that allows you to create 2D geometrical pattern (like a chess board) consisting of rows and columns and in the intersecting cells you may place other controls. You may also think of the grid as a table with rows and columns if you are used to HTML coding. But strictly speaking Grid is not a table.

Make sure you read the code and this is pretty much the default. You see just one row and one column.

Now the logic for the grid arrangement goes like this:
1. You create Grid Definitions
2. You decide the row definition
3, You decide the column definition
4. You decide what to put in each of the cells

If there are 3 rows and 3 columns, you will have nine cells to place your objects(controls).
In this post, you will be creating a 3x3 grid and place in them nine buttons to mimic the numeric keypad. I have not included the '0' and you may try to modify it on your own.

Here is the XAML code for this grid layout:
----

 

----
This is pretty much all that is required. I have used a 300x300 sized gird. You may copy this and paste it after removing the default XAML code, but you have to name the project just as in the second screen shot or make changes to your XAML code.

This produces the foloowing in the design area

If you want you can add some styling as shown here for just one cell:


In XAML coding make use of intellisense, a feature that gives you the possible things you can insert as you type on.

What languages can I use to build Windows Store Apps?

There are a couple of options. The language you use will depend on your familiarity with the language. Here is the list.

1.Javascript/HTML(CSS)
2. C#/XAML
3. Visual Basic/XAML
4. C++/XAML
5. C++/DirectX