Wpf Text marquee behind other element

Question

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;
}

score 2 · Accepted Answer · answered Oct 16 '15 at 10:01

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

Jose · Answer 2 · 2015-10-16T09:57:22.517

1

Try the Grid.ZIndex:

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

Being ZIndex = "2" the most visible layer.

edited Oct 16 '15 at 09:57

answered Oct 16 '15 at 09:42

Jose

1,857
1
16
34

I try it with a grid around it and with a canvas around it. Like [here](http://stackoverflow.com/a/5450993/4248617). But it doesn't change anything. – Leon Husmann Oct 16 '15 at 09:55
You are using the `doubleAnimation.To = tbInfo.ActualWidth *-1;` Right? Also you can try changing the order of the elements. First the textblock and then the border. – Jose Oct 16 '15 at 10:00
Yes i do. See the answer from @O.DO, the Panel.ZIndex is the way to go. – Leon Husmann Oct 16 '15 at 10:05

Wpf Text marquee behind other element

2 Answers2