This document discusses various UI elements in a Windows app including styles, pages, scripts, config files, app bars, message dialogs, context menus, flyouts, date pickers, list views, templates, and animations. It provides code examples for implementing these elements and adjusting styles based on screen size. Functions are defined for common animations like fade in, pointer down, and pointer up.

3. 





5. 
WinJS Files
Styles
Pages
Scripts
Config

6. 

7. 





8. 
App Bar Message Dialog
Context Menu
Flyout

9. 








10. 
.homepage section[role=main] {
margin-left: 120px;
}
@media screen and (-ms-view-state: snapped) {
.homepage section[role=main] {
margin-left: 20px;
}
}
@media screen and (-ms-view-state: portrait) {
.homepage section[role=main] {
margin-left: 100px;
}
}

11. 




12. 





13. 
<label for="CityLabel">Select a city:</label>
<select id="CitiesSelect">
<option value="1">Phoenix</option>
<option value="20">New York</option>
<option value="35">Dallas</option>
<option value="11">San Diego</option>
</select>
<button id="SubmitButton">Submit</button>

14. 

<div data-win-control="WinJS.UI.DatePicker">
</div>

15. 
<div data-win-control="WinJS.UI.DatePicker"
data-win-options="{maxYear: 2015}">
</div>

16. 







18. 





19. 
<div id="itemTemplate"
data-win-control="WinJS.Binding.Template">
<div>
<img src="#" data-win-bind="src: image" />
</div>
</div>

20. 
<div id="myItemTemplate"
data-win-control="WinJS.Binding.Template">
</div>
<div id="CitiesListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate:
select('#myItemTemplate')}">
</div>

21. 





22. - -
- -
- -
-
-
- -
- -
- -
- -
-

23. 
function fadeIn(element) {
WinJS.UI.Animation.fadeIn(element);
}
function pointerDown(e) {
WinJS.UI.Animation.pointerDown(e.srcElement);
}
function pointerUp(e) {
WinJS.UI.Animation.pointerUp(e.srcElement);
}

24. 



