locked
Fading-in text in a textblock when button clicked RRS feed

  • Question

  • Hello Everyone,

    I have put together a simple program that, when initialized, puts text in txtBlock1 then fades-in text in txtBlock2. Perfect. It does what I want it to do. Then, I decided to have the same thing happen when I click a button. But when the button is clicked, the text in txtBlock2 just immediately appears. The fade is lost. I am utilizing the same textblock created in xaml that contains the fade information. Why does the fade work the first time in txtBlock2 but not the second? I look at the code, and it is right. I don't know where to go from here. Any help/explanation you could give me would be greatly appreciated. My code follows.

    <StackPanel>
            <TextBlock Name="txtBlock1" Margin="25,79,10,0" Height="40" TextAlignment="Center"
                       FontSize="16" Width="473"></TextBlock>
            <TextBlock Name="txtBlock2" Margin="25,6,10,0" Height="40" TextAlignment="Center"
                        FontSize="16" Width="473">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="TextBlock.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                      Storyboard.TargetName="txtBlock2" 
                      Storyboard.TargetProperty="(TextBlock.Opacity)"
                      From="-3.0" To="1.0" Duration="0:0:4" 
                      AutoReverse="False"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
            <Button Margin="50" Width="150" Height="30" Content="Button" Click="Button_Click"></Button>
        </StackPanel>

    public partial class MainWindow : Window
        {
            Random rnd = new Random();
            string[] string1 = new string[] {
            "Hello Again"};
            string[] string2 = new string[] {
            "Salutations"};
            public MainWindow()
            {
                InitializeComponent();
                txtBlock1.Text = "Hello World";
                UseFade();
            }

            private void UseFade()
            {
                txtBlock2.Text = ("Greetings");
            }

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                txtBlock2.Text = string.Empty;
                txtBlock1.Text = string1[rnd.Next(0, string2.Length)];

                if (txtBlock1.Text == string1[0].ToString())
                {
                    txtBlock2.Text = string2[0].ToString();
                }
            }
        }


    vb199

    Thursday, September 29, 2016 6:04 PM

Answers

  • >>Why does the fade work the first time in txtBlock2 but not the second?

    Because it is the Loaded event of the TextBlock that triggers your BeginStoryboard action and the Loaded event only happens once here:

    <EventTrigger RoutedEvent="TextBlock.Loaded">...

    If you want to trigger the Storyboard again when the Button is clicked, you could add another EventTrigger to the Button's Click event that performs the same action:

        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Key="sb">
                    <DoubleAnimation
                       Storyboard.TargetName="txtBlock2" 
                       Storyboard.TargetProperty="(TextBlock.Opacity)"
                       From="0" To="1.0" Duration="0:0:4" 
                       AutoReverse="False"/>
                </Storyboard>
            </StackPanel.Resources>
            <TextBlock Name="txtBlock1" Height="40" TextAlignment="Center"
                        FontSize="16" Width="473"></TextBlock>
            <TextBlock Name="txtBlock2" Height="40" TextAlignment="Center"
                         FontSize="16" Width="473">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="TextBlock.Loaded">
                        <BeginStoryboard Storyboard="{StaticResource sb}" />
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
            <Button Content="Button" Click="Button_Click">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource sb}" />
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>


    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by vb199 Thursday, September 29, 2016 9:20 PM
    Thursday, September 29, 2016 8:01 PM

All replies

  • >>Why does the fade work the first time in txtBlock2 but not the second?

    Because it is the Loaded event of the TextBlock that triggers your BeginStoryboard action and the Loaded event only happens once here:

    <EventTrigger RoutedEvent="TextBlock.Loaded">...

    If you want to trigger the Storyboard again when the Button is clicked, you could add another EventTrigger to the Button's Click event that performs the same action:

        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Key="sb">
                    <DoubleAnimation
                       Storyboard.TargetName="txtBlock2" 
                       Storyboard.TargetProperty="(TextBlock.Opacity)"
                       From="0" To="1.0" Duration="0:0:4" 
                       AutoReverse="False"/>
                </Storyboard>
            </StackPanel.Resources>
            <TextBlock Name="txtBlock1" Height="40" TextAlignment="Center"
                        FontSize="16" Width="473"></TextBlock>
            <TextBlock Name="txtBlock2" Height="40" TextAlignment="Center"
                         FontSize="16" Width="473">
                <TextBlock.Triggers>
                    <EventTrigger RoutedEvent="TextBlock.Loaded">
                        <BeginStoryboard Storyboard="{StaticResource sb}" />
                    </EventTrigger>
                </TextBlock.Triggers>
            </TextBlock>
            <Button Content="Button" Click="Button_Click">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{StaticResource sb}" />
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>


    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by vb199 Thursday, September 29, 2016 9:20 PM
    Thursday, September 29, 2016 8:01 PM
  • Awesome! Thank you.

    vb199

    Thursday, September 29, 2016 9:20 PM