黑皮考町

前言: 微軟Window 10 的語音助理Cortana, 實現了用語音去驅動我們應用程式的情境, 開發人員可以在UWP的專案裡, 定義Voice Command, 當使用者的語音輸入符合相對應的指令,(如 Add new Movie on My Library), 程式就會被觸發, 簡單的說, 我們可以用語音把程式叫起來 , 然後讓它去做一些事情 如果想要建立一支能夠被Voice Command觸發的程式, 基本上有幾個步驟 建立一個專案 定義應用程式的Voice Command 修改App.xaml.cs 處理程式被觸發時的動作, 複寫OnLaunched和OnActivated (比如說做一個顯示使用者的電影資料的程式 ) 建立一個新專案 在專案中建立Data Model "Movie" 表示電影資訊 定義Voice Command 這邊定義兩個command showMovies, 這個動作會把程式的MainPage叫起來, 然後我們會在頁面上顯示所有電影資訊 addNewMovie, 這個動作會把語句中的電影名稱抓出來然後加到主頁面上 基本上要做到這件事, 必須要在VoiceCommand中定義PhraseList, 並且在ListFor的語句中標示出來, 列如 add {MovieName} Cortana就會根據原先定義在PhraseList中的MovieName item去解析出句子中的電影名稱, 然後傳遞給我們程式 修改App.xaml.cs 在OnLaunched 最後面呼叫InstallCommandDefinitionsFromStorageFileAsync去安裝VoiceCommand 複寫OnActivated, 我們可以從SpeechRecognitionResult這個類別中知道語意識別的結果, 或是擷取語句中的{MovieName}, 如speechRecognitionResult.SemanticInterpretation.Properties["MovieName"].FirstOrDefault(); MainPage.xaml 在MainPage.xaml 裡定義一個ListBox 然後綁

前言 使用一個簡單的範例介紹如何切換頁面, 基本上會用到Frame的Navigate()作為頁面切換的方法, 以及實作OnNavigatedTo 處理頁面切換時的動作 假設今天我們要設計一支程式, 在主頁面(MainPage)上顯示顧客(Person)資料, 並且提供按鈕(Edit), 讓使用者按下去之後, 切換主頁面到編輯頁面(EditPage)修改資料, 使用情境如下： 情境一：使用者在主頁(MainPage)點擊Edit按鈕 情境二：使用者在編輯頁(EditPage)點擊Save按鈕 Data Model 我們首先建立一個Person的類別來表示顧客資訊 MainPage Code-Behind 我們在這邊宣告Person, 用來作UI元件的 Data Binding的目標物件 將DataContext 設為 this (作為UI元件的Data Binding的來源) 實作Edit按鈕的Click Event handler, 在這個函式內我們從Window.Current.Content取得 root frame 的實體, 然後呼叫它的 Navigate 方法去切換頁面並且把現在的Person資訊傳給EditPage 複寫(override) OnNavigatedTo 處理當頁面被切換回MainPage時, 我們要去更新Person MainPage.xaml 我們在這邊建立兩個TextBlock並且綁定Code-behind裡的Person.Name, 和Person.Id EditPage Code-Behind 這邊做的事情其實跟MainPage差不多, 宣告Person, 設定DataContext 複寫OnNavigatedTo, 拿MainPage傳過來的Person更新EditPage現在的 實作按鈕Click Event handler處理頁面切換的動作並傳遞更新後的Person給MainPage EditPage.xaml 在這個頁面供TextBox顯示MainPage傳過來的Person資訊, 以及提供按鈕Save去切換頁面, 然後將更新後的Person回傳給MainPage

前言: 由於工作需要, 而且懶得再重寫類似的專案, 所以常常將之前寫的專案複製一份加料後, 再重新命名編譯 假設今天我有一個專案HolyUWP, 我想把它重新命名成 BestUWP 時該怎麼做? 以下是幾個簡單的的步驟 使用Visual Studio 2017 備份原來專案 更改Solution名稱 更改Assembly name, Default namespce 更改每支程式碼的Namespace 更改專案資料夾名稱 備份原來專案 由於怕改壞掉, 所以在改之前先備份 更改Solution名稱 更改sln的名稱, 這邊我改成BestUWP.sln 使用Visual Studio打開你的.sln, 右鍵點擊Solution後選擇Rename, 這邊我把它重新命名成BestUWP(跟檔案名稱一致) 必要的話可以順便修改Porject名稱 更改Assembly name, Default namespce 進入 Project > OOXX Properties    修改Assembly Name, Default namesapce 更改每支程式碼的Namespace 基本上隨便挑一支有用到預設Namesapce(HolyUWP)的程式碼來改就好了 重新命名後點擊Apply,  這個動作做完後所有用到舊Namespace的程式碼都會被改成新的 更改專案資料夾名稱 以上動作做完後, 基本上就可以把專案編譯出來測看看了~

