microwavePC/Background_Transmission.html

## Background_Transmission.html
<html>
    <head>
        <meta charset="UTF-8">
        <title>Transmission Background</title>
        <link rel="stylesheet" href="Background_Transmission.css">
        <script src="jquery-2.1.4.min.js"></script>
        <script src="Background_Transmission.js"></script>
    </head>
    <body>
        （省略）
    </body>
</html>

## CustomWebView.xaml
<?xml version="1.0" encoding="UTF-8"?>
<WebView xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="WebViewBackgroundSample.CustomWebView">
    <WebView.Margin>
        <!-- iOSだけ、上に20pxのMarginを設定する -->
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="0,20,0,0"
                    Android="0,0,0,0"
                    WinPhone="0,0,0,0" />
    </WebView.Margin>
</WebView>

## CustomWebView.xaml.cs
using Xamarin.Forms;
namespace WebViewBackgroundSample
{
// WebViewを継承しているだけ
    public partial class CustomWebView : WebView
    {
        public CustomWebView()
        {
            InitializeComponent();
        }
    }
}

## CustomWebViewRenderer.cs（Android側）
using WebViewBackgroundSample;
using WebViewBackgroundSample.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace WebViewBackgroundSample.Droid
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);

            // 背景を透過
            this.Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
        }
    }
}

## CustomWebViewRenderer.cs（iOS側）
using UIKit;
using WebViewBackgroundSample;
using WebViewBackgroundSample.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace WebViewBackgroundSample.iOS
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            // 背景を透過
            this.Opaque = false;
            this.BackgroundColor = UIColor.Clear;
        }
    }
}

## MainPage.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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:controls="clr-namespace:WebViewBackgroundSample;assembly=WebViewBackgroundSample"　←追加部分
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="WebViewBackgroundSample.Views.MainPage"
             Title="MainPage">
（以下省略）

## MainPage.xaml（修正前）
<?xml version="1.0" encoding="utf-8"?>
<ContentPage （プロパティ省略）>
    <StackLayout （プロパティ省略）>
        （元々配置していた諸々のコントロール）
    </StackLayout>
</ContentPage>

## MainPage.xaml（修正後）
<?xml version="1.0" encoding="utf-8"?>
<ContentPage （プロパティ省略）>
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Grid>
            <controls:CustomWebView HorizontalOptions="FillAndExpand"
                                    VerticalOptions="FillAndExpand"
                                    WidthRequest="5000"
                                    HeightRequest="5000"
                                    Source="{Binding Url}">
            </controls:CustomWebView>
            <StackLayout （プロパティ省略）>
                （元々配置していた諸々のコントロール）
            </StackLayout>
        </Grid>
    </StackLayout>
</ContentPage>

## MainPageViewModel.csのコンストラクタ内から抜粋
            _localHtmlFileRootPath = _resourceUtility.GetHtmlFileRootPath();

            // マトリックス風の背景に変更するボタンに紐付いているコマンド
            ChangeBackgroundMatrixCommand = new DelegateCommand(() => {
                Url = _localHtmlFileRootPath + "Background_Matrix.html";
            });

            // 何かを発信している風の背景に変更するボタンに紐付いているコマンド
            ChangeBackgroundTransmissionCommand = new DelegateCommand(() =>
            {
                Url = _localHtmlFileRootPath + "Background_Transmission.html";
            });

            //　何もない背景に変更するボタンに紐付いているコマンド
            ChangeBackgroundBlankCommand = new DelegateCommand(() =>
            {
                Url = _localHtmlFileRootPath + "Background_Blank.html";
            });

## ResourceUtility.cs内
        public string GetHtmlFileRootPath()
        {
            return NSBundle.MainBundle.BundleUrl.ToString();
        }
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Transmission Background</title>
	<link rel="stylesheet" href="Background_Transmission.css">
	<script src="jquery-2.1.4.min.js"></script>
	<script src="Background_Transmission.js"></script>
	</head>
	<body>
	（省略）
	</body>
	</html>
	<?xml version="1.0" encoding="UTF-8"?>
	<WebView xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="WebViewBackgroundSample.CustomWebView">
	<WebView.Margin>
	<!-- iOSだけ、上に20pxのMarginを設定する -->
	<OnPlatform x:TypeArguments="Thickness"
	iOS="0,20,0,0"
	Android="0,0,0,0"
	WinPhone="0,0,0,0" />
	</WebView.Margin>
	</WebView>
	using Xamarin.Forms;
	namespace WebViewBackgroundSample
	{
	// WebViewを継承しているだけ
	public partial class CustomWebView : WebView
	{
	public CustomWebView()
	{
	InitializeComponent();
	}
	}
	}
	using WebViewBackgroundSample;
	using WebViewBackgroundSample.Droid;
	using Xamarin.Forms;
	using Xamarin.Forms.Platform.Android;

	[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
	namespace WebViewBackgroundSample.Droid
	{
	public class CustomWebViewRenderer : WebViewRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
	{
	base.OnElementChanged(e);

	// 背景を透過
	this.Control.SetBackgroundColor(Android.Graphics.Color.Transparent);
	}
	}
	}
	using UIKit;
	using WebViewBackgroundSample;
	using WebViewBackgroundSample.iOS;
	using Xamarin.Forms;
	using Xamarin.Forms.Platform.iOS;

	[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
	namespace WebViewBackgroundSample.iOS
	{
	public class CustomWebViewRenderer : WebViewRenderer
	{
	protected override void OnElementChanged(VisualElementChangedEventArgs e)
	{
	base.OnElementChanged(e);

	// 背景を透過
	this.Opaque = false;
	this.BackgroundColor = UIColor.Clear;
	}
	}
	}
	<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
	xmlns:controls="clr-namespace:WebViewBackgroundSample;assembly=WebViewBackgroundSample"　←追加部分
	prism:ViewModelLocator.AutowireViewModel="True"
	x:Class="WebViewBackgroundSample.Views.MainPage"
	Title="MainPage">
	（以下省略）
	<?xml version="1.0" encoding="utf-8"?>
	<ContentPage （プロパティ省略）>
	<StackLayout （プロパティ省略）>
	（元々配置していた諸々のコントロール）
	</StackLayout>
	</ContentPage>
	<?xml version="1.0" encoding="utf-8"?>
	<ContentPage （プロパティ省略）>
	<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
	<Grid>
	<controls:CustomWebView HorizontalOptions="FillAndExpand"
	VerticalOptions="FillAndExpand"
	WidthRequest="5000"
	HeightRequest="5000"
	Source="{Binding Url}">
	</controls:CustomWebView>
	<StackLayout （プロパティ省略）>
	（元々配置していた諸々のコントロール）
	</StackLayout>
	</Grid>
	</StackLayout>
	</ContentPage>
	_localHtmlFileRootPath = _resourceUtility.GetHtmlFileRootPath();

	// マトリックス風の背景に変更するボタンに紐付いているコマンド
	ChangeBackgroundMatrixCommand = new DelegateCommand(() => {
	Url = _localHtmlFileRootPath + "Background_Matrix.html";
	});

	// 何かを発信している風の背景に変更するボタンに紐付いているコマンド
	ChangeBackgroundTransmissionCommand = new DelegateCommand(() =>
	{
	Url = _localHtmlFileRootPath + "Background_Transmission.html";
	});

	//　何もない背景に変更するボタンに紐付いているコマンド
	ChangeBackgroundBlankCommand = new DelegateCommand(() =>
	{
	Url = _localHtmlFileRootPath + "Background_Blank.html";
	});
	public string GetHtmlFileRootPath()
	{
	return NSBundle.MainBundle.BundleUrl.ToString();
	}