Need help creating a scrolling textblock,

Question

I'm working on a scrolling text control.

I have a grid with 2 columns. At the moment the scrolling text goes over the left column, but I don't want that.

enter image description here

code:

<Window x:Class="WpfApplication5.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication5"
    Title="MainWindow" Height="83" Width="350" Name="UI" Tag="Tol Level">


<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="125" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <WrapPanel Background="Red" Grid.Column="0" />

    <StackPanel Grid.Column="1" Orientation="Horizontal" x:Name="stack">
        <StackPanel.Resources>
            <local:NegatingConverter x:Key="NegatingConverter" />
            <Storyboard x:Key="slide">
                <DoubleAnimation From="0" To="{Binding Width, ElementName=canvas, Converter={StaticResource NegatingConverter}}" Duration="00:00:02"
                      Storyboard.TargetProperty="X"
                      Storyboard.TargetName="transferCurreny"
                      RepeatBehavior="Forever"/>
            </Storyboard>
        </StackPanel.Resources>
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="transferCurreny" X="0"/>
        </StackPanel.RenderTransform>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
            <EventTrigger RoutedEvent="StackPanel.SizeChanged">
                <BeginStoryboard Storyboard="{StaticResource slide}" />
            </EventTrigger>
        </StackPanel.Triggers>
        <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}">
            <TextBlock Text="StackOverflow" FontSize="25"  x:Name="txtKron" Canvas.Left="0"/>
            <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas}"/>
        </Canvas>
    </StackPanel>
</Grid>

And this is the code behind :

namespace WpfApplication5
{

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

public class NegatingConverter : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is double)
        {
            return -((double)value);
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is double)
        {
            return +(double)value;
        }
        return value;
    }
}
}

I used this answer as inspiration :

https://stackoverflow.com/a/15328839/1271907

score 1 · Accepted Answer · answered Oct 14 '13 at 15:05

In WPF, the order that you declare your XAML elements is reflected by their Z-index value (front to back). Therefore, the simplest fix for your problem is simply to move the WrapPanel to the bottom of your code, eg. declare it last, where it will then be on top of the scrolling TextBlock:

...
        <Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}">
            <TextBlock Text="StackOverflow" FontSize="25"  x:Name="txtKron" Canvas.Left="0"/>
            <TextBlock Text="{Binding Text, ElementName=txtKron}" FontSize="25" Canvas.Left="{Binding Width, ElementName=canvas}"/>
        </Canvas>
    </StackPanel>
    <WrapPanel Background="Red" Grid.Column="0" />
</Grid>

Need help creating a scrolling textblock,

1 Answers1