Poser une questionPoser une question
 

TraitéeText crawl in Blend?

  • mercredi 5 mars 2008 08:31Modinaddr Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
    Hello,

    does anybody have an idea how to make text crawl in Blend? (one you can see many on TV news etc)

    Crawl should be bind to external data and live updated on air.

    Any help or idea (can i use some other tools with Blend?) is greatly appreciated.

    Thank you in advance.

    P.S. Not an native English speaker so sorry for any errors!

Réponses

  • vendredi 7 mars 2008 11:03Adrian Vinca MSFT Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     Traitée
    Hi,

    I haven't created any such control but here are some thoughts:
    I think you should create your own control (e.g. TextCrawlControl) - this requires some more advanced knowledge of WPF and you may need to write some code. You could try different ways to implement the control:

    1. Have custom code which creates/destroys the items you want to display
    - use a series of TextBlocks you animate right to left
    - dynamically add new TextBlocks, on the right side, in the invisible area of the screen - you could create them every time a new word or sentence needs to enter the screen
    - the control keeps tracks of all the TextBlocks and moves them to the left for every iteration; when a TextBlock reaches the left side, it gets removed from its parent (so that it gets destroyed)
    - the control could expose properties for Speed, Font Size, Font Family, perhaps a queue of items to be displayed

    2. Try using VirtualizingStackPanel. Its behavior is very similar to your scenario (it shows a list of items, uses virtualization):

    http://msdn2.microsoft.com/en-us/library/system.windows.controls.virtualizingstackpanel.aspx

    Hope this helps,
    Adrian

    - Adrian Vinca [MSFT]
    Content is provided "AS IS" with no warranties and confers no rights. Opinions are my own and do not represent those of my employer.

  • samedi 30 août 2008 11:07BalaMurugan_Sa Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     TraitéeA du code

    Hi Modinaddr,

    I tried a bit to create an user control called 'CrawlTextBox'. 

    Please find below the Code... Hope this will help you.

    ------------------------------------------------------------------------------------------------------------------------
    XAML Code - UserControl
    ------------------------------------------------------------------------------------------------------------------------
    <UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns
    :mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"
    x:Class="TextCrawl.CrawlTextBox"
    x:Name="UserControl"
    d:DesignWidth="640" d:DesignHeight="480">

     <DockPanel LastChildFill="False" Height="32" Width="288" HorizontalAlignment="Left" VerticalAlignment="Top">
    <TextBox Text="TextBox" TextWrapping="Wrap" DockPanel.Dock="Top" Height="32" x:Name="displayTextBox"/>
    </DockPanel>

    </UserControl>
    ------------------------------------------------------------------------------------------------------------------------

    --------------------------------------------------------------------------------------
    CodeBehind(C#) of UserControl
    --------------------------------------------------------------------------------------
    using
    System.Windows.Threading;
    namespace TextCrawl
    {
    public partial class CrawlTextBox
        
    {

        private DispatcherTimer timer;    
        
    public CrawlTextBox(){
            this.InitializeComponent();
            
    Loaded += new RoutedEventHandler(CrawlTextBox_Loaded);
            displayString =
    "I love WPF. I love SliverLight. I love Coding ";
            displayStringWidth = 15;
            interval = 100;
        }

    // This will contain the Displaying text
    private
    string displayString;
    public string DisplayString{get { return displayString; }set { displayString = value; }}

    // Specify the width of the text that need to shown on the screen
    private
    int displayStringWidth;public int DisplayStringWidth{get { return displayStringWidth; }set { displayStringWidth = value; }}

    // Specify the speed at which the text should crawl
    private
    double interval;
    public double Interval{get { return interval; }set { interval = value; }}

    private char tempText;

    private bool enable;

    public bool Enable{get { return enable; }set { enable = value; }}

    void CrawlTextBox_Loaded(object sender, RoutedEventArgs e)
    {

    timer = new DispatcherTimer();
    timer.Interval =
    TimeSpan.FromMilliseconds(interval);
    timer.Tick +=
    new EventHandler(timer_Tick);
    timer.Start();

    }

    void timer_Tick(object sender, EventArgs e)
    {
    if (!CheckForContent() || enable==false)
        
    return;

    FormatText();
    displayTextBox.Text = displayString.Substring(0,displayStringWidth);
    }

    private void FormatText()
    {

    tempText = displayString[0];
    // Remove the first character of the string
    displayString = displayString.Remove(0, 1);
    // Add the removed string to the last position of the stirng.
    displayString = displayString.Insert(displayString.Length, tempText.ToString());
    }

    private bool CheckForContent()
    {
    if (displayString.Length < 1)
        return false;
    else
        return true;
    }

    }

    }
    -------------------------------------------------------------------------------------
    Windows.XAML where this 'UserControl' is used.
    -------------------------------------------------------------------------------------

    <Window

    x:Name="Window"
    Title="Window1"

    Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:TextCrawl="clr-namespace:TextCrawl" Loaded="Window_Loaded">

    <Grid x:Name="LayoutRoot">
        
    <TextCrawl:CrawlTextBox HorizontalAlignment="Left" VerticalAlignment="Top"     
        x
    :Name="runText"    Loaded="crawlTextBox_Loaded"/>
    </Grid>

    </Window>

    -------------------------------------------------------------------------------------

    -------------------------------------------------------------------------------------
    CodeBehind ( where is usercontrol is used)
    -------------------------------------------------------------------------------------

    public partial class Window1
    {

        public Window1()
        {
            
    this.InitializeComponent();

            // Set the 'enable' property to true;
            runText.Enable = true;
        }

    }

    -BALA.

Toutes les réponses

  • vendredi 7 mars 2008 01:13Vinicius Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     

    Can you be more specific or give some example?

  • vendredi 7 mars 2008 08:12Modinaddr Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
    Text crawl is what you often see on TV when you watch your favorite news and there is some additional (text) info crawling in the lower third of the screen - typical. What I am working on is very similar. It is an automatized application for TV where you can interactively add your info over SMS to application to be displayed as text crawl. We already have an application for exporting SMSes into XML.
    My problem is I don't even know how to start solving this problem in Blend. I don't know if this should be done in some other environment or what :S . I thought about animate endless text block but I think this would lag application over time.. I am clueless at the moment.

    I hope this helps understand my problem a little, and I really need some help.

    Thank you

  • vendredi 7 mars 2008 11:03Adrian Vinca MSFT Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     Traitée
    Hi,

    I haven't created any such control but here are some thoughts:
    I think you should create your own control (e.g. TextCrawlControl) - this requires some more advanced knowledge of WPF and you may need to write some code. You could try different ways to implement the control:

    1. Have custom code which creates/destroys the items you want to display
    - use a series of TextBlocks you animate right to left
    - dynamically add new TextBlocks, on the right side, in the invisible area of the screen - you could create them every time a new word or sentence needs to enter the screen
    - the control keeps tracks of all the TextBlocks and moves them to the left for every iteration; when a TextBlock reaches the left side, it gets removed from its parent (so that it gets destroyed)
    - the control could expose properties for Speed, Font Size, Font Family, perhaps a queue of items to be displayed

    2. Try using VirtualizingStackPanel. Its behavior is very similar to your scenario (it shows a list of items, uses virtualization):

    http://msdn2.microsoft.com/en-us/library/system.windows.controls.virtualizingstackpanel.aspx

    Hope this helps,
    Adrian

    - Adrian Vinca [MSFT]
    Content is provided "AS IS" with no warranties and confers no rights. Opinions are my own and do not represent those of my employer.

  • lundi 10 mars 2008 10:41Modinaddr Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
    Thank you alot Adrian, this is very helpfull. At least i know where to look further :) and i see the problem is not the easy one. Thank you again,

    Zoran
  • samedi 30 août 2008 11:07BalaMurugan_Sa Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     TraitéeA du code

    Hi Modinaddr,

    I tried a bit to create an user control called 'CrawlTextBox'. 

    Please find below the Code... Hope this will help you.

    ------------------------------------------------------------------------------------------------------------------------
    XAML Code - UserControl
    ------------------------------------------------------------------------------------------------------------------------
    <UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns
    :mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"
    x:Class="TextCrawl.CrawlTextBox"
    x:Name="UserControl"
    d:DesignWidth="640" d:DesignHeight="480">

     <DockPanel LastChildFill="False" Height="32" Width="288" HorizontalAlignment="Left" VerticalAlignment="Top">
    <TextBox Text="TextBox" TextWrapping="Wrap" DockPanel.Dock="Top" Height="32" x:Name="displayTextBox"/>
    </DockPanel>

    </UserControl>
    ------------------------------------------------------------------------------------------------------------------------

    --------------------------------------------------------------------------------------
    CodeBehind(C#) of UserControl
    --------------------------------------------------------------------------------------
    using
    System.Windows.Threading;
    namespace TextCrawl
    {
    public partial class CrawlTextBox
        
    {

        private DispatcherTimer timer;    
        
    public CrawlTextBox(){
            this.InitializeComponent();
            
    Loaded += new RoutedEventHandler(CrawlTextBox_Loaded);
            displayString =
    "I love WPF. I love SliverLight. I love Coding ";
            displayStringWidth = 15;
            interval = 100;
        }

    // This will contain the Displaying text
    private
    string displayString;
    public string DisplayString{get { return displayString; }set { displayString = value; }}

    // Specify the width of the text that need to shown on the screen
    private
    int displayStringWidth;public int DisplayStringWidth{get { return displayStringWidth; }set { displayStringWidth = value; }}

    // Specify the speed at which the text should crawl
    private
    double interval;
    public double Interval{get { return interval; }set { interval = value; }}

    private char tempText;

    private bool enable;

    public bool Enable{get { return enable; }set { enable = value; }}

    void CrawlTextBox_Loaded(object sender, RoutedEventArgs e)
    {

    timer = new DispatcherTimer();
    timer.Interval =
    TimeSpan.FromMilliseconds(interval);
    timer.Tick +=
    new EventHandler(timer_Tick);
    timer.Start();

    }

    void timer_Tick(object sender, EventArgs e)
    {
    if (!CheckForContent() || enable==false)
        
    return;

    FormatText();
    displayTextBox.Text = displayString.Substring(0,displayStringWidth);
    }

    private void FormatText()
    {

    tempText = displayString[0];
    // Remove the first character of the string
    displayString = displayString.Remove(0, 1);
    // Add the removed string to the last position of the stirng.
    displayString = displayString.Insert(displayString.Length, tempText.ToString());
    }

    private bool CheckForContent()
    {
    if (displayString.Length < 1)
        return false;
    else
        return true;
    }

    }

    }
    -------------------------------------------------------------------------------------
    Windows.XAML where this 'UserControl' is used.
    -------------------------------------------------------------------------------------

    <Window

    x:Name="Window"
    Title="Window1"

    Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:TextCrawl="clr-namespace:TextCrawl" Loaded="Window_Loaded">

    <Grid x:Name="LayoutRoot">
        
    <TextCrawl:CrawlTextBox HorizontalAlignment="Left" VerticalAlignment="Top"     
        x
    :Name="runText"    Loaded="crawlTextBox_Loaded"/>
    </Grid>

    </Window>

    -------------------------------------------------------------------------------------

    -------------------------------------------------------------------------------------
    CodeBehind ( where is usercontrol is used)
    -------------------------------------------------------------------------------------

    public partial class Window1
    {

        public Window1()
        {
            
    this.InitializeComponent();

            // Set the 'enable' property to true;
            runText.Enable = true;
        }

    }

    -BALA.

  • mardi 9 septembre 2008 18:54philipsh Médailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateurMédailles de l'utilisateur
     
     Nice job BalaMurugan!  Works nice but the words are a bit jumpy.  I came up with a solution that is very smooth:

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/7a391faa-8607-4c2b-84d4-4ee3bf55a679

         Phil
    • Modifiéphilipsh mercredi 17 septembre 2008 15:13
    •