Home c# WPF TextBlock 2 layers

WPF TextBlock 2 layers

Author

Date

Category

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;

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions