原文地址:http://msdn.microsoft.com/en-us/library/windows/apps/br211362.aspx

第一章知识结构:

第二节:Adding controls and content(添加控件和内容)

(原地址:http://msdn.microsoft.com/en-us/library/windows/apps/hh465393.aspx)

本节内容概览:

Adding ratings http://msdn.microsoft.com/en-us/library/windows/apps/hh465434.aspx

添加一个 评级控件,获取评级控件的值,在textbox中显示出来,代码如下:

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8">
   5:      <title>NavApp</title>
   6:      <!-- WinJS references -->
   7:      <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
   8:      <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
   9:      <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
  10:      <script type="text/javascript" src="jquery-1.7.2.js"></script>
  11:      <script type="text/javascript">
  12:          $(function () {
  13:              WinJS.UI.processAll().done(function () {
  14:   
  15:   
  16:                  $("#ratingControl").change(function () {//添加评级控件 改变选择事件
  17:   
  18:                      var c = document.getElementById("ratingControl").winControl;//获取到评级控件对象
  19:                      $("input[type=text]").val(c.userRating);  //c.userRating就是该 控件的值
  20:                  })
  21:   
  22:              })
  23:          })
  24:   
  25:      </script>
  26:  </head>
  27:  <body>
  28:      <div id="ratingControl" data-win-control="WinJS.UI.Rating" data-win-options="{averageRating : 3.4, maxRating : 7}">
  29:      </div>
  30:      <input type="text" />
  31:  </body>
  32:  </html>

效果如下图:

Adding progress control  http://msdn.microsoft.com/en-us/library/windows/apps/hh465428.aspx

下图是三种 进度条,是不是很养眼呢。。。。

写了三种进度条样式,并在 textbox内显示 第一个进度条的百分比,下面看代码:

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8">
   5:      <title>NavApp</title>
   6:      <!-- WinJS references -->
   7:      <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
   8:      <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
   9:      <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
  10:      <script type="text/javascript" src="jquery-1.7.2.js"></script>
  11:      <script type="text/javascript">
  12:          $(function () {
  13:              WinJS.UI.processAll().done(function () {
  14:   
  15:   
  16:                  $("input[type=text]").val(document.getElementById("determinateProgressBar").position);
  17:   
  18:              })
  19:          })
  20:   
  21:      </script>
  22:  </head>
  23:  <body>
  24:  <progress id="determinateProgressBar" value="30" max="100"></progress>
  25:   
  26:      <progress></progress>
  27:      <progress class="win-ring"></progress>
  28:      <input type="text" />
  29:  </body>
  30:  </html>

Adding List View, Semantic Zoom, and other data controls

Adding FlipView controls

原文地址:http://msdn.microsoft.com/en-us/library/windows/apps/hh465425.aspx

一共三张图片,实现查看,一共需要三个文件,default.js   scripts.js  selector.html

selector.html 页面代码:

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8">
   5:      <title>NavApp</title>
   6:      <!-- WinJS references -->
   7:      <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">
   8:      <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
   9:      <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
  10:      <script type="text/javascript" src="jquery-1.7.2.js"></script>
  11:      <script type="text/javascript" src="js/default.js"></script>
  12:      <script type="text/javascript" src="script.js"></script>
  13:      <style type="text/css">
  14:          #basicFlipView
  15:          {
  16:              width: 480px;
  17:              height: 270px;
  18:              border: solid 1px black;
  19:          }
  20:   
  21:          /**********************************************/
  22:          /*                                            */
  23:          /* Styles used in the item template           */
  24:          /*                                            */
  25:          /**********************************************/
  26:          .overlaidItemTemplate
  27:          {
  28:              display: -ms-grid;
  29:              -ms-grid-columns: 1fr;
  30:              -ms-grid-rows: 1fr;
  31:              width: 480px;
  32:              height: 270px;
  33:          }
  34:   
  35:              .overlaidItemTemplate img
  36:              {
  37:                  width: 100%;
  38:                  height: 100%;
  39:              }
  40:   
  41:              .overlaidItemTemplate .overlay
  42:              {
  43:                  position: relative;
  44:                  -ms-grid-row-align: end;
  45:                  background-color: rgba(0,0,0,0.65);
  46:                  height: 40px;
  47:                  padding: 20px 15px;
  48:                  overflow: hidden;
  49:              }
  50:   
  51:                  .overlaidItemTemplate .overlay .ItemTitle
  52:                  {
  53:                      color: rgba(255, 255, 255, 0.8);
  54:                  }
  55:      </style>
  56:  </head>
  57:  <body>
  58:      <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
  59:          <div>
  60:              <img src="#" data-win-bind="src: picture; alt: title" />
  61:              <div>
  62:                  <h2 data-win-bind="innerText: title"></h2>
  63:              </div>
  64:          </div>
  65:      </div>
  66:      <div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }">
  67:      </div>
  68:  </body>
  69:  </html>