前言: 上一篇文章" 使用UWP 設計 MVVM 軟體架構(一)  " , 我們以電影清單程式, 簡單地表示MVVM的架構及實作方法, 程式中View會把所有的電影資訊顯示在螢幕上, 但若現在我們想要再加一個功能, 讓使用者點擊ListBox上的Item(Movie)時, 頁面能夠導向另一個View去顯示詳細的電影資訊, 那我們該如何實作? 以下就是說明, 如何使用NavigationService來幫助我們去切換每個View元件, 基本上有幾個步驟 修改App.cs 建立ViewModel, MovieDetailViewModel 建立View, MovieDetailView 修改MovieDetailView 修改MovieListViewModel 修改MovieListView 前置作業 在開始動工之前我們先在Common的資料夾裡加入以下的類別 INavigationService.cs NavigationService.cs NavigationHelper.cs SuspensionManager.cs 修改App.xaml.cs 我們在這邊宣告NavigationService的靜態變數方便將來使用 建立MovieDetailViewModel 為了簡化範例, 基本上這個ViewModel沒什麼特別功能, 單純就是開放Movie的Model讓View做Data Binding而已 將MovieDetailViewModel的實體加到ViewModelLocator裡 建立MovieDetailView 這邊我們建立一個全新的View Page顯示電影名稱, 電影價錢 修改MovieDetailView.xaml.cs 處理頁面轉換 實作NavigationHelper.LoadState事件, 處理當頁面被載入時的動作, 讓MovieListView傳過來的Model能設定給MovieDetailViewModel 修改MovieListViewModel 加入一個新的方法, 提供ListBox 上點擊Item時的事件處理邏輯 主要是去呼叫NavigationService做頁面切換 修改

前言: 什麼是MVVM? 簡單的說他是由 Model, ViewModel, 和View 所構成的軟體架構 Model, 指的是我們用來存放資料的類別, 除此之外, 商業邏輯也會被封裝在裡面, 他只負責處理跟資料有關的行為  ViewModel, 作為整個架構的中間層, 負責提供View需要的資料 View, 架構中負責呈現介面的元件 會有這個概念, 一開始是為了避免View當中存在太多的商業邏輯使得程式碼變得很難trace 或是維護, 所以我們把關於資料實體的商業邏輯還有資訊都封裝在一個類別後抽出來成為一個Model. 然而這樣的程式碼還是不夠乾淨, 因為View 和  Model 之間的相依性, 會出現當Model一改View就要跟著改得情況, 所以最後我們在View和Model之間多了一層ViewModel的類別, 負責提供或轉換適當的資料給View, 以降低View和Model之間的相依性 以下是個簡單的範例, 說明如何在UWP的專案中設計出MVVM的軟體架構 這個範例是一個顯示電影清單的程式, 基本上有幾個步驟 建立一個新專案 設計Model,  我們會有個Movie類別, 來表示電影的名稱以及價錢 設計ViewModel, 我們會有個 MovieViewModel的類別, 提供適當的 Movie 資料給View使用 設計View, 我們會簡單的加入ListBox來呈現電影清單, 以及一個Button來刪除畫面上的所有電影 第一步：建立專案 選擇C#>Windows Universal>Blank App 第二步：設計Model 首先建立Models的資料夾 之後在裡面建立一個新類別Movie 繼承並實作介面INotifyPropertyChanged, 如下 建立資料夾Data, 之後再這個資料夾裡面建立一個FakeDatabase的類別 這是一個假的資料庫用來提供電影資料給ViewModel, 實際上我們是把資料寫在外部的XML中 第三步, 建立 ViewModel 建立一個ViewModelBase的類別 用來作為所有ViewModel的基底並且繼承INotifyPropertyChanged

前言: 一個網頁內容通常不會只有一個網頁元件, 所以如果我們希望呈現出來的結果符合預期, 那我們必須要學會如何排版, 有秩序地安置這些網頁元件, 這裡的教學會告訴大家如何使用Grid 來實現排版 首先, 我們來看一下範例 這個頁面可以分成三個部分, 如下圖所示 一. Welcome ,網頁的簡介 二. Game 1 的簡介與下載點 三. Game 2 的簡介與試玩按鈕 基本上如果要使用Grid , 首先, 我們需要一個 container 當作容器 <div class=" container "> ... </div> 接下來, 在container裡定義列與行 定義列的語法 :　 <div class="row"> 這裡我們先把兩列定義出來 <div class=" row "> </div> <div class=" row "> </div> 再來, 定義行 定義行的語法: 　 <div class="col-[支援的裝置]-[大小]"> 這裡跟列比較不一樣的是, 定義行的時候可以指定要支援的裝置, 以及大小,  目前可支援的裝置有四種 xs, sm, md, lg, 如果你的網頁是要呈現在手機上的話, 可能就需選擇xs  目前支援的大小有1~12, 1 表示呈現大小是一整列的1/12的意思, 所以依此類推 12 表示一整列裡佔12/12大的行 這邊, 我們替範例在第一列增加一個行, 還有在第二列裡增加兩個等大的行, 所以原始碼就會變成 <div class=" row ">      <div class=" col-md-12 ">      </div> </div> <div class=" row ">      <di

今天如果我想更新資料我可以用findOneAndUpdate, 但資料如果本身就不存在於資料庫裡時,　而我又想將這筆資料插入進去 那我們可能需要在callback function裡作新增的動作如下　 Customer.findOneAndUpdate( query, update, function (err,result){ if (!err){ if (! result ){ result = new Customer( update ) } result.save( function (err){ if (err) throw err }) } }) 而更簡單的方法是我們可以傳入 { upsert: true} 這個option參數來做到一樣的事情 Customer.findOneAndUpdate( query, update,  {upsert:true} ,  function (err){       if (err) throw err  })