WPF FAQ - Rendering Graphics

How do I execute 2 animations in parallel?

You can do so by first making the 2 animations a child of a single storyboard as follows:

<BeginStoryboard>
    <Storyboard x:Name='Animation'>
        <Storyboard x:Name='FadeInStoryboard'/>
        <Storyboard x:Name='FadeOutStoryboard'/>
    </Storyboard
</BeginStoryboard>
Permalink
What is the order in which the controls are rendered ?

The visual tree determines the rendering order of WPF visual and drawing objects. The rendering order of traversal starts with the root visual, which is the top most element in the root visual tree. The root visual’s children are then traversed, left to right. Find the following button control rendering order in visual tree.

Reference link: https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/wpf-graphics-rendering-overview

Permalink
How rendering in WPF differs from WIN32 applications?

A WIN32 application uses immediate mode graphics system wherein the application is responsible for repainting the client area when they are resized or the object’s visual appearance is changed. WPF on the contrary uses retained mode graphics system. In this mode, drawing information of an object is persisted and serialized by the application and the rendering is done by the system.

Permalink
How can I use a DoubleAnimation to rotate the textblock ?

The following example uses a DoubleAnimation to rotate the textblock. The textblock performs a full rotation over a duration of 20 seconds and then continues to repeat the rotation.

[XAML]

<TextBlock
  Name='MyRotatingText'
  Margin='20' 
  Width='640' Height='100' FontSize='48' FontWeight='Bold' Foreground='Teal' 
  >
  This is rotating text
  <TextBlock.RenderTransform>
    <RotateTransform x:Name='MyRotateTransform' Angle='0' CenterX='230' CenterY='25'/>
  </TextBlock.RenderTransform>

  <!-- Animates the text block’s rotation. -->
  <TextBlock.Triggers>
    <EventTrigger RoutedEvent='TextBlock.Loaded'>
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName='MyRotateTransform' 
            Storyboard.TargetProperty='(RotateTransform.Angle)'
            From='0.0' To='360' Duration='0:0:10' 
            RepeatBehavior='Forever' />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </TextBlock.Triggers>
</TextBlock>
Permalink
How can I create a combined hard and soft shadow ?

This can be done as follows.

[XAML]

<!-- Hard shadow on top of soft shadow. -->
<TextBlock
  Text='Shadow Text'
  Foreground='CornflowerBlue'>
  <TextBlock.BitmapEffect>
    <BitmapEffectGroup>
      <BitmapEffectGroup.Children>
        <DropShadowBitmapEffect
          ShadowDepth='5'
          Direction='330'
          Color='DarkSlateBlue'
          Opacity='0.75'
          Softness='0.50' />
        <DropShadowBitmapEffect
          ShadowDepth='2'
          Direction='330'
          Color='Maroon'
          Opacity='0.5'
          Softness='0.0' />
      </BitmapEffectGroup.Children>
    </BitmapEffectGroup>
  </TextBlock.BitmapEffect>
</TextBlock>
Permalink