Windows8(C#) ２ページテンプレート

MainPage : xaml / cs

画面定義のメインは、WebView となっています。その下にある Rectangle は、WebView の状態をキャプチャして、クリックしてもなにも起こらないように見せる為のものです。

この画面構成は、以下のページで説明されていたたものを利用しています。

デベロッパーセンター(Windows ストアアプリ)

クイックスタート: アプリバーの追加

<Page
    x:Class="App74.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App74"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.BottomAppBar>
        <AppBar 
            IsSticky="True"
            x:Name="bottomAppBar"
            Padding="10,0,10,0"
            Opened="AppBar_Opened" Closed="AppBar_Closed">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button Style="{StaticResource EditAppBarButtonStyle}" />
                    <Button Style="{StaticResource RemoveAppBarButtonStyle}" />
                    <Button Style="{StaticResource AddAppBarButtonStyle}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Refresh_Click" />
                    <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click_1" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Border BorderBrush="Gray" BorderThickness="2" Margin="100,20,100,20">
            <Grid>
                <WebView x:Name="contentView" />
                <Rectangle x:Name="contentViewRect"/>
            </Grid>
        </Border>
    </Grid>
</Page>

AppBar_Opened での処理が目的の処理です。AppBar を開くと WebView がその上にかぶさってしまうので、Rectangle にその時の状態を書き込んで AppBar の操作の邪魔をしないようにしています。また、その際 AppBar 以外の場所をクリックしてもなにも起きないように、IsSticky="True" となっています。

ユーザーがアプリの操作をしているときにアプリ バーを表示させたままにするには、Extensible Application Markup Language (XAML) で、IsSticky プロパティを true に設定します。

Button_Click_1 で BasicPage1 へ移動していますが、this.Frame.Navigate(typeof(BasicPage1)) で処理されています。

Navigate は、Frame コントロールのメソッドですが、Frame は Page コントロールのプロパティです。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
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;

namespace App74
{
	/// <summary>
	/// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
	/// </summary>
	public sealed partial class MainPage : Page
	{
		public MainPage()
		{
			this.InitializeComponent();
		}

		/// <summary>
		/// このページがフレームに表示されるときに呼び出されます。
		/// </summary>
		/// <param name="e">このページにどのように到達したかを説明するイベント データ。Parameter 
		/// プロパティは、通常、ページを構成するために使用します。</param>
		protected override void OnNavigatedTo(NavigationEventArgs e)
		{
		}

		private void Button_Click_1(object sender, RoutedEventArgs e)
		{
			this.Frame.Navigate(typeof(BasicPage1));
		}
		private void AppBar_Opened(object sender, object e)
		{
			WebViewBrush wvb = new WebViewBrush();
			wvb.SourceName = "contentView";
			wvb.Redraw();
			contentViewRect.Fill = wvb;
			contentView.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
		}

		private void AppBar_Closed(object sender, object e)
		{
			contentView.Visibility = Windows.UI.Xaml.Visibility.Visible;
			contentViewRect.Fill = new SolidColorBrush(Windows.UI.Colors.Transparent);
		}

		private void Refresh_Click(object sender, RoutedEventArgs e)
		{
			contentView.Navigate(new Uri("http://www.contoso.com"));
			bottomAppBar.IsOpen = false;
		}
	}
}

BasicPage1 : xaml / cs

テンプレートなので、VisualStateManager.VisualStateGroups は処理とは直接関係ありません

※ 画面には、『戻るボタン』とタイトルが表示されているだけです。