Starwars text effect in WPF

Question

Hi there,

Our company executives have requested the integration of a "Star Wars crawl" style credits screen for our About box in our application and I've been tasked to complete this within a week. We have recently ported our WinForms application to WPF and therefore we're all very new to WPF.

As I'm even newer to WPF, I'm not sure where to even start. Can anyone give me a pointer to where I could look for existing example of this effect?

I have a feeling the DoubleAnimation is where I'm meant to be looking, but how I make the text crawl up the screen and into a single point is where I'm a bit lost and how to fade the text out and move into the middle of the screen (like the STAR WARS bit).

Is this easy to do in WPF or should just get an animation going? The problem is that we have text that changes based on the installed version and user.

Answer 1

Found this on a quick search. It's designed for Silverlight but you can port it easily to WPF. Even more it uses Blend in the example which is used for both WPF and Silverlight when it comes to UI design.

This should give you a starting point.

Regards...

Answer 2

Here's a quick sample I threw together for you. It uses 3D and doesn't seem to perform that well. But it works!

<Window
  x:Class="StarWars.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow" Height="480" Width="640" Background="Black">

  <Viewport3D ClipToBounds="True" Width="Auto" Height="Auto">
    <Viewport3D.Triggers>
      <EventTrigger RoutedEvent="Viewport3D.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="Translation"
              Storyboard.TargetProperty="OffsetY"
              To="10"
              Duration="0:1:0" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Viewport3D.Triggers>
    <Viewport3D.Camera>
      <PerspectiveCamera
        FarPlaneDistance="100"
        NearPlaneDistance="1"
        FieldOfView="30"
        LookDirection="0,25,-13"
        UpDirection="0,1,0"
        Position="0,2,1.5" />
    </Viewport3D.Camera>
    <ModelVisual3D>
      <ModelVisual3D.Content>
        <Model3DGroup>
          <Model3DGroup.Children>
            <AmbientLight Color="#FF808080" />
            <GeometryModel3D>
              <GeometryModel3D.Transform>
                <TranslateTransform3D
                  x:Name="Translation"
                  OffsetY="3" />
              </GeometryModel3D.Transform>
              <GeometryModel3D.Geometry>
              <MeshGeometry3D
                Positions="-1,-2,0 1,-2,0 1,1,0 -1,1,0"
                TriangleIndices="0 1 2  0 2 3"
                TextureCoordinates="0,1 1,1 1,0 0,0"
                Normals="0,0,1 0,0,1" />
              </GeometryModel3D.Geometry>
              <GeometryModel3D.Material>
                <DiffuseMaterial>
                  <DiffuseMaterial.Brush>
                    <VisualBrush>
                      <VisualBrush.Visual>
                        <TextBlock
                        Foreground="Yellow"
                        FontFamily="Consolas"
                        TextAlignment="Center">
                          Lorem ipsum dolor sit amet,<LineBreak/>
                          consectetur adipiscing elit.<LineBreak/>
                          Integer malesuada, massa<LineBreak/>
                          vitae suscipit dictum, purus<LineBreak/>
                          dolor volutpat arcu, ac<LineBreak/>
                          tincidunt erat mauris sed nisi.<LineBreak/>
                          Sed ac eros ac augue<LineBreak/>
                          ullamcorper sodales sed id leo.<LineBreak/><LineBreak/>
                          Suspendisse nibh enim,<LineBreak/>
                          hendrerit vitae pretium et,<LineBreak/>
                          gravida in tortor. Lorem ipsum<LineBreak/>
                          dolor sit amet, consectetur<LineBreak/>
                          adipiscing elit. Maecenas<LineBreak/>
                          condimentum enim eu tellus<LineBreak/>
                          feugiat mollis ac ut arcu.<LineBreak/>
                          Ut fringilla tempus volutpat.<LineBreak/>
                          Duis elementum convallis<LineBreak/>
                          tincidunt.<LineBreak/><LineBreak/>

                          Mauris lacus tortor,<LineBreak/>
                          tristique nec congue at,<LineBreak/>
                          adipiscing sed eros.<LineBreak/><LineBreak/>

                          In volutpat eros id nunc<LineBreak/>
                          hendrerit eget aliquet nisi<LineBreak/>
                          lacinia.<LineBreak/><LineBreak/>

                          Suspendisse et lorem augue, non eleifend est.
                        </TextBlock>
                      </VisualBrush.Visual>
                    </VisualBrush>
                  </DiffuseMaterial.Brush>
                </DiffuseMaterial>
              </GeometryModel3D.Material>
            </GeometryModel3D>
          </Model3DGroup.Children>
        </Model3DGroup>
      </ModelVisual3D.Content>
    </ModelVisual3D>
  </Viewport3D>
</Window>

Answer 3

Check my version. It has shading - when text comes over certain point it starts disapperating, like in original version (you can check on youtube)

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="500" Background="Black">
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded" >
            <BeginStoryboard>
                <Storyboard Name="story">
                    <DoubleAnimation
                        Storyboard.TargetName="TextPos" 
                        Storyboard.TargetProperty="OffsetY" 
                        From="-1.5" To="5" Duration="0:1:30" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

    <Grid>
        <Viewport3D Name="viewport3D1" >
            <Viewport3D.Camera>
                <PerspectiveCamera x:Name="camMain" Position="0.5 -1 0.4" LookDirection="0 5 -1">
                </PerspectiveCamera>
            </Viewport3D.Camera>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <AmbientLight Color="White"></AmbientLight>

                </ModelVisual3D.Content>
            </ModelVisual3D>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <GeometryModel3D>
                        <GeometryModel3D.Geometry>
                            <MeshGeometry3D x:Name="meshMain"
                                Positions="0.2 -5 0   0.8 -5 0   0.2 1 0   0.8 1 0"
                                TriangleIndices="0 1 3  0 3 2"
                                TextureCoordinates="0 1  1 1  0 0  1 0">
                            </MeshGeometry3D>
                        </GeometryModel3D.Geometry>
                        <GeometryModel3D.Material>
                            <DiffuseMaterial x:Name="matDiffuseMain" >
                                <DiffuseMaterial.Brush>
                                    <VisualBrush>
                                        <VisualBrush.Visual>
                                            <Grid Width="200" Height="1000" Background="Black">
                                                <Border BorderBrush="Black">
                                                    <TextBlock  Background="Black"
                                                             TextWrapping="Wrap"
                                                             Foreground="#FFFFDA00" 
                                                             FontFamily="Franklin Gothic" 
                                                             FontWeight="Bold"
                                                             FontSize="16"
                                                             TextAlignment="Justify"
                                                             LineHeight="17"
                                                             LineStackingStrategy="BlockLineHeight"
                                                             >
                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <LineBreak/> <LineBreak/> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<LineBreak/> <LineBreak/>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<LineBreak/> <LineBreak/>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<LineBreak/> <LineBreak/>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<LineBreak/> <LineBreak/>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                                    </TextBlock>
                                                </Border>
                                            </Grid>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </DiffuseMaterial.Brush>
                            </DiffuseMaterial>
                        </GeometryModel3D.Material>
                    </GeometryModel3D>                    
                </ModelVisual3D.Content>
                <ModelVisual3D.Transform>
                    <TranslateTransform3D x:Name="TextPos" OffsetY="-1.5"/>
                </ModelVisual3D.Transform>
            </ModelVisual3D>
            <ModelVisual3D>
                <ModelVisual3D.Content>
                    <GeometryModel3D>
                        <GeometryModel3D.Geometry>
                            <MeshGeometry3D x:Name="meshShadow"
                                Positions="0.2 0.5 0.1   0.8 0.5 0.1   0.2 5 0.1   0.8 5 0.1"
                                TriangleIndices="0 1 3  0 3 2"
                                TextureCoordinates="0 1  1 1  0 0  1 0">
                            </MeshGeometry3D>
                        </GeometryModel3D.Geometry>
                        <GeometryModel3D.Material>
                            <DiffuseMaterial x:Name="matDiffuseShade" >
                                <DiffuseMaterial.Brush>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0.85" />
                                        <GradientStop Color="#00000000" Offset="1.0" />
                                    </LinearGradientBrush>
                                </DiffuseMaterial.Brush>
                            </DiffuseMaterial>
                        </GeometryModel3D.Material>
                    </GeometryModel3D>
                </ModelVisual3D.Content>
            </ModelVisual3D>
        </Viewport3D>
    </Grid>
</Window>