SQLの窓

2013年10月10日


イラストを背景にして2ページの画面遷移を解りやすくした Windows Store テンプレート

OneDrive へ移動


MainPage

メイン画面の背景に大きなイラストを設定しました。ファイルは、『Assets フォルダ』に保存して参照しています



NextPage

次画面は、LinearGradientBrush でグラデーションにしました。



App.xaml.cs

ページの設定は、Microsoft のテンプレートを無視しました。本来の WPF と同じような形でフレーム内のコンテンツを複数ページで切り替える形にしています。
using System;
using System.Diagnostics;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Simple_Pages {

	// *************************************************
	// クラス
	// *************************************************
	sealed partial class App : Application {

		public static Frame rootFrame = null;
		public static MainPage mainPage;
		public static NextPage nextPage;

		// *************************************************
		// コンストラクタ
		// *************************************************
		public App() {
			this.InitializeComponent();
			this.Suspending += OnSuspending;
		}

		// *************************************************
		// アプリケーションがエンド ユーザーによって正常に起動された
		// *************************************************
		protected override void OnLaunched(LaunchActivatedEventArgs args) {

			// ***********************************************
			// Window => Current => Content
			// Content( Frame => Content(MainPage) )
			// ***********************************************
			// 初回は Windows 内に置く フレームを作成
			if (rootFrame == null) {
				rootFrame = new Frame();
				Window.Current.Content = rootFrame;
			}

			if (rootFrame.Content == null) {
				// メインページの初回ロード
				rootFrame.Content = new MainPage();
				// 次ページを最初に作成しておく
				nextPage = new NextPage();
			}

			// 現在のウィンドウをアクティブにします
			Window.Current.Activate();
		}

		// *************************************************
		// アプリケーションの実行が中断されたときに呼び出されます
		// *************************************************
		private void OnSuspending(object sender, SuspendingEventArgs e) {
			Debug.WriteLine("アプリケーションの実行が中断されました");

			var deferral = e.SuspendingOperation.GetDeferral();
			// アプリケーションの状態を保存してバックグラウンドの動作があれば停止します
			deferral.Complete();
		}
	}
}


MainPage.xaml

MainPage と NextPage を用意していますが、NextPage は、MainPage をコピーしてリネームしたものです。
<Page
	x:Class="Simple_Pages.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:Simple_Pages"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	Loaded="Page_Loaded">

	<!--画面定義-->
	<Grid>
		<Grid.Background>
			<ImageBrush
				ImageSource="Assets/1378650512243910.jpeg"
				Stretch="None" />
		</Grid.Background>
		<Button
			Content="次ページ"
			HorizontalAlignment="Left"
			Height="41"
			Margin="34,30,0,0"
			VerticalAlignment="Top"
			Width="136"
			Click="Button_Click_1" />
	</Grid>
	
</Page>


MainPage.xaml.cs

ページの切り替えは、Navigate メソッドを使わずに直接ページのインスタンスをセットしています。そうする為に、App クラスに参照用に static な変数を作成して、インスタンスを保存しています。
App.rootFrame.Content = App.nextPage;
※ よって、Page.OnNavigatedTo イベントは発生しません
using System;
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Simple_Pages {

	// *************************************************
	// クラス
	// *************************************************
	public sealed partial class MainPage : Page {

		// *************************************************
		// コンストラクタ
		// *************************************************
		public MainPage() {
			this.InitializeComponent();
			App.mainPage = this;
		}

		// *************************************************
		// ページが Frame にロードされた時に実行
		// ( アプリケーション中でページ遷移する毎 )
		// *************************************************
		private void Page_Loaded(object sender, RoutedEventArgs e) {
			Debug.WriteLine("Main Page_Loaded");
		}

		// *************************************************
		// フレームに NextPage をセット
		// *************************************************
		private void Button_Click_1(object sender, RoutedEventArgs e) {
			App.rootFrame.Content = App.nextPage;
		}


	}
}



【Win8 ストアアプリの最新記事】
posted by lightbox at 2013-10-10 21:05 | Win8 ストアアプリ | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり