ハンズオン手順(UWP)

プロジェクト作成

Xamarin.Forms(PCL)で新規プロジェクトを作ります。

プロジェクト名は「NakayokunaruHandsOn」にするとサンプルとnamespaceが一致するのでスムーズです。プロジェクトを作成したら、そのままビルドして実行できることを確認しましょう。

今回のハンズオンではXamarin.Formsの要求バージョンがとても低いので、NuGetパッケージは更新しなくても問題ありません。

動作確認エントリーページの追加

PCLプロジェクトでの作業です。 Appクラスのコンストラクタを以下のように書き換えてください。 (ファイル名はプロジェクトテンプレートによって異なりますが「App.cs」または「NakayokunaruHandsOn.cs」となっているはずです。) これは動作確認時のエントリーページになります。コメントアウト箇所は進行状況によって適宜解除します。

public App()
{
    var rootPage = new ContentPage();

    var toRoundedBoxView = new Button
    {
        Text = "RoundedBoxView"
    };
    // toRoundedBoxView.Clicked += async (s, e) =>
    //     await rootPage.Navigation.PushAsync(new RoundedBoxViewPage());

    var toEventBasedWebView = new Button
    {
        Text = "EventBasedWebView"
    };
    // toEventBasedWebView.Clicked += async (s, e) =>
    //     await rootPage.Navigation.PushAsync(new EventBasedWebViewPage());

    var toMessageBasedWebView = new Button
    {
        Text = "MessageBasedWebView"
    };
    // toMessageBasedWebView.Clicked += async (s, e) =>
    //     await rootPage.Navigation.PushAsync(new MessageBasedWebViewPage());

    rootPage.Content = new StackLayout
    {
        VerticalOptions = LayoutOptions.Center,
        Children =
        {
            toRoundedBoxView,
            toEventBasedWebView,
            toMessageBasedWebView,
        },
    };

    MainPage = new NavigationPage(rootPage);
}

ここでいったんプロジェクトビルドしてを実行してみましょう。縦に３つのボタンが並んだページが表示されればオーケーです。

FormsコントロールのプロパティをNativeコントロールに反映させる

BoxViewもどきを作りつつXamarin.Formsコントロールのプロパティ値変更をネイティブコントロールに伝える方法を確認します。

PCL

PCLプロジェクトでの作業です。

新しく「RoundedBoxView.cs」を追加、以下の内容に書き換えます。コメントアウト箇所は後の工程の部分です。

using System;
using Xamarin.Forms;

namespace NakayokunaruHandsOn
{
	public class RoundedBoxView : View
	{
		#region CornerRadius BindableProperty
		public static readonly BindableProperty CornerRadiusProperty =
			BindableProperty.Create(nameof(CornerRadius), typeof(double), typeof(RoundedBoxView), 5.0);

		public double CornerRadius
		{
			get { return (double)GetValue(CornerRadiusProperty); }
			set { SetValue(CornerRadiusProperty, value); }
		}
		#endregion

		#region Color BindableProperty
		public static readonly BindableProperty ColorProperty =
			BindableProperty.Create(nameof(Color), typeof(Color), typeof(RoundedBoxView), Color.Accent);

		public Color Color
		{
			get { return (Color)GetValue(ColorProperty); }
			set { SetValue(ColorProperty, value); }
		}
		#endregion

		// public event EventHandler Clicked;

		// internal void SendClick()
		// {
		// 	Clicked?.Invoke(this, EventArgs.Empty);
		// }
	}
}

BindablePropertyの定義にはコードスニペットを使うと活用すると便利です。

【Xamarin.Forms】BindableProperty.Create() non-generic版のコードスニペット - ぴーさんログ

UWP

UWPプロジェクトでの作業です。

新しく「RoundedBoxViewRenderer.cs」を追加、以下の内容に書き換えます。コメントアウト箇所は後の工程の部分です。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

using Windows.UI.Xaml;
using Windows.UI.Xaml.Shapes;

[assembly: ExportRenderer(typeof(NakayokunaruHandsOn.RoundedBoxView), typeof(NakayokunaruHandsOn.UWP.RoundedBoxViewRenderer))]

namespace NakayokunaruHandsOn.UWP
{
	public class RoundedBoxViewRenderer : ViewRenderer<RoundedBoxView, Windows.UI.Xaml.Shapes.Rectangle>
	{
		protected override void OnElementChanged(ElementChangedEventArgs<RoundedBoxView> e)
		{
			base.OnElementChanged(e);

			if (e.NewElement != null)
			{
				if (Control == null)
				{
					var nativeControl = new Windows.UI.Xaml.Shapes.Rectangle();
					nativeControl.DataContext = Element;
					nativeControl.SetBinding(Shape.FillProperty,
						new Windows.UI.Xaml.Data.Binding
						{
							Converter = new ColorConverter(),
							Path = new PropertyPath(NakayokunaruHandsOn.RoundedBoxView.ColorProperty.PropertyName),
						});
					nativeControl.SetBinding(Windows.UI.Xaml.Shapes.Rectangle.RadiusXProperty,
						new Windows.UI.Xaml.Data.Binding
						{
							Path = new PropertyPath(NakayokunaruHandsOn.RoundedBoxView.CornerRadiusProperty.PropertyName),
						});
					nativeControl.SetBinding(Windows.UI.Xaml.Shapes.Rectangle.RadiusYProperty,
						new Windows.UI.Xaml.Data.Binding
						{
							Path = new PropertyPath(NakayokunaruHandsOn.RoundedBoxView.CornerRadiusProperty.PropertyName),
						});
					// nativeControl.Tapped += (sender, args) => Element.SendClick();
					SetNativeControl(nativeControl);
				}
			}
		}
	}
}

OnElementChangedでネイティブコントロールを生成します。プロパティの連動に関してはUWPではiOSやAndroidとは勝手が変わります。 Xamarin.FormsのコントロールをWUPコントロールのDataContextにして、Bindingをセットするだけでオーケーです。

ExportRendererAttributeでXamarin.FormsコントロールとRendererの対応を宣言します。

動作確認ページ(PCLプロジェクト)

PCLプロジェクトでの作業です。

新しくContentPage「RoundedBoxViewPage」を追加、以下の内容に書き換えます。

RoundedBoxViewPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NakayokunaruHandsOn"
             Title="RoundedBoxView"
             x:Class="NakayokunaruHandsOn.RoundedBoxViewPage">
	<StackLayout HorizontalOptions="Center"
				 VerticalOptions="Center">
		<local:RoundedBoxView x:Name="roundedBox"
							  HeightRequest="100"
							  WidthRequest="100"
							  CornerRadius="10"/>
		<Button Text="Next Color" Clicked="OnClicked" />
	</StackLayout>
</ContentPage>

RoundedBoxViewPage.xaml.cs

using System;
using Xamarin.Forms;

namespace NakayokunaruHandsOn
{
	public partial class RoundedBoxViewPage : ContentPage
	{
		public RoundedBoxViewPage()
		{
			InitializeComponent();
		}

		Random random = new Random ();

		private void OnClicked (object sender, EventArgs e)
		{
			roundedBox.Color = Color.FromRgb (
				random.Next (255),
				random.Next (255),
				random.Next (255));
		}
	}
}

Appクラスのコンストラクタ以下の部分のコメントアウトを解除します。

    toRoundedBoxView.Clicked += async (s, e) =>
        await rootPage.Navigation.PushAsync(new RoundedBoxViewPage());

動作確認

ここまで出来たらプロジェクトをビルドして実行してみましょう。エントリーページで「RoundedBoxView」を押して動作確認ページに移ります。角丸四角形と「Next Color」ボタンが表示され、「Next Color」ボタンを押すたびに角丸四角形の色が変化すればオーケーです。

FormsコントロールのイベントをRendererから発火する

ここまで作ってきたRoundedBoxViewにクリックイベントを追加します。

PCL

PCLプロジェクトでの作業です。

「RoundedBoxView.cs」を追加した際、コメントアウトしていた部分を解除します。

		public event EventHandler Clicked;

		internal void SendClick()
		{
			Clicked?.Invoke(this, EventArgs.Empty);
		}

Xamarin.Formsコントロールにイベントを生やしただけでは永久に発火しないので、Rendererにキックしてもらうためのinternalメソッドを用意しておきます。 EventArgsに何かしらの情報を持たせる場合はinternalメソッドのパラメータで受け取ればオーケーです。

さて、各プラットフォームのRendererはPCLとは別のassemblyなのでこのままではinternalメンバーにアクセスできません。そこでInternalsVisibleToAttributeを使って明示的に別assemblyからのアクセスを許可します。

AssemblyInfo.cs に以下のコードを追加してください。

[assembly: InternalsVisibleTo("NakayokunaruHandsOn.iOS")]
[assembly: InternalsVisibleTo("NakayokunaruHandsOn.Droid")]
[assembly: InternalsVisibleTo("NakayokunaruHandsOn.UWP")]

2016年７月現在、iOSプロジェクトファイルでassembly名の「.」が勝手に削除される問題が確認されています。発生するとビルドが失敗するようになるので、InternalsVisibleToで指定する名前を"NakayokunaruHandsOniOS"に変更するか、プロジェクトファイルの方を適宜修正するかしてください。

UWP

UWPプロジェクトでの作業です。

「RoundedBoxViewRenderer.cs」を追加した際、コメントアウトしていた部分を解除します。

		protected override void OnElementChanged(ElementChangedEventArgs<RoundedBoxView> e)
		{
            (略)
					nativeControl.Tapped += (sender, args) => Element.SendClick();
            (略)
		}

動作確認ページ(PCLプロジェクト)

PCLプロジェクトでの作業です。

「RoundedBoxViewPage.xaml」のRoundedBoxViewにClickedイベントハンドラを追加します。コードビハインドはButtonで使ったものを共用するので変更ありません。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NakayokunaruHandsOn"
             Title="RoundedBoxView"
             x:Class="NakayokunaruHandsOn.RoundedBoxViewPage">
	<StackLayout HorizontalOptions="Center"
				 VerticalOptions="Center">
		<local:RoundedBoxView x:Name="roundedBox"
							  HeightRequest="100"
							  WidthRequest="100"
							  CornerRadius="10"
                              Clicked="OnClicked"/>
		<Button Text="Next Color" Clicked="OnClicked" />
	</StackLayout>
</ContentPage>

動作確認

ここまで出来たらプロジェクトをビルドして実行してみましょう。エントリーページで「RoundedBoxView」を押して動作確認ページに移ります。今度は角丸四角形をタップしても角丸四角形の色が変化するようになっているはずです。

FormsコントロールからNativeコントロールのAPIを呼ぶ

WebViewのAPIの一部を自分で実装しつつ、Xamarin.FormsコントロールからNativeコントロールのAPIを呼ぶ方法を学びます。具体的には、・パラメータの無いAPIとしてナビゲーション機能の「戻る」、「進む」をXamarin.Formsをから呼び出します。・パラメータが必要なAPIとしてJavascriptのEval機能をXamarin.Formsをから呼び出します。

今回は2パターンの実装方法を紹介します。(時間的な問題で片方省くかも...)

・Xamarin.Formsコントロールにinternalイベントを用意してRendererに購読させるパターン・Xamarin.FormsコントロールからMessagingCenter経由でRendererにメッセージを送るパターン

どちらのアプローチでも同等のことができます。 (internalイベントは本家WebView、MessagingCenterは本家Mapで使われている実装です)

Xamarin.Formsコントロールにinternalイベントを用意してRendererに購読させるパターン

Xamarin.Formsコントロールにinternalイベントを定義
Rendererでinternalイベントを購読
Xamarin.Formsコントロールに定義したメソッドの内部でイベントをInvokeします。
RendererのイベントハンドラでネイティブコントロールのAPIを呼びます。

これでイベントを経由してXamarin.FormsコントロールからネイティブコントロールのAPIを呼ぶことができます。パラメータが必要な場合はカスタムEventArgsを定義します。

PCL

PCLプロジェクトでの作業です。

新しく「EventBasedWebView.cs」を追加、以下の内容に書き換えます。 RoundedBoxViewと同様にInternalVisibleToAttributeが必要です。

using System;
using Xamarin.Forms;

namespace NakayokunaruHandsOn
{
	public class EventBasedWebView : View
	{
		public void GoBack()
		{
			EventHandler handler = GoBackRequested;
			if (handler != null)
			{
				handler.Invoke(this, EventArgs.Empty);
			}
		}

		public void GoForward()
		{
			EventHandler handler = GoForwardRequested;
			if (handler != null)
			{
				handler.Invoke(this, EventArgs.Empty);
			}
		}

		public void Eval(string script)
		{
			EventHandler<EvalRequestedEventArgs> handler = EvalRequested;
			if (handler != null)
			{
				handler.Invoke(this, new EvalRequestedEventArgs(script));
			}
		}

		internal event EventHandler GoBackRequested;
		internal event EventHandler GoForwardRequested;
		internal event EventHandler<EvalRequestedEventArgs> EvalRequested;
	}

	public class EvalRequestedEventArgs
	{
		public string Script
		{
			get;
			private set;
		}

		public EvalRequestedEventArgs(string script)
		{
			Script = script;
		}
	}
}

UWP

UWPプロジェクトでの作業です。

新しく「EventBasedWebViewRenderer.cs」を追加、以下の内容に書き換えます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;
using Windows.UI.Core;
using Windows.UI.Xaml.Controls;

[assembly: ExportRenderer(typeof(NakayokunaruHandsOn.EventBasedWebView), typeof(NakayokunaruHandsOn.UWP.EventBasedWebViewRenderer))]

namespace NakayokunaruHandsOn.UWP
{
	public class EventBasedWebViewRenderer : ViewRenderer<EventBasedWebView, Windows.UI.Xaml.Controls.WebView>
	{
		protected override void OnElementChanged(ElementChangedEventArgs<EventBasedWebView> e)
		{
			if (e.NewElement != null)
			{
				if (Control == null)
				{
					var nativeControl = new Windows.UI.Xaml.Controls.WebView();
					nativeControl.Source = new Uri("http://ticktack.hatenablog.jp/entry/2016/06/11/124751");
					SetNativeControl(nativeControl);
				}
				e.NewElement.GoBackRequested += OnGoBackRequested;
				e.NewElement.GoForwardRequested += OnGoForwardRequested;
				e.NewElement.EvalRequested += OnEvalRequested;
			}

			if (e.OldElement != null)
			{
				e.OldElement.GoBackRequested -= OnGoBackRequested;
				e.OldElement.GoForwardRequested -= OnGoForwardRequested;
				e.OldElement.EvalRequested -= OnEvalRequested;
			}

			base.OnElementChanged(e);
		}

		private void OnGoBackRequested(object sender, EventArgs e)
		{
			if (Control.CanGoBack)
			{
				Control.GoBack();
			}
		}

		private void OnGoForwardRequested(object sender, EventArgs e)
		{
			if (Control.CanGoForward)
			{
				Control.GoForward();
			}
		}

		private async void OnEvalRequested(object sender, EvalRequestedEventArgs e)
		{
			await Control.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
				async () => await Control.InvokeScriptAsync("eval", new[] { e.Script }));
		}

		protected override void Dispose(bool disposing)
		{
			if (disposing)
			{
				Element.GoBackRequested -= OnGoBackRequested;
				Element.GoForwardRequested -= OnGoForwardRequested;
				Element.EvalRequested -= OnEvalRequested;
			}

			base.Dispose(disposing);
		}
	}
}

動作確認ページ(PCLプロジェクト)

PCLプロジェクトでの作業です。

新しくContentPage「EventBasedWebViewPage」を追加、以下の内容に書き換えます。

EventBasedWebViewPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NakayokunaruHandsOn"
             Title="EventBasedWebView"
             x:Class="NakayokunaruHandsOn.EventBasedWebViewPage">
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="*"/>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>
		<local:EventBasedWebView Grid.Row="0" x:Name="webView" />
		<StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
			<Button Text="戻る" Clicked="GoBackClicked"/>
			<Button Text="進む" Clicked="GoForwardClicked"/>
		</StackLayout>
		<StackLayout Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
			<Entry Text="location.reload()" x:Name="entry" HorizontalOptions="FillAndExpand"/>
			<Button Text="Eval" Clicked="EvalClicked"/>
		</StackLayout>
	</Grid>
</ContentPage>

EventBasedWebViewPage.xaml.cs

using Xamarin.Forms;

namespace NakayokunaruHandsOn
{
	public partial class EventBasedWebViewPage : ContentPage
	{
		public EventBasedWebViewPage()
		{
			InitializeComponent();
		}

		void GoBackClicked(object sender, System.EventArgs e)
		{
			webView.GoBack();
		}

		void GoForwardClicked(object sender, System.EventArgs e)
		{
			webView.GoForward();
		}

		void EvalClicked(object sender, System.EventArgs e)
		{
			webView.Eval(entry.Text);
		}
	}
}

Appクラスのコンストラクタで以下の部分のコメントアウトを解除します。

        toEventBasedWebView.Clicked += async (s, e) =>
            await rootPage.Navigation.PushAsync(new EventBasedWebViewPage());

動作確認

