Unable to Service Request

Question

Hi,

I'm now trying to build a WPF application with animated text. I want to have random shaking animation for each character separately. Is there a way to implement this?

Any advice will be helpful.

Thanks!

Momo

---

Wooooh!

Answer 1

You could do something like this I suppose...

<StackPanel>
    <ItemsControl ItemsSource="I'm shaking!">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <StackPanel Orientation="Horizontal"></StackPanel>
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding }">
            <TextBlock.Style>
              <Style TargetType="TextBlock">
                <Setter Property="RenderTransformOrigin" Value="0.5 0.5" />
                <Setter Property="RenderTransform">
                  <Setter.Value>
                    <RotateTransform />
                  </Setter.Value>
                </Setter>
                <Style.Triggers>
                  <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                      <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(TextBlock.RenderTransform).(RotateTransform.Angle)" From="-15" To="15" Duration="0:0:0.1" AutoReverse="True" RepeatBehavior="Forever" />
                      </Storyboard>
                    </BeginStoryboard>
                  </EventTrigger>
                </Style.Triggers>
              </Style>
            </TextBlock.Style>
          </TextBlock>
        </DataTemplate>
      </ItemsControl.ItemTemplate>
    </ItemsControl>
    </StackPanel>

Warm regards,

Matt

Answer 2

Thanks Matt!

If I want to further improve the effect, is there any way to make each character shake differently? Like generate a random number of RotateTransform.angle and apply?

Thanks again!

Momo

---

Wooooh!

Answer 3

Hmf, trickier than I thought!

I've encapsulated this into a ShakingTextBlock Control for you and added comments for your reading pleasure ;)

<StackPanel>
    <WpfApplication269:ShakingTextBlock Text="I'm shaking.."></WpfApplication269:ShakingTextBlock>       
</StackPanel>

public class ShakingTextBlock : ContentControl // Derive from ContentControl (ideally should be Control or FrameworkElement though)
{
    private ItemsControl _itemsControl = new ItemsControl(); // What our ShakingTextBlock will set as it's Content
    private Random _random = new Random();
        
    public string Text // Expose a Text Dependency Property so we can set it in XAML
    {
        get { return (string) GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof (string), typeof (ShakingTextBlock), new UIPropertyMetadata());

    public ShakingTextBlock()
    {
        Content = _itemsControl; // set the Content of our ShakingTextBlock

        // And set up the ItemsPanelTemplate (should ideally be set from XAML in a ResourceDictionary)
        FrameworkElementFactory frameworkElementFactory = new FrameworkElementFactory(typeof (StackPanel));
        ItemsPanelTemplate itemsPanelTemplate = new ItemsPanelTemplate(frameworkElementFactory);
        frameworkElementFactory.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);
        _itemsControl.ItemsPanel = itemsPanelTemplate;

        this.Loaded += new RoutedEventHandler(ShakingTextBlock_Loaded);
    }

    private void ShakingTextBlock_Loaded(object sender, RoutedEventArgs e)
    {
        _itemsControl.ItemsSource = Text; // Make our ItemsControl/Content show our Text
            
        for (int n = 0; n < _itemsControl.Items.Count; n++) // The ItemsControl will show each letter of our text in a ContentPresenter/TextBlock container 
        {
            ContentPresenter contentPresenter = _itemsControl.ItemContainerGenerator.ContainerFromIndex(n) as ContentPresenter; // Get the container for this letter
            contentPresenter.RenderTransformOrigin = new Point(.5, .5); // what point will we rotate around?
            contentPresenter.RenderTransform = new RotateTransform(0); // what sort of RenderTransform will we apply

            TimeSpan duration = TimeSpan.FromMilliseconds(_random.Next(200) + 100); // how long does this shake for this letter last
            int maxAngle = _random.Next(10) + 10; // and how far will it travel
            DoubleAnimation animation = new DoubleAnimation(-maxAngle, maxAngle, duration); // create the animation
            animation.AutoReverse = true; // make sure it goes back and forth ..
            animation.RepeatBehavior = RepeatBehavior.Forever; // forever
                
            var rt = (RotateTransform) contentPresenter.RenderTransform; // get our RenderTransform (which is really a RotateTransform)
            rt.BeginAnimation(RotateTransform.AngleProperty, animation); // and ask it to start our animation!
        }
    }
}

Warm regards,

Matt