atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing.　なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

プロジェクトに追加したhtmlファイルの描画

WindowsPhone7

WebBrowserコントロールをつかいURLを設定すれば、Webページが見れます。
しかし、プロジェクトに追加したhtmlを描画したかったので試したところ、色々問題がありました。
できたことにはできたんだけど。。。。

プロジェクト内に追加したhtml

<html>
<head>
<title>hoge</title>
</head>
<body style="background-color:Blue;">
<h1>hogeee</h1>
<a>にゃああああああああああああ</a>
<h2 id="test">bb</h2>

<script type="text/javascript">
    document.getElementById("test").innerText = "piyo";
</script>

<img src="ApplicationIcon.png" />

</body>
</html>

MainPage.xaml　（いろいろ書いてるけど、ブラウザだけです。）

<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
	x:Class="WindowsPhoneApplication5.MainPage"
	d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="False">




	<!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
	<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource SampleDataSource}}" d:DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <phone:WebBrowser IsScriptEnabled="True" d:LayoutOverrides="Width" x:Name="webBrowser1" Loaded="WebBrowser_Loaded" Height="348" VerticalAlignment="Bottom"/>
		<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
		
	</Grid>
</phone:PhoneApplicationPage>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Navigation;
using System.IO;
using System.Reflection;
using Microsoft.Xna.Framework;

namespace WindowsPhoneApplication5
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        // ViewModel アイテムのデータを読み込みます
        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            if (!App.ViewModel.IsDataLoaded)
            {
                App.ViewModel.LoadData();
            }
        }

        private void WebBrowser_Loaded(object sender, RoutedEventArgs e)
        {
            StreamReader reader = new StreamReader(TitleContainer.OpenStream("hoge.html"));
            webBrowser1.NavigateToString(reader.ReadToEnd());
        }
    }
}

普通にwebBrowser1のSourceに設定してもだめだったので、XNAつかってStreamから文字列引っ張ってきて流し込みました。

実行結果
エミュ

実機

エミュだとCSSだけ適用されてなにも出ません。
実機だとアルファベットは表示されます。日本語は出ません。
これはXNAが2バイト系のフォントを持っていないからで、フォントを追加してやると表示できるかも知れませんが、コンパイルにかなーーーーーーーーりの時間がかかると思います。
また、WebBrowserのJS実行を許可してやると、ちゃんとJSが実行されています。
一方で、このhtmlからプロジェクト内にある画像は参照することができませんでした。

なんかもっとスマートな方法があれば教えて下さい。