WPF Textblock в 2 слоя

Question

Я наложил один Textblock поверх другого для создания нужной мне анимации, но заметил что края нижнего чуть видно из под верхнего:

Вот так выглядит нижний слой:

Это выделение абсолютно все портит, можно ли от него как-нибудь избавиться?

Код:

    <TextBlock FontSize="120"
               Width="255"
               Height="95"
               x:Name="Serv1"
               FontFamily="Fonts/#TT Commons Bold"
               Margin="80,217,0,0"
               HorizontalAlignment="Left"
               VerticalAlignment="Top">
        <TextBlock.Foreground>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                <GradientStop Color="#FF7C127B" Offset="0"/>
                <GradientStop Color="#FF482A7B" Offset="1"/>
            </LinearGradientBrush>
        </TextBlock.Foreground>
        So
    </TextBlock>
    <TextBlock Width="{Binding ElementName=Serv1, Path=Width}"
               Height="{Binding ElementName=Serv1, Path=Height}"
               FontSize="{Binding ElementName=Serv1, Path=FontSize}" 
               FontFamily="{Binding ElementName=Serv1, Path=FontFamily}"
               Text="{Binding ElementName=Serv1, Path=Text}"
               Margin="{Binding ElementName=Serv1, Path=Margin}" 
               HorizontalAlignment="Left"
               VerticalAlignment="Top">
        <TextBlock.Foreground>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop x:Name="WhiteOffset" Color="#211e23"/>
                <GradientStop x:Name="GrayOffset" Color="Transparent"/>
            </LinearGradientBrush>
        </TextBlock.Foreground>
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Offset">
                        <DoubleAnimation Storyboard.TargetName="WhiteOffset" From="1" To="0.5" Duration="0:0:0.5"/>
                        <DoubleAnimation Storyboard.TargetName="GrayOffset" From="1" To="0.5" Duration="0:0:0.5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>

Answer 1

Вам не нужно наложение двух TextBlock. Достаточно поместить текст в Grid с OpacityMask, определяемую градиентом заливки, и анимировать этот градиент.

Как-то так у меня получилось:

<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5">
    <Grid.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" >
            <GradientStop x:Name="GradientMask" Offset="0.5" Color="Transparent" />
            <GradientStop Offset="{Binding Offset, ElementName=GradientMask}" Color="White" />
        </LinearGradientBrush>
    </Grid.OpacityMask>
    <TextBlock FontSize="120" FontFamily="Fonts/#TT Commons Bold" Text="So">
        <TextBlock.Foreground>
            <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                <GradientStop Color="#FF7C127B" Offset="0"/>
                <GradientStop Color="#FF482A7B" Offset="1"/>
            </LinearGradientBrush>
        </TextBlock.Foreground>
        <TextBlock.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetProperty="Offset">
                        <DoubleAnimation Storyboard.TargetName="GradientMask" From="1" To="0" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>
    </TextBlock>
</Grid>

БЛОГ НА HUSL

WPF Textblock в 2 слоя

Ответы (1 шт):