Effect on data by blend

Question

There is way to do effect (fade in > fade out > fade in) in Expression blend (wpf) on text from data?

example:

i have table (let's say SQL) with the data:

Name: Jack

Name: Jhon

Name: Jade

how can i do that Jack will display - and after 5 sec -> Jack will fade out and then Jhon will fade in.. and so on.

I know how to connect the sql and to write c# class and use it on wpf, but how can i do the effect from the example?

Answer 1

Here is an example that achieves it

A simple data model

 public class ModelList : List<string>
    {
        public ModelList()
        {
            Add("John");
            Add("Jack");
            Add("Sue");
        }

        public int CurrentIndex = 0;
        public string CurrentItem
        {
            get
            {
                return this[CurrentIndex];
            }
        }
    }

Your Main Window

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

        void ContinueAnimation()
        {
            ModelList list = Resources["ModelList"] as ModelList;
            if ( list.CurrentIndex < (list.Count -1))
            {
                list.CurrentIndex += 1;
                Storyboard b = Resources["FadeOut"] as Storyboard;
                b.Begin();
            }
        }

        private void Start_Click(object sender, RoutedEventArgs e)
        {
            ContinueAnimation();
        }

        private void FadeOut_Completed(object sender, EventArgs e)
        {
            ContinueAnimation();    
        }

    }

Your main window xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:app="clr-namespace:WpfApplication1"
        Title="MainWindow"
        Width="1000"
        Height="1000">
    <Window.Resources>
        <app:ModelList x:Key="ModelList" />
        <Storyboard x:Key="FadeOut" x:Name="FadeOut" Completed="FadeOut_Completed">
            <DoubleAnimation Duration="0:0:0.5"
                             Storyboard.TargetName="MyLabel"
                             Storyboard.TargetProperty="Opacity"
                             To="0" />
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyLabel" Storyboard.TargetProperty="Text">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{Binding Source={StaticResource ModelList}, Path=CurrentItem}" />
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation BeginTime="0:0:0.5"
                             Duration="0:0:1"
                             Storyboard.TargetName="MyLabel"
                             Storyboard.TargetProperty="Opacity"
                             To="1" />
        </Storyboard>
    </Window.Resources>
    <StackPanel>

        <TextBlock Name="MyLabel"
                   Width="100"
                   Height="24"
                   Background="AliceBlue"
                   Text="{Binding Source={StaticResource ModelList},
                                  Path=CurrentItem}" />

        <Button Name="Start"
                Height="30"
                HorizontalAlignment="Left"
                Click="Start_Click">
            Start
        </Button>

    </StackPanel>
</Window>