ここまで出来たらプロジェクトをビルドして実行してみましょう。エントリーページで「EventBasedWebView」を押して動作確認ページに移ります。適当にWebページ内のリンクを開いた後、「進む」「戻る」ボタンが機能することを確認してください。 Entryコントロールの初期値として、JavascriptのEval確認用にページをリロードするコードが入っています。「Eval」ボタンを押すとページが再読み込みすることを確認してください。

Xamarin.FormsコントロールからMessagingCenter経由でRendererにメッセージを送るパターン

こちらのパターンは素直な実装です。

Xamarin.FormsコントロールからMessagingCenterにメッセージを送信
Rendererでメッセージを受信、ネイティブコントロールのAPIを呼びます。

RendererでメッセージをSubscribeする際にsenderのインスタンスを与えることで、 Rendererと対応したXamarin.Formsコントロールからのメッセージだけを受け取るようにします。

PCL

PCLプロジェクトでの作業です。

新しく「MessageBasedWebView.cs」を追加、以下の内容に書き換えます。 RoundedBoxViewと同様にInternalVisibleToAttributeが必要です。

using Xamarin.Forms;

namespace NakayokunaruHandsOn
{
	public class MessageBasedWebView : View
	{
		internal static readonly string GoBackKey = "MessageBasedWebView.GoBack";
		internal static readonly string GoForwardKey = "MessageBasedWebView.GoForward";
		internal static readonly string EvalKey = "MessageBasedWebView.Eval";

		public void GoBack()
		{
			MessagingCenter.Send(this, GoBackKey);
		}

		public void GoForward()
		{
			MessagingCenter.Send(this, GoForwardKey);
		}

		public void Eval(string script)
		{
			MessagingCenter.Send(this, EvalKey, script);
		}
	}
}

UWP

UWPプロジェクトでの作業です。

新しく「MessageBasedWebViewRenderer.cs」を追加、以下の内容に書き換えます。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;
using Windows.UI.Core;
using Windows.UI.Xaml.Controls;

[assembly: ExportRenderer(typeof(NakayokunaruHandsOn.MessageBasedWebView), typeof(NakayokunaruHandsOn.UWP.MessageBasedWebViewRenderer))]

namespace NakayokunaruHandsOn.UWP
{
	public class MessageBasedWebViewRenderer : ViewRenderer<MessageBasedWebView, Windows.UI.Xaml.Controls.WebView>
	{
		protected override void OnElementChanged(ElementChangedEventArgs<MessageBasedWebView> e)
		{
			if (e.NewElement != null)
			{
				if (Control == null)
				{
					var nativeControl = new Windows.UI.Xaml.Controls.WebView();
					nativeControl.Source = new Uri("http://ticktack.hatenablog.jp/entry/2016/06/11/124751");
					SetNativeControl(nativeControl);
				}
				MessagingCenter.Subscribe<MessageBasedWebView>(
					this,
					MessageBasedWebView.GoBackKey,
					_ => OnGoBackRequested(),
					e.NewElement);
				MessagingCenter.Subscribe<MessageBasedWebView>(
					this,
					MessageBasedWebView.GoForwardKey,
					_ => OnGoForwardRequested(),
					e.NewElement);
				MessagingCenter.Subscribe<MessageBasedWebView, string>(
					this,
					MessageBasedWebView.EvalKey,
					(sender, args) => OnEvalRequested(args),
					e.NewElement);
			}

			if (e.OldElement != null)
			{
				MessagingCenter.Unsubscribe<MessageBasedWebView>(this, MessageBasedWebView.GoBackKey);
				MessagingCenter.Unsubscribe<MessageBasedWebView>(this, MessageBasedWebView.GoForwardKey);
				MessagingCenter.Unsubscribe<MessageBasedWebView, string>(this, MessageBasedWebView.EvalKey);
			}

			base.OnElementChanged(e);
		}

		private void OnGoBackRequested()
		{
			if (Control.CanGoBack)
			{
				Control.GoBack();
			}
		}

		private void OnGoForwardRequested()
		{
			if (Control.CanGoForward)
			{
				Control.GoForward();
			}
		}

		private async void OnEvalRequested(string script)
		{
			await Control.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
				async () => await Control.InvokeScriptAsync("eval", new[] { script }));
		}

