Search code examples
c#wpfcanvastextmarquee

Wpf Text marquee behind other element


I built an messagebar, with an animated text, see the .gif from the animation. Like you can see the text "fly's" in the foreground and hides the placeholder. But I need the placeholder in the foreground.

My first idea was to change the region of the animation from

doubleAnimation.To = tbInfo.ActualWidth *-1;

to

doubleAnimation.To = boLogo.ActualWidth;

but the result looks like this: version with other animation area.

How can I set the placeholder in the foreground, so that the animation "fly's" behind it?


My XAML-Code

<Canvas x:Name="canMain" HorizontalAlignment="Stretch" VerticalAlignment="Center">
    <Border x:Name="boLogo" Height="40" Background="Gray" Canvas.Left="0" Canvas.Top="-20">
        <Button Content="Placeholder" Width="90" />
    </Border>
    <TextBlock x:Name="tbInfo" Visibility="Hidden" FontSize="32" FontWeight="Bold"  Padding="5" HorizontalAlignment="Stretch" VerticalAlignment="Center"></TextBlock>
</Canvas>

and the code to show the window

public void ShowWindow(string str)
{
    tbInfo.Text = str;
    this.Height = 39;
    this.Width = SystemParameters.WorkArea.Width;
    this.Left = SystemParameters.PrimaryScreenWidth - this.Width;
    this.Show();

    TextMarquee(20);
}

private void TextMarquee(int duration)
{
    double height = canMain.ActualHeight - tbInfo.ActualHeight;
    tbInfo.Margin = new Thickness(0, height / 2, 0, 0);
    DoubleAnimation doubleAnimation = new DoubleAnimation();
    doubleAnimation.From = canMain.ActualWidth;
    doubleAnimation.To = tbInfo.ActualWidth * -1;
    doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(duration));
    tbInfo.BeginAnimation(Canvas.LeftProperty, doubleAnimation);
    tbInfo.Visibility = Visibility.Visible;
}

Solution

  • Use the Panel.ZIndex:

    <Canvas x:Name="canMain" >
    <Border x:Name="boLogo" Panel.ZIndex="2">
        <Button Content="Placeholder" Width="90" />
    </Border>
    <TextBlock x:Name="tbInfo" Panel.ZIndex="1"></TextBlock>
    </Canvas>
    

    https://msdn.microsoft.com/de-de/library/system.windows.controls.panel.zindex%28v=vs.110%29.aspx