I put one textblock
on top of another to create the animation you need, but noticed that the edges of the lower slightly seen from under the top:
This is how the bottom layer looks like:
This isolation absolutely all spoils, is it possible to get rid of it?
Code:
& lt; textblock fontsize = "120"
Width = "255"
Height = "95"
X: NAME = "SERV1"
Fontfamily = "fonts / # TT Commons Bold"
Margin = "80,217,0,0"
Horizontalignment = "left"
VerticalAlignment = "Top" & gt;
& lt; textblock.Foreground & gt;
& lt; lineargradientbrush endpoint = "1.0" startpoint = "0,0" & gt;
& lt; gradientstop color = "# FF7C127B" offset = "0" / & gt;
& lt; gradientstop color = "# FF482A7B" offset = "1" / & gt;
& lt; / lineargradientBrush & gt;
& lt; /textblock.ForeGround>
SO.
& lt; / textblock & gt;
& lt; 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}"
Horizontalignment = "left"
VerticalAlignment = "Top" & gt;
& lt; textblock.Foreground & gt;
& lt; lineargradientbrush endpoint = "0.5.1" startpoint = "0.5.0" & gt;
& lt; gradientstop x: name = "whiteoffset" color = "# 211E23" / & gt;
& lt; GRADIENTSTOP X: name = "grayoffset" color = "transparent" / & gt;
& lt; / lineargradientBrush & gt;
& lt; /textblock.ForeGround>
& lt; textblock.triggers & gt;
& lt; eventtrigger routedevent = "Loaded" & gt;
& lt; beginstoryboard & gt;
& lt; statoryboard statoryboard.targetProperty = "offset" & gt;
& lt; doubleanimation storyboard.targetname = "whiteoffset" from = "1" to = "0.5" Duration = "0: 0: 0.5" / & gt;
& lt; doubleanimation storyboard.targetname = "grayoffset" from = "1" to = "0.5" Duration = "0: 0: 0.5" / & gt;
& lt; / StoryBoard & gt;
& lt; / beginstoryboard & gt;
& lt; / eventtrigger & gt;
& lt; /textblock.triggers>
& lt; / textblock & gt;
Answer 1
You do not need to overlay two TextBlock
. It is enough to put the text in the grid
with opacitymask
, determined by the fill gradient, and animate this gradient.
Somehow I got it:
& lt; grid horizontalignment = "left" verticalalignment = "top" margin = "5" & gt;
& lt; grid.opacityMask & gt;
& lt; lineargradientBrush startpoint = "0.5.0" endpoint = "0.5.1" & gt;
& lt; GradientStop X: name = "gradientmask" offset = "0.5" color = "transparent" / & gt;
& lt; gradientstop offset = "{binding offset, elementname = gradientmask}" Color = "White" / & gt;
& lt; / lineargradientBrush & gt;
& lt; /grid.opacityMask>
& lt; TextBlock fontsize = "120" fontfamily = "fonts / # TT Commons Bold" Text = "SO" & gt;
& lt; textblock.Foreground & gt;
& lt; lineargradientbrush endpoint = "1.0" startpoint = "0,0" & gt;
& lt; gradientstop color = "# FF7C127B" offset = "0" / & gt;
& lt; gradientstop color = "# FF482A7B" offset = "1" / & gt;
& lt; / lineargradientBrush & gt;
& lt; /textblock.ForeGround>
& lt; textblock.triggers & gt;
& lt; eventtrigger routedevent = "Loaded" & gt;
& lt; beginstoryboard & gt;
& lt; statoryboard statoryboard.targetProperty = "offset" & gt;
& lt; doubleanimation storyboard.targetname = "gradientmask" from = "1" to = "0" Duration = "0: 0: 1" / & gt;
& lt; / StoryBoard & gt;
& lt; / beginstoryboard & gt;
& lt; / eventtrigger & gt;
& lt; /textblock.triggers>
& lt; / textblock & gt;
& lt; / grid & gt;