初識Windows通用應用(UWP App) - HelloWorld
自從Windows 10第一預覽版泄露以來,對UWP一直頗感神祕,今天閒下來有空搞了搞。
項目結構:
創建項目:
首先創建一個空白的Windows通用應用。
然後再解決方案中會生成一大堆的文件,其中要注意一下MainPage.xml,它是用來定義界面的,其根元素爲Page,自定義的界面代碼在Grid元素中編寫。
詳細轉到此網址:Create a "Hello, world" app (XAML)
廢話不多說,貼代碼:
MainPage.xaml文件:
<Page
x:Class="UWPDemo1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWPDemo1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<!--表示大於641 pixel顯示的樣式-->
<VisualState x:Name="wideState">
<VisualState.StateTriggers>
<!--規定最小的寬度爲641 pixel-->
<AdaptiveTrigger MinWindowWidth="641"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="submitBtn.HorizontalAlignment" Value="Right" />
<Setter Target="submitBtn.Margin" Value="300,50,100,0" />
</VisualState.Setters>
</VisualState>
<!--表示在0 pixel到641 pixel之間顯示的樣式-->
<VisualState x:Name="narrowState">
<VisualState.StateTriggers>
<!--規定最小寬度爲0 pixel,因爲上面已定義一個比當前寬度大的pixel,所以會在這個區間內(0~641)顯示-->
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<!--設置元素的位置和屬性-->
<VisualState.Setters>
<!--定位contentArea-->
<Setter Target="contentArea.Orientation" Value="Vertical" />
<!--設定按鈕的外邊距(Margin:左、上、右、下)-->
<Setter Target="submitBtn.Margin" Value="150,50,150,0" />
<!--設定文本框的外邊距(Margin:左、上、右、下)-->
<Setter Target="inputUserName.HorizontalAlignment" Value="Left" />
<Setter Target="resultArea.Margin" Value="0,0,0,80" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Margin="8,32,0,0">
<TextBlock Text="Hello World" Margin="0,0,0,40" FontSize="29.333" />
<TextBlock Text="你叫什麼名字?"/>
<StackPanel Margin="0,20,0,20" x:Name="contentArea">
<TextBox x:Name="inputUserName" Margin="10,0" HorizontalAlignment="Center" Width="228" />
<Button x:Name="submitBtn" Content="確認" Click="submitBtn_Click" HorizontalAlignment="Stretch" Margin="125,100,125,0" />
</StackPanel>
<TextBlock x:Name="resultArea"/>
</StackPanel>
</Grid>
</Page>
對於不同窗口的自適應縮放,官方文檔說的很清楚,也是UWP App的核心之一,通過添加一個VisualStateManager來規定當窗口的Size處於哪一範圍內時應用什麼樣式,樣式通過其內VisualState的Setter元素來設定。
MainPage.xaml.cs文件:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using UWPDemo1.DDL;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
//“空白頁”項模板在 http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 上有介紹
namespace UWPDemo1
{
/// <summary>
/// 可用於自身或導航至 Frame 內部的空白頁。
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private async void submitBtn_Click(object sender, RoutedEventArgs e)
{
//創建一個消息框
var dialog = new ContentDialog(){ Title="消息提示",Content="您的姓名是:"+this.inputUserName.Text+"。",PrimaryButtonText="確定",SecondaryButtonText="取消",FullSizeDesired=false};
this.resultArea.Text = "您的姓名是"+this.inputUserName.Text + "。";
dialog.PrimaryButtonClick += Dialog_PrimaryButtonClick;
dialog.SecondaryButtonClick += Dialog_SecondaryButtonClick;
//異步等待用戶操作的方式顯示信息框
await dialog.ShowAsync();
}
private BusinessService service = new BusinessService();
private void Dialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
{
this.resultArea.Text = service.CheckResult(this.inputUserName.Text);
}
private void Dialog_PrimaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
{
this.resultArea.Text = service.CheckResult(this.inputUserName.Text);
}
}
}
BusinessService類:
using SQLitePCL;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace UWPDemo1.DDL
{
public class BusinessService
{
public String CheckResult(String name)
{
if (name.Length == 0)
{
return "非常抱歉!您的姓名在嘗試確認操作時失敗!\n您的姓名確認失敗。";
}
else
{
SQLiteConnection _connection = new SQLiteConnection(DB_NAME);
using (var statement = _connection.Prepare(SQL_CREATE_TABLE))
{
statement.Step();
}
using (var statement = _connection.Prepare(SQL_INSERT))
{
statement.Bind(1, name);
statement.Bind(2, "我叫" + name);
statement.Step();
}
String content = string.Empty;
using (var statement = _connection.Prepare(SQL_QUERY_VALUE))
{
statement.Bind(1,"Steve Jrong");
SQLiteResult result = statement.Step();
if (SQLiteResult.ROW == result)
{
content = statement[0] as String;
}
}
return "恭喜!您的姓名已確認!\n您的姓名爲:" + name + "。\n內容爲:"+content;
}
}
private static String DB_NAME = "SQLiteSample.db";
private static String TABLE_NAME = "SampleTable";
private static String SQL_CREATE_TABLE = "CREATE TABLE IF NOT EXISTS " + TABLE_NAME + " (Key TEXT,Value TEXT);";
private static String SQL_QUERY_VALUE = "SELECT Value FROM " + TABLE_NAME + " WHERE Key = (?);";
private static String SQL_INSERT = "INSERT INTO " + TABLE_NAME + " VALUES(?,?);";
private static String SQL_UPDATE = "UPDATE " + TABLE_NAME + " SET Value = ? WHERE Key = ?";
private static String SQL_DELETE = "DELETE FROM " + TABLE_NAME + " WHERE Key = ?";
}
}
這裏還使用了SQLite嵌入式數據庫進行增加和查詢操作,具體引用步驟如下:
下載對應平臺的SQLite組件,這裏因爲是UWP Platform,所以文件是sqlite-uap-3090200.vsix;
下載完成後雙擊安裝,之後重啓Visual Studio;
在項目中引用SQLite組件;
項目右鍵點擊“管理NuGet程序包”,在彈出的窗口中搜索“SQLitePCL”並安裝,此時項目中會多出SQLitePCL的引用。
此時SQLite的環境就配置完畢了。