如何在uwp上更改嵌套元素的样式

时间:2017-09-25 16:10:47

标签: c# uwp

我有一个应用程序加载来自互联网的文章,我想更改它上面的BlockQuote所以我创建了一个自定义样式,但BlockQuote样式永远不会改变!

更改它我必须从html代码中删除<P></p>!所以我需要使用嵌套样式,但DocumentStyle无法设置任何想法...

这是我的代码:

    <!-- my style for html -->
<Style TargetType="controls:HtmlBlock" x:Key="HtmlPersonalStyle">
    <Setter Property="Foreground" Value="{ThemeResource ApplicationHeaderForegroundThemeBrush}"/>
    <Setter Property="DocumentStyle">
        <Setter.Value>
            <controls:DocumentStyle>
                <controls:DocumentStyle.P>
                    <controls:ParagraphStyle Margin="0,24,0,24" />
                </controls:DocumentStyle.P>
                <controls:DocumentStyle.BlockQuote>
                    <controls:ParagraphStyle Foreground="{StaticResource NavigationPaneButton}" FontWeight="Bold"/>
                </controls:DocumentStyle.BlockQuote>
                <controls:DocumentStyle.Ul>
                    <controls:ContainerStyle Margin="0,24,0,24" />
                </controls:DocumentStyle.Ul>
                <controls:DocumentStyle.H1>
                    <controls:ParagraphStyle FontSizeRatio="2" />
                </controls:DocumentStyle.H1>
                <controls:DocumentStyle.H2>
                    <controls:ParagraphStyle />
                </controls:DocumentStyle.H2>
                <controls:DocumentStyle.Li>
                    <controls:ListStyle Bullet="*"/>
                </controls:DocumentStyle.Li>
                <controls:DocumentStyle.Span>
                    <controls:TextStyle Foreground="#FF104F83" FontStyle="Normal"/>
                </controls:DocumentStyle.Span>
                <controls:DocumentStyle.A>
                    <controls:TextStyle Foreground="{StaticResource NavigationPaneButton}" FontWeight="Bold"/>
                </controls:DocumentStyle.A>
                <controls:DocumentStyle.Cite>
                    <controls:TextStyle Foreground="{StaticResource NavigationPaneButton}" FontWeight="Bold"/>
                </controls:DocumentStyle.Cite>
                <controls:DocumentStyle.YouTube>
                    <controls:ImageStyle HorizontalAlignment="Center"/>
                </controls:DocumentStyle.YouTube>
                <controls:DocumentStyle.Figure>
                    <controls:ContainerStyle Margin="0,24,0,24"/>
                </controls:DocumentStyle.Figure>
                <controls:DocumentStyle.Time>
                    <controls:TextStyle FontSizeRatio="0.9" FontStyle="Italic" />
                </controls:DocumentStyle.Time>
            </controls:DocumentStyle>
        </Setter.Value>
    </Setter>
</Style>

希望有人帮助我

2 个答案:

答案 0 :(得分:1)

  

我有一个app加载来自互联网的文章,我想更改它上面的BlockQuote所以我创建了一个自定义样式但BlockQuote样式永远不会改变

您似乎正在使用Windows App Studio进行开发。通过测试,我可以通过设置<blockquote>来成功更改DocumentStyle.BlockQuote样式。即使嵌套在<blockquote>标记内的<p>,样式仍然可以正常运行。

这是我的测试HTML:

<header class="post-header">
    <time class="date">March 8, 2016 10:00 am</time>
    <h1 class="post-title">Building Hosted Web Apps with Windows App Studio</h1>
    <div><p><blockquote>test block quote </blockquote></p></div>
    <blockquote>test block quote 2</blockquote> 
</header>

更新后的风格:

<Style x:Key="sampleStyle" TargetType="was:HtmlBlock">
   <Setter Property="Foreground" Value="#666" />
   <Setter Property="DocumentStyle">
       <Setter.Value>
           <was:DocumentStyle>
               <was:DocumentStyle.P>
                   <was:ParagraphStyle Margin="0,24,0,24" />
               </was:DocumentStyle.P>
               <was:DocumentStyle.BlockQuote>
                   <was:ParagraphStyle Foreground="Red" FontWeight="Bold"/>
               </was:DocumentStyle.BlockQuote>
               ...
           </was:DocumentStyle>
       </Setter.Value>
   </Setter>

测试结果如下: enter image description here

我根据您可以参考的HTMLBlock official sample更新了样式。因此,请确保自定义样式正好设置为您身边的HTMLBlock。如果您仍有问题,请尝试根据官方样本提供最小的复制演示。

此外,建议使用当前WindowsTemplateStudio代替Windows App Studio。详情请参阅this article

答案 1 :(得分:1)

看起来您在应用中使用了AppStudio插件,因此要编辑嵌套元素,您必须从here安装AppStudio代码,之后您可以编辑元素在它写之前并且没有使用任何样式!