default.js代码:

   1:  // For an introduction to the Navigation template, see the following documentation:
   2:  // http://go.microsoft.com/fwlink/?LinkId=232506
   3:  (function () {
   4:      "use strict";
   5:   
   6:      var app = WinJS.Application;
   7:   
   8:      app.onactivated = function (eventObject) {
   9:          if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
  10:              if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
  11:                 
  12:              } else {
  13:                 
  14:              }
  15:              WinJS.UI.processAll();
  16:          }
  17:      };
  18:   
  19:     
  20:   
  21:      app.start();
  22:  })();

script.js 代码:

   1:  (function () {
   2:      "use strict";
   3:   //定义数据
   4:      var dataArray = [
   5:      { type: "item", title: "Cliff", picture: "images/logo.png" },
   6:      { type: "item", title: "Grapes", picture: "b.png" },
   7:      { type: "item", title: "Rainier", picture: "c.png" }
   8:     
   9:      ];
  10:   
  11:      var dataList = new WinJS.Binding.List(dataArray); 定义List对象,作为数据源
  12:   
  13:      // 
  14:      // 创建一个命名空间,以使dataList能够被外界访问到 
  15:      var publicMembers =
  16:          {
  17:              itemList: dataList 
  18:          };
  19:      WinJS.Namespace.define("DataExample", publicMembers); 
  20:   
  21:  })();

实现效果:

Adding a ListView http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx

才例子包含三个文件  ListView.html  default.js script.js

ListView.html页面代码:

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8">
   5:      <title>NavApp</title>
   6:      <!-- WinJS references -->
   7:      <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
   8:      <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
   9:      <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
  10:      <script type="text/javascript" src="jquery-1.7.2.js"></script>
  11:      <script type="text/javascript" src="js/default.js"></script>
  12:      <script type="text/javascript" src="script.js"></script>
  13:      <style type="text/css">
  14:          #basicListView
  15:          {
  16:              border: 2px solid gray;
  17:              width: 650px;
  18:          }
  19:      </style>
  20:  </head>
  21:  <body>
  22:      <!--创建 listview模板,以显示数据-->
  23:      <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
  24:          <div style="width: 650px; height: 100px;">
  25:              <img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" />
  26:              <div>
  27:                  <h4 data-win-bind="innerText: title"></h4>
  28:                  <h6 data-win-bind="innerText: text"></h6>
  29:              </div>
  30:          </div>
  31:      </div>
  32:   
  33:      <!--layout: {type: WinJS.UI.ListLayout}--><!-- selectionMode: 'multi' 配置可以多选-->
  34:      <div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">
  35:      </div>
  36:  </body>
  37:  </html>

default.js文件代码:

   1:  // For an introduction to the Navigation template, see the following documentation:
   2:  // http://go.microsoft.com/fwlink/?LinkId=232506
   3:  (function () {
   4:      "use strict";
   5:   
   6:      var app = WinJS.Application;
   7:   
   8:      app.onactivated = function (eventObject) {
   9:          if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
  10:              if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
  11:                 
  12:              } else {
  13:                 
  14:              }
  15:              WinJS.UI.processAll();
  16:          }
  17:      };
  18:   
  19:     
  20:   
  21:      app.start();
  22:  })();

