顯示具有 Windows 8 標籤的文章。 顯示所有文章
顯示具有 Windows 8 標籤的文章。 顯示所有文章

2013年5月2日 星期四

[ Windows 8 APP] 用XAML設計動畫

1. 載入Begin Windows 8 Application Development第8章Working with XAML Control,RotatingPanelIn3D範例。執行結果如下:



2.打開主畫面MainPage.xaml,在內容中有Storyboard就是此應用程式的主角,名字叫"rotateStoryboard。在"rotateStoryboard有一屬性是Storyboard.TargetName內含有物畫的標的物,名字叫rotateTransform。
3. MainPage.cs原始程式

4. 新增按鈕

5.新增按鈕事件程式
        private void startButton_Click_1(object sender, RoutedEventArgs e)
        {
            rotateStoryboard.Begin();
        }





[ Windows 8 APP] 好書範例分享


範例下載網址:
http://www.wrox.com/WileyCDA/WroxTitle/Beginning-Windows-8-Application-Development.productCd-1118012682,descCd-DOWNLOAD.html

2013年4月11日 星期四

[ Windows 8 APPs ]簡易磚塊實現

在Windows 8 APPs比iOS或Android迷人地方在於磚塊的設計,特別是動態磚。最基本的磚塊設計如下:

1. 建立新專案後,可開APP.xaml.cs
2. 在該檔案中加入UpdateTile()函式。

3. 增加元件的使用及呼叫UpdateTile()

4. 執行結果

2013年3月26日 星期二

[ Windows 8 APPs ] 建立新專案

1.打開Visual Studio 2012,選擇檔案->新增->專案,如下圖.然後再選擇Windows市集,格線應用程式,格線應用程式可以建立3層操控介面的範本, 省去我們建構程式架構的時間。

 2.選擇執行後,下圖是執行結果。
 
3.在方案總管上,選擇Data Model資料夾中SampleDataSource.cs,找到SampleDataSource()建構元,就可看到畫面中的資料結構。
 4. 查看下圖及程式,讀者應可以看到其結果。
var group1 = new SampleDataGroup("Group-1",
                    "Group Title: 1",
                    "Group Subtitle: 1",
                    "Assets/DarkGray.png",
                    "Group Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante");
            group1.Items.Add(new SampleDataItem("Group-1-Item-1",
                    "Item Title: 1",
                    "Item Subtitle: 1",
                    "Assets/LightGray.png",
                    "Item Description: Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.",
                    ITEM_CONTENT,
                    group1));
 
5. 練習修改
            var group1 = new SampleDataGroup("Group-1",
                    "師資",
                    "11位教師",
                    "Assets/DarkGray.png",
                    "南開科技大學數位生活創意系擁有2位教授、3位副教授、4位助理教授、2位講師");
            group1.Items.Add(new SampleDataItem("Group-1-Item-1",
                    "林正敏",
                    "教授兼系主任",
                    "Assets/LightGray.png",
                    "專長:智慧生活科技、嵌入式系統、行動計算、車載資通訊",
                    ITEM_CONTENT,
                    group1));
 
 
6. 建立應用程式名稱(打開package.appxmanifest)

 
7. 修改標題名稱(打開App.xaml)
 





2013年2月9日 星期六

[ Windwos 8 APPs ] 學習Windwos 8 APPs就從Metro UI開始

Metro UI 是Windows 最新人機介面,或許我們可以稱它為Windows UI、Medern UI、Windows 8-style UI,目前已被採用在Windows 8, XBox 360中。Metro UI最主要的訴求是"光滑、快、現代",其靈感來自於機場及地鐵的指示牌。詳細介紹您可以參閱維基百科的Metro UI的說明。
微軟這次在人機介面上改版下了很大決心,我們所熟悉的Icon不見,最小化及最大化也不見,連關閉鈕都不在,而其設計樣子跟乾隆年間盛行的"多寶格"很像,只不過使用軟體來呈現數位多寶格,其框架大小可以無限延伸,自訂大小。有興趣讀者可以閱讀"Metro UI 不是一套Skin"的文章。
在"談 Metro UI 以及 Expression Blend 的未來"文章中說明Metro UI的四個重點:
  1. 矩形大色塊、顏色單一且簡單
  2. 內容為簡單的文字或是圖案
  3. 大量簡潔的空白空間且具設計感
  4. 使用直覺式設計,讓使用者操作無障礙
在"淺談微軟Windows手機的metro UI設計"文章中,強調Metro UI設計是簡潔輕巧開放快速(clean,light,open and fast),設計元素強調動態內容、字型。並說明七大設計要點:
  1. 強調文字/字型設計
  2. 樸素的圖文
  3. 強調畫面的轉變過程
  4. 內容為主角
  5. 改變空間的運用
  6. 大膽使用顏色
  7. 反應快速的動態磚(tile)
在"小喵看Windows Phone的設計理念—Metro UI"文章中,以夜市招牌-賣木瓜牛奶的招牌,強調:
  1. 最精簡的文字
  2. 最簡單的圖示(或圖案)
  3. 沒有多餘的設計
另外對動態磚的設計也有詳細的說明,動態磚包括:一小段文字、一個背景圖、以及背後的標題。
在操控Windows 8 Metro UI可以用十二字訣來說明,那就是
  • 觸控四邊
  • 滑鼠四角
  • 右鍵無敵
讀者可以參考"Windows 8十二字訣,完全搞懂介面設計使用技巧"的文章說明。
"Windows Phone靈魂詮釋:Metro UI界面完全解析"對Metro UI有詳細的說明。
若您對Metro UI的應用有興趣,可以閱讀"未來生活進行時: 數字倫敦2012 —— 從Metro UI 到奧運規劃未來智慧城市的一個範本"文章。