Сделайте Label / TextBlock читабельным на стекле, используя эффект размытия - PullRequest
Новая
       20

Сделайте Label / TextBlock читабельным на стекле, используя эффект размытия

7 голосов
/ 11 февраля 2011

Я использую WPF 3.5 SP1 и хочу добиться чего-то подобного (стеклянная часть уже сделана):

http://lh3.ggpht.com/_0B12UOQNmgU/SwPqI4FcYaI/AAAAAAAAASM/HKFPyZ9uX3o/Aero%20Glass.jpg
( Источник )

image
( Источник )

Вы можете видеть хорошее размытие вокруг текста, что делает его очень хорошо читаемым. Я также выяснил, что правильным подходом является использование API DrawThemeTextEx, который отображает размытие, используя рекомендуемые системные параметры. Тем не менее, как я могу добиться того же эффекта с помощью WPF?

Мне удалось найти эти ссылки, которые содержат полезные ресурсы:
Как сделать текст WPF на фоне стекла Aero читабельным?
Светящиеся элементы управления на стеклянной поверхности

Они делают это путем дублирования TextBlock и установки на него эффекта Blur. Однако это не реальное решение. Вот как это выглядит:

http://i53.tinypic.com/2ly67nq.png

Сравните полученный эффект с изображениями выше, и вы увидите, что решение еще далеко. Так как же правильно получить желаемый эффект с помощью WPF? Я в порядке с эмуляцией (без использования DrawThemeTextEx API), насколько результат довольно похож.

Спасибо.

Ответы [ 4 ]

7 голосов
/ 11 февраля 2011 
    <TextBlock ...>
        <TextBlock.Effect>
            <DropShadowEffect BlurRadius="10" Color="White" ShadowDepth="0" />
        </TextBlock.Effect>
    </TextBlock>
7 голосов
/ 27 мая 2011

Согласно запросу Люка , я включаю XAML для Decorator s: 

<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>

Я создал ControlTemplate для Label сранее упоминал XAML, и использовал его везде, мне нужно, чтобы текст светился.

2 голосов
/ 11 февраля 2011

Как насчет чего-то такого, где у вас есть прямоугольник за текстом, который слегка размыт, я использовал это несколько раз.Я считаю, что это делает его более читабельным, потому что размытие охватывает большую область. 

            <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>
1 голос
/ 14 февраля 2014

У меня были проблемы с реализацией декоратора в том виде, в котором он стоял в ответе Пайи, поэтому я покажу, как его можно обернуть в готовый готовый ресурс в стиле, который можно применить к любой метке, которая будет отображать эффект стекла , а также затемнит метку при отключении и сохранит выравнивание, границы и т. д.: 

<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>
...