script.js文件代码

   1:   
   2:  (function () {
   3:      "use strict";
   4:   
   5:      var dataArray = [
   6:      { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "a.png" },
   7:      { title: "Banana blast", text: "Ice cream", picture: "b.png" },
   8:      { title: "Brilliant banana", text: "Frozen custard", picture: "c.png" }
   9:   
  10:      ];
  11:   
  12:      var dataList = new WinJS.Binding.List(dataArray);
  13:      var publicMembers =
  14:          {
  15:              itemList: dataList
  16:          };
  17:      WinJS.Namespace.define("DataExample", publicMembers);
  18:   
  19:  })();

效果如下图:

下面演示  按title的首字母 进行分组 显示:  共包含三个文件  ListView.html   default.js   script.js

ListView.html代码如下:

   1:  <!DOCTYPE html>

   2:  <html>

   3:  <head>

   4:      <meta charset="utf-8">

   5:      <title>NavApp</title>

   6:      <!-- WinJS references -->

   7:      <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">

   8:      <script src="//Microsoft.WinJS.0.6/js/base.js"></script>

   9:      <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

  10:      <script type="text/javascript" src="jquery-1.7.2.js"></script>

  11:      <script type="text/javascript" src="js/default.js"></script>

  12:      <script type="text/javascript" src="script.js"></script>

  13:      <style type="text/css">

  14:        #groupedListView

  15:  {

  16:      width: 600px;

  17:      height: 300px;

  18:      border: solid 2px rgba(0, 0, 0, 0.13);

  19:  }

  20:   

  21:  /* Template for headers */

  22:  .simpleHeaderItem

  23:  {

  24:      width: 50px;

  25:      height: 50px;

  26:      padding: 8px;

  27:  }   

  28:   

  29:  /* Template for items */  

  30:  .mediumListIconTextItem

  31:  {

  32:      width: 282px;

  33:      height: 70px;

  34:      padding: 5px;

  35:      overflow: hidden;

  36:      display: -ms-box;

  37:  }

  38:   

  39:      .mediumListIconTextItem img.mediumListIconTextItem-Image 

  40:      {

  41:          width: 60px;

  42:          height: 60px;

  43:          margin: 5px;

  44:          -ms-grid-column: 1;

  45:      }

  46:   

  47:      .mediumListIconTextItem .mediumListIconTextItem-Detail

  48:      {

  49:          margin: 5px;

  50:          -ms-grid-column: 2;

  51:      }

  52:      </style>

  53:  </head>

  54:  <body>

  55:     <div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">

  56:      <div class="simpleHeaderItem">

  57:          <h1 data-win-bind="innerText: title"></h1>

  58:      </div>

  59:  </div>

  60:   

  61:  <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">

  62:      <div class="mediumListIconTextItem">

  63:          <img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />

  64:          <div class="mediumListIconTextItem-Detail">

  65:              <h4 data-win-bind="innerText: title"></h4>

  66:              <h6 data-win-bind="innerText: text"></h6>

  67:          </div>

  68:      </div>

  69:  </div>

  70:   

  71:  <div id="groupedListView"

  72:      data-win-control="WinJS.UI.ListView" 

  73:      data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'),  groupDataSource: myData.groupedItemsList.groups.dataSource, groupHeaderTemplate: select('#headerTemplate'), layout: {type: WinJS.UI.GridLayout}}"

  74:  ></div>

  75:   

  76:  </body>

  77:  </html>

 

default.js代码:

   1:  // For an introduction to the Navigation template, see the following documentation:
   2:  // http://go.microsoft.com/fwlink/?LinkId=232506
   3:  (function () {
   4:      "use strict";
   5:   
   6:      var app = WinJS.Application;
   7:   
   8:      app.onactivated = function (eventObject) {
   9:          if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
  10:              if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
  11:                 
  12:              } else {
  13:                 
  14:              }
  15:              WinJS.UI.processAll();
  16:          }
  17:      };
  18:   
  19:     
  20:   
  21:      app.start();
  22:  })();