		protected override void Dispose(bool disposing)
		{
			if (disposing)
			{
				MessagingCenter.Unsubscribe<MessageBasedWebView>(this, MessageBasedWebView.GoBackKey);
				MessagingCenter.Unsubscribe<MessageBasedWebView>(this, MessageBasedWebView.GoForwardKey);
				MessagingCenter.Unsubscribe<MessageBasedWebView, string>(this, MessageBasedWebView.EvalKey);
			}

			base.Dispose(disposing);
		}
	}
}

動作確認ページ(PCLプロジェクト)

PCLプロジェクトでの作業です。

新しくContentPage「MessageBasedWebViewPage」を追加、以下の内容に書き換えます。

MessageBasedWebViewPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:NakayokunaruHandsOn"
             Title="MessageBasedWebView"
             x:Class="NakayokunaruHandsOn.MessageBasedWebViewPage">
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>
		<local:MessageBasedWebView Grid.Row="0" x:Name="webView" />
		<StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
			<Button Text="戻る" Clicked="GoBackClicked"/>
			<Button Text="進む" Clicked="GoForwardClicked"/>
    </StackLayout>
    <StackLayout Grid.Row="2" Orientation="Horizontal">
      <Entry Text="location.reload()" x:Name="entry" HorizontalOptions="FillAndExpand"/>
      <Button Text="Eval" Clicked="EvalClicked"/>
    </StackLayout>
	</Grid>
</ContentPage>

MessageBasedWebViewPage.xaml.cs

using Xamarin.Forms;

namespace NakayokunaruHandsOn
{
	public partial class MessageBasedWebViewPage : ContentPage
	{
		public MessageBasedWebViewPage()
		{
			InitializeComponent();
		}

		void GoBackClicked(object sender, System.EventArgs e)
		{
			webView.GoBack();
		}

		void GoForwardClicked(object sender, System.EventArgs e)
		{
			webView.GoForward();
		}

		void EvalClicked(object sender, System.EventArgs e)
		{
			webView.Eval(entry.Text);
		}
	}
}

Appクラスのコンストラクタで以下の部分のコメントアウトを解除します。

        toMessageBasedWebView.Clicked += async (s, e) =>
            await rootPage.Navigation.PushAsync(new MessageBasedWebViewPage());

動作確認

ここまで出来たらプロジェクトをビルドして実行してみましょう。エントリーページで「MessageBasedWebView」を押して動作確認ページに移ります。適当にWebページ内のリンクを開いた後、「進む」「戻る」ボタンが機能することを確認してください。 Entryコントロールの初期値として、JavascriptのEval確認用にページをリロードするコードが入っています。「Eval」ボタンを押すとページが再読み込みすることを確認してください。

UwpHandsOn - P3PPP/NakayokunaruHandsOn GitHub Wiki

ハンズオン手順(UWP)

プロジェクト作成

動作確認エントリーページの追加

FormsコントロールのプロパティをNativeコントロールに反映させる

PCL

UWP

動作確認ページ(PCLプロジェクト)

動作確認

FormsコントロールのイベントをRendererから発火する

PCL

UWP

動作確認ページ(PCLプロジェクト)

動作確認

FormsコントロールからNativeコントロールのAPIを呼ぶ

Xamarin.Formsコントロールにinternalイベントを用意してRendererに購読させるパターン

PCL

UWP

動作確認ページ(PCLプロジェクト)

動作確認

Xamarin.FormsコントロールからMessagingCenter経由でRendererにメッセージを送るパターン

PCL

UWP

動作確認ページ(PCLプロジェクト)

動作確認

⚠️ GitHub.com Fallback ⚠️

UwpHandsOn - P3PPP/NakayokunaruHandsOn GitHub Wiki

ハンズオン手順(UWP)

プロジェクト作成

動作確認エントリーページの追加

FormsコントロールのプロパティをNativeコントロールに反映させる

PCL

UWP

動作確認ページ(PCLプロジェクト)

動作確認

FormsコントロールのイベントをRendererから発火する

PCL

UWP

動作確認ページ(PCLプロジェクト)

動作確認

FormsコントロールからNativeコントロールのAPIを呼ぶ

Xamarin.Formsコントロールにinternalイベントを用意してRendererに購読させるパターン

PCL

UWP

動作確認ページ(PCLプロジェクト)

動作確認

Xamarin.FormsコントロールからMessagingCenter経由でRendererにメッセージを送るパターン

PCL

UWP

動作確認ページ(PCLプロジェクト)

動作確認

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️