I am just getting started with WP8 development and I have already stumbled into my first problem: I have followed the How to create your first app for Windows Phone tutorial and now I have followed another tutorial to try and overwrite the CSS of the browser. When I run the app, the CSS is not changed and I just see the original web page.
The CSS file is called mobile.css and is found in the Resources folder. Its contents are simply
body {
background-color: blue;
}
and these are its properties:
The (very simple) app code so far is this:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using MiniBrowser.Resources;
using System.IO;
using System.Windows.Resources;
namespace MiniBrowser
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}
private void Go_Click(object sender, RoutedEventArgs e)
{
string site = URL.Text;
MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
}
private void BrowserLoadCompleted(object sender, NavigationEventArgs e)
{
ApplyStyleSheet("mobile.css");
VisualStateManager.GoToState(this, "Loaded", true);
}
private void ApplyStyleSheet(string cssFilename)
{
//var sr = Application.GetResourceStream(new Uri(cssFilename, UriKind.Relative));
StreamResourceInfo sr = Application.GetResourceStream(new Uri("/MiniBrowser;component/Resources/mobile.css", UriKind.Relative));
using (var strm = sr.Stream)
using (var reader = new StreamReader(strm))
{
string css = reader.ReadToEnd().Replace("\r", "").Replace("\n", "");
var scriptToRun =
"(function() {" +
" var pa= document.getElementsByTagName('head')[0] ; " +
" var el= document.createElement('style'); " +
" el.type= 'text/css'; " +
" el.media= 'screen'; " +
" el.styleSheet.cssText= '" + css + "'; " +
" pa.appendChild(el); " +
"})();";
MiniBrowser.InvokeScript("eval", scriptToRun);
}
}
}
}
Everything else works: the browser is displayed and correctly loads pages. The only thing is that the mobile.css file seems to be ignored.