script.js代码:
   1:   
   2:  (function () {
   3:      "use strict";
   4:   
   5:      var dataArray = [
   6:      { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "a.png" },
   7:      { title: "Banana blast", text: "Ice cream", picture: "b.png" },
   8:      { title: "Arilliant banana", text: "Frozen custard", picture: "c.png" }
   9:   
  10:      ];
  11:   
  12:      var dataList = new WinJS.Binding.List(dataArray);
  13:   
  14:      // 给组排序
  15:      function compareGroups(left, right) {
  16:          return left.charCodeAt(0) - right.charCodeAt(0);
  17:      }
  18:   
  19:      //返回组名
  20:      function getGroupKey(dataItem) {
  21:          return dataItem.title.toUpperCase().charAt(0);
  22:      }
  23:   
  24:      // 返回组名 用于显示
  25:      function getGroupData(dataItem) {
  26:          return {
  27:              title: dataItem.title.toUpperCase().charAt(0)
  28:          };
  29:      }
  30:   
  31:      
  32:      var groupedItemsList = dataList.createGrouped(getGroupKey, getGroupData, compareGroups);
  33:      //List.createGrouped 详细:http://msdn.microsoft.com/en-us/library/windows/apps/Hh700742.aspx
  34:      WinJS.Namespace.define("myData",
  35:          {
  36:              groupedItemsList: groupedItemsList
  37:          });
  38:   
  39:   
  40:   
  41:   
  42:   
  43:  })();

效果:

adding a http://msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspx

什么是 SemanticZoom  呢?微软官方的解释是:先看图解:

文字解释:这个例子很贴切。

查看电话薄的时候,为了能快速查到某个人,可以将界面定位到 字母检索,然后根据字母内的名字开始查找。

此例子包含三个文件:ListView.html  default.js   script.js

ListView.html   代码如下:

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta charset="utf-8">
   5:      <title>NavApp</title>
   6:      <!-- WinJS references -->
   7:      <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
   8:      <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
   9:      <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
  10:      <script type="text/javascript" src="jquery-1.7.2.js"></script>
  11:      <script type="text/javascript" src="js/default.js"></script>
  12:      <script type="text/javascript" src="script.js"></script>
  13:      <style type="text/css">
  14:          /* Template for headers in the zoomed-in ListView */
  15:          .simpleHeaderItem
  16:          {
  17:              width: 50px;
  18:              height: 50px;
  19:              padding: 8px;
  20:          }
  21:   
  22:          /* Template for items in the zoomed-in ListView */
  23:          .mediumListIconTextItem
  24:          {
  25:              width: 282px;
  26:              height: 70px;
  27:              padding: 5px;
  28:              overflow: hidden;
  29:              display: -ms-box;
  30:          }
  31:   
  32:              .mediumListIconTextItem img.mediumListIconTextItem-Image
  33:              {
  34:                  width: 60px;
  35:                  height: 60px;
  36:                  margin: 5px;
  37:                  -ms-grid-column: 1;
  38:              }
  39:   
  40:              .mediumListIconTextItem .mediumListIconTextItem-Detail
  41:              {
  42:                  margin: 5px;
  43:                  -ms-grid-column: 2;
  44:              }
  45:   
  46:          /* Template for items in the zoomed-out ListView */
  47:          .semanticZoomItem
  48:          {
  49:              width: 130px;
  50:              height: 130px;
  51:              background-color: rgba(38, 160, 218, 1.0);
  52:          }
  53:   
  54:              .semanticZoomItem .semanticZoomItem-Text
  55:              {
  56:                  padding: 10px;
  57:                  line-height: 150px;
  58:                  white-space: nowrap;
  59:                  color: white;
  60:              }
  61:   
  62:          /* CSS for the zoomed-in ListView */
  63:          #zoomedInListView
  64:          {
  65:              width: 600px;
  66:              height: 300px;
  67:              border: solid 2px rgba(0, 0, 0, 0.13);
  68:          }
  69:   
  70:          #semanticZoomDiv
  71:          {
  72:              width: 600px;
  73:              height: 300px;
  74:              border: solid 2px rgba(0, 0, 0, 0.13);
  75:          }
  76:      </style>
  77:  </head>
  78:  <body>
  79:      <!-- zoomed-in 的标题 -->
  80:      <div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
  81:          <div class="simpleHeaderItem">
  82:              <h1 data-win-bind="innerText: title"></h1>
  83:          </div>
  84:      </div>
  85:      <!-- zoomed-in 的内容 -->
  86:      <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
  87:          <div class="mediumListIconTextItem">
  88:              <img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
  89:              <div class="mediumListIconTextItem-Detail">
  90:                  <h4 data-win-bind="innerText: title"></h4>
  91:                  <h6 data-win-bind="innerText: text"></h6>
  92:              </div>
  93:          </div>
  94:      </div>
  95:      <!-- zoomed-out 的显示内容 也就是 组名字 -->
  96:      <div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
  97:          <div class="semanticZoomItem">
  98:              <h1 class="semanticZoomItem-Text" data-win-bind="innerText: title"></h1>
  99:          </div>
 100:      </div>
 101:   
 102:      <div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">
 103:          <!-- The zoomed-in view. -->
 104:          <div id="Div1" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }">
 105:          </div>
 106:          <!--- The zoomed-out view. -->
 107:          <div id="Div2" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }">
 108:          </div>
 109:      </div>
 110:  </body>
 111:  </html>

