【问题标题】:CSS overwrite not working in WP8CSS覆盖在WP8中不起作用
【发布时间】:2013-11-03 19:35:53
【问题描述】:

我刚刚开始使用 WP8 开发,我已经偶然发现了我的第一个问题:我遵循了 How to create your first app for Windows Phone 教程,现在我遵循了 another tutorial 来尝试覆盖浏览器的 CSS。当我运行应用程序时,CSS 没有改变,我只看到原始网页。

CSS 文件名为 mobile.css,位于 Resources 文件夹中。它的内容很简单

body {

background-color: blue;

}

这些是它的属性:

到目前为止(非常简单的)应用程序代码是这样的:

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);
        }
    }
}
}

其他一切正常:浏览器显示并正确加载页面。唯一的问题是mobile.css 文件似乎被忽略了。

【问题讨论】:

    标签: c# windows-phone-8 windows-phone-8-sdk


    【解决方案1】:

    将css文件添加为资源:

    使用以下代码获取内容:

    StreamResourceInfo sr = Application.GetResourceStream(new Uri("/YourAppName;component/Resources/Custom.css", UriKind.Relative));
    

    【讨论】:

    • 您好,感谢您的回答!不幸的是,这似乎也不起作用:(您还有其他想法吗?(PS:我已将var sr = Application.GetResourceStream(new Uri(cssFilename, UriKind.Relative)); 行替换为您的代码行,并且我已将.css 文件设置为资源)
    • @user1301428 - 这是一个可行的解决方案。阅读css后,确保内容在那里。在string css = reader.ReadToEnd().Replace("\r", "").Replace("\n", ""); 行上放一个断点并查看。问题可能是没有正确应用 css,但文件及其内容正在被正确读取。
    • 我在那里插入了一个断点,我看不到 css 的任何字符串,所以这可能是问题所在。我也尝试在scriptToRun 中手动插入一些代码,但这也不起作用。在我看来,如此简单的事情竟然如此耗时,这很奇怪,但如果这不起作用,你对如何做到这一点还有其他想法吗?
    • 进行干净的构建。确保您的 css 设置为 Resource。确保它位于如上所示的确切路径中。
    • 我已经用最新的代码和css属性的截图更新了这个问题。这就是项目中的全部内容,因此您甚至可以尝试将其复制并粘贴到一个新的应用项目中,看看它是否适合您...
    猜你喜欢
    • 2019-08-17
    • 2020-10-31
    • 2020-09-07
    • 2021-04-19
    • 1970-01-01
    • 2018-01-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多