7

我正在使用 WPF 3.5 SP1，我想实现这样的目标（玻璃部分已经完成）：


（来源：ggpht.com）

（来源）


（来源）

您可以在文本周围看到很好的模糊效果，这使得它的可读性非常好。我还发现正确的方法是使用 API DrawThemeTextEx，它使用推荐的系统选项呈现模糊。但是，如何使用 WPF 实现相同的效果？

我能够找到这些包含有用资源的链接：
如何使 Aero 玻璃背景上的 WPF 文本可读？
玻璃表面上的发光标签控件

他们通过复制 TextBlock 并在其上设置模糊效果来做到这一点。然而，这不是一个真正的解决方案。这是它的样子：

将结果效果与上图对比，您会发现距离解决方案还很遥远。那么如何使用 WPF 正确获得所需的效果呢？我对仿真很好（不使用DrawThemeTextExAPI），只要结果非常相似。

谢谢你。

4

4 回答 4

7 
    <TextBlock ...>
        <TextBlock.Effect>
            <DropShadowEffect BlurRadius="10" Color="White" ShadowDepth="0" />
        </TextBlock.Effect>
    </TextBlock>
于 2011-02-11T18:52:52.053 回答
7

根据Luke的要求，我包括了XAMLfor Decorators：

<Decorator>
    <Decorator.Effect>
        <DropShadowEffect BlurRadius="7" Color="White" ShadowDepth="0" />
    </Decorator.Effect>
    <Decorator>
        <Decorator.Effect>
            <DropShadowEffect BlurRadius="7" Color="White" ShadowDepth="0" />
        </Decorator.Effect>
        <Decorator>
            <Decorator.Effect>
                <DropShadowEffect BlurRadius="7" Color="White" ShadowDepth="0" />
            </Decorator.Effect>

            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
                    Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
        </Decorator>
    </Decorator>
</Decorator>

我使用前面提到的 XAML创建了一个ControlTemplatefor a ，并在需要文本发光的任何地方使用它。Label

于 2011-05-26T23:23:41.447 回答
2

沿着这些线的东西怎么样，你的文本后面有一个稍微模糊的矩形，我已经用过几次了。我发现它使它更具可读性，因为模糊覆盖了更大的区域。

            <Grid>
                <Rectangle Fill="#8FFFFFFF"
                           Stroke="{x:Null}"
                           StrokeThickness="0"
                           VerticalAlignment="Center"
                           Width="{Binding ActualWidth, ElementName=PART_Title, Mode=Default}"
                           Height="{Binding ActualHeight, ElementName=PART_Title, Mode=Default}"
                           RadiusX="2"
                           RadiusY="2">
                    <Rectangle.Effect>
                        <BlurEffect Radius="10" />
                    </Rectangle.Effect>
                </Rectangle>

                <TextBlock x:Name="PART_Title"
                           Text="{Binding Title}"
                           Foreground="Black"
                           TextWrapping="NoWrap"
                           TextTrimming="CharacterEllipsis" />
            </Grid>
于 2011-02-11T18:33:54.310 回答
1

我在实现装饰器时遇到了麻烦，因为它在 Paya 的回答中，所以我展示了如何将它包装在一个完整的、现成的样式资源中，该资源可以应用于任何标签，它将显示玻璃效果，并将禁用时也会使标签变暗并保留对齐、边框等：

<Style x:Key="GlassLabelStyle" TargetType="{x:Type Label}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Label}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                Background="{TemplateBinding Background}" 
                Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                    <Grid>
                        <Decorator>
                            <Decorator.Effect>
                                <DropShadowEffect BlurRadius="7" Color="White" ShadowDepth="0" />
                            </Decorator.Effect>
                            <Decorator>
                                <Decorator.Effect>
                                    <DropShadowEffect BlurRadius="7" Color="White" ShadowDepth="0" />
                                </Decorator.Effect>
                                <Decorator>
                                    <Decorator.Effect>
                                        <DropShadowEffect BlurRadius="7" Color="White" ShadowDepth="0" />
                                    </Decorator.Effect>
                                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" 
                    Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" 
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    </ContentPresenter>
                                </Decorator>
                            </Decorator>
                        </Decorator>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        <Setter Property="Opacity" Value="0.5"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如果样式在您的窗口或应用程序资源中，那么您可以像这样应用它：

<Label Style="{StaticResource GlassLabelStyle}"

当我这样做时，我也遇到了 TextBox 的问题，当控件被禁用时，您根本无法更改背景颜色（它只是一直恢复为白色），因此有人发现您必须覆盖整个模板！请参阅（https://stackoverflow.com/a/3752517/88409）。所以这里有一个现成的样式，它会在禁用时使文本框半透明（在玻璃上看起来很棒），并在启用时使其背景成为半透明的白色，边框更明显：

<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#01000000" />
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#40000000" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#88ffffff" />

<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
    <Setter Property="Background" Value="#88ffffff"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Border Name="Bd" BorderThickness="{TemplateBinding BorderThickness}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    Background="{TemplateBinding Background}" 
                                    SnapsToDevicePixels="true">
                    <ScrollViewer Name="PART_ContentHost" Background="{TemplateBinding Background}" 
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Value="{StaticResource DisabledBackgroundBrush}" Property="Background" />
                        <Setter Value="{StaticResource DisabledBorderBrush}" Property="BorderBrush"/>
                        <Setter Value="{StaticResource DisabledForegroundBrush}" Property="Foreground" />
                        <Setter TargetName="PART_ContentHost" Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/>
                        <Setter TargetName="PART_ContentHost" Property="BorderBrush" Value="{StaticResource DisabledBackgroundBrush}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
于 2014-02-13T23:09:40.567 回答