default.js内容:

   1:  // For an introduction to the Navigation template, see the following documentation:
   2:  // http://go.microsoft.com/fwlink/?LinkId=232506
   3:  (function () {
   4:      "use strict";
   5:   
   6:      var app = WinJS.Application;
   7:   
   8:      app.onactivated = function (eventObject) {
   9:          if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
  10:              if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
  11:                 
  12:              } else {
  13:                 
  14:              }
  15:              WinJS.UI.processAll();
  16:          }
  17:      };
  18:   
  19:     
  20:   
  21:      app.start();
  22:  })();

script.js内容:

   1:   
   2:  (function () {
   3:      "use strict";
   4:   
   5:      var dataArray = [
   6:      { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "a.png" },
   7:      { title: "Banana blast", text: "Ice cream", picture: "b.png" },
   8:      { title: "Grilliant banana", text: "Frozen custard", picture: "c.png" },
   9:      { title: "Fasic banana", text: "Low-fat frozen yogurt", picture: "a.png" },
  10:      { title: "Banana blast", text: "Ice cream", picture: "b.png" },
  11:      { title: "Arilliant banana", text: "Frozen custard", picture: "c.png" },
  12:       { title: "Casic banana", text: "Low-fat frozen yogurt", picture: "a.png" },
  13:      { title: "Danana blast", text: "Ice cream", picture: "b.png" },
  14:      { title: "Erilliant banana", text: "Frozen custard", picture: "c.png" }
  15:   
  16:      ];
  17:   
  18:      var dataList = new WinJS.Binding.List(dataArray);
  19:   
  20:      // 给组排序
  21:      function compareGroups(left, right) {
  22:          return left.charCodeAt(0) - right.charCodeAt(0);
  23:      }
  24:   
  25:      //返回分组的标记
  26:      function getGroupKey(dataItem) {
  27:          return dataItem.title.toUpperCase().charAt(0);
  28:      }
  29:   
  30:      // 返回组名 用于显示
  31:      function getGroupData(dataItem) {
  32:          return {
  33:              title: dataItem.title.toUpperCase().charAt(0)
  34:          };
  35:      }
  36:   
  37:   
  38:      var groupedItemsList = dataList.createGrouped(getGroupKey, getGroupData, compareGroups);
  39:      //List.createGrouped 详细:http://msdn.microsoft.com/en-us/library/windows/apps/Hh700742.aspx
  40:      WinJS.Namespace.define("myData",
  41:          {
  42:              groupedItemsList: groupedItemsList
  43:          });
  44:   
  45:   
  46:   
  47:   
  48:   
  49:  })();

效果:

运行app之后只会 显示一个 listview:

当 把鼠标放在 某一个 item上,按住 ctrl 加滚动滚轮,下面 就是 激动的时刻了。。

界面就会变成这样,之后再 按住 ctrl+ 滚动滚轮, 就实现了两个页面之间的相互

切换, 这个应用的确很帅。

这时官方给的使用方法:

。开始没认真看这个图,搞了半天,没弄明白怎么使用这个东西,杯具啊。

转载于:https://www.cnblogs.com/Mr-Joe/archive/2012/03/31/2427284.html

