In this article, I will discuss how to work with
the Message Dialog in a Windows 8 Metro application. I will use WinJS to create
a message dialog. The Message dialog looks like below:
![image1.png]()
The Message Dialog is part of UI surfaces in Windows 8. There are four types of UI
surfaces in Windows 8.
- App Bar
- Context Menu
- Message Dialog
- Fly Out
We are going to popup a message dialog box on click event of a button. Let us
put a button and output span on default.html as below:
Default.html
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8"
/>
<title>DataBindingSample</title>
<!-- WinJS references
-->
<link
rel="stylesheet"
href="/winjs/css/ui-dark.css"
/>
<script
src="/winjs/js/base.js"></script>
<script
src="/winjs/js/wwaapp.js"></script>
<!-- DataBindingSample
references -->
<link
rel="stylesheet"
href="/css/default.css"
/>
<script
src="/js/default.js"></script>
</head>
<body>
<h2>metro
message dialog demo</h2>
<br
/>
<button
id="btnShowMessage"
> Want to Make a call
</button>
<br
/>
<span
id="resultDiv"
/>
</body>
</html>
We are going to display the result
of user selection in a message dialog box on the span resultDiv.
A Message Dialog can be created by making a call to the following function.
![image2.png]()
Windows.UI.Popups.MessageDialog function is overloaded. It either takes content
or content and title both as input parameters.
Message dialog can be created with content and title as following:
![image3.png]()
Once we have created message dialog, we need to add commands to that. A command
can be added as in the following:
![image4.png]()
We can add as many commands as we want in the same way. After adding all the
commands we need to start operation as in the following:
![message5.png]()
By putting all codes together, the code behind will have the following codes.
Default.js
(function (){
'use strict';
//
Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);
WinJS.Application.onmainwindowactivated = function (e) {
if
(e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
//
TODO: startup code here
//adding click event to button
var
buttonToPopup = document.getElementById('btnShowMessage');
buttonToPopup.addEventListener('click',
function()
{
ShowPopUp();
});
}
}
function ShowPopUp() {
var
resultDiv = document.getElementById('resultDiv');
//Creating message dialog box
var
messagedialogpopup = new
Windows.UI.Popups.MessageDialog
('Allow to use your location ',
'Location Application');
//
adding command to message dialog box
messagedialogpopup.commands.append(new
Windows.UI.Popups.UICommand('yes', function
() {
//calling callback function for Yes command
resultDiv.innerHTML = "<h2>Yes</h2>";
}));
messagedialogpopup.commands.append(new
Windows.UI.Popups.UICommand('no', function
() {
//calling callback function for No command
resultDiv.innerHTML = "<h2>no</h2>";
}));
messagedialogpopup.commands.append(new
Windows.UI.Popups.UICommand('Yes but with limitd
data', function () {
//calling callback function for Yes but with limited data command
resultDiv.innerHTML = "<h2>Yes but with limited
data</h2>";
}));
messagedialogpopup.showAsync().operation.start();
}
WinJS.Application.start();
})();
}
When running it you should prduce the following message dialog on click event of the button.
![image6.png]()
I hope this article is useful. Thanks for reading.....