Steps to developing Metro style apps 第一章-Creat a UI(2)(4)相关推荐

  1. Windows8应用生命周期 Metro Style Apps Lifecycle

    1. Lifecycle Windows8应用的生命周期,与Windows Phone及其他手机平台相比更加简单,Windows8应用只有:未运行.运行.挂起,三个状态.其状态如下图: 当应用切换到后 ...

  2. 第一篇 Windows 8 开发Windows Metro style app环境配置

    目录 1.介绍 2.Windows 8 安装 3.VS 2012安装 4.Windows Metro style配置总结 介绍 离Windows 8正式发布已经只有一个月了,可能在未来的开发中都会用到 ...

  3. CV:翻译并解读2019《A Survey of the Recent Architectures of Deep Convolutional Neural Networks》第一章~第三章

    CV:翻译并解读2019<A Survey of the Recent Architectures of Deep Convolutional Neural Networks>第一章~第三 ...

  4. 有利可图网_第一章:有利可图的项目手册

    有利可图网 This is the first chapter of my book, which you can also download in PDF format. If you want t ...

  5. 《Gans in Action》第一章 对抗神经网络介绍

    此为<Gans in Action>(对抗神经网络实战)第一章读书笔记 Chapter 1. Introduction to GANs 对抗神经网络介绍 This chapter cove ...

  6. After Effects CC SDK 使用指南(二)—— 第一章 介绍 (上)

    其他文章链接 序 第一章 介绍-上 第一章 介绍-下 第一章 介绍 欢迎使用Adobe®After Effects®CC软件开发工具包!这是一个全新的文档,并不断更新.SDK的最新公共版本地址:htt ...

  7. Android项目驱动式开发教程 第2版,《Android项目驱动式开发教程》第一章开发入门.ppt...

    <Android项目驱动式开发教程>第一章开发入门 1.4 项目框架分析 4 android:versionName="1.0" > 5 8 第9行代码andro ...

  8. ASP.NET自定义控件组件开发 第一章 第二篇 接着待续

    ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 很感谢大家给我的第一篇ASP.NET控件开发的支持!在写这些之前,我也看了一些例 ...

  9. 第一章:AJAX与jQuery

    AJAX 第一章:AJAX与jQuery 概念:AJAX = Asynchronous JavaScript And XML(异步的 JavaScript 和 XML).阿贾克斯 AJAX 不是新的编 ...

最新文章

  1. 51单片机好学嘛?学完51单片机学什么?
  2. leetcode算法题--子数组按位或操作
  3. JDEManual2 Overview
  4. python中坐标怎么表示_如何在Python中以像素表示(有限)平面上的坐标
  5. java数据结构之快速排序
  6. python作业第四周答案_Python3第四周作业——员工信息表程
  7. @Inner使用及原理
  8. Eclipse 汉化包下载安装
  9. Python中,如何使用ImageDraw在Image上绘制粗线?
  10. Postgresql源码(41)plpgsql函数编译执行流程分析
  11. react报错:Uncaught Error: Element type is invalid: expected a string (for built-in components) or a ..
  12. C++之策略(Strategy)模式
  13. 动态桌面软件测试简历,动态壁纸软件横评
  14. 赢在2022,面试官常问的软件测试面试题总结
  15. 我的世界修改服务器视距,教程/测量距离 - Minecraft Wiki,最详细的官方我的世界百科...
  16. 3288 android5.1 编译,【DLT-RK3288试用】8. RK3288 编译 Android 5.1 源码
  17. 实对称矩阵的特征值求法_机械振动理论(3)-解析实模态分析
  18. 佳能C3025打印机扫描方法
  19. MySQL 解析单条查询
  20. php 米转换km,米 转换

热门文章

  1. 2018-06-22 第四十七天 oracle
  2. stream pipe的原理及简化源码分析
  3. Maven学习-构建项目
  4. 一些PHP性能优化汇总
  5. 为什么 MySQL 回滚事务也会导致 ibd 文件增大?
  6. 3.集--LinkedTransferQueue得知
  7. iOS开发系列文章(持续更新……)
  8. 100层楼2个鸡蛋,如何得知鸡蛋能承受几层的撞击
  9. php接口,免认证的短信接口,每天单个号码140条以上
  10. hbase数据导入到mysql(转载+自己验证整理,